Real-Time Diagram as Code for VSCode

Live preview for SVG files and Python diagrams-as-code (via the diagrams library), right inside VS Code — updates as you type, no manual re-render needed.

Features

Live editing of SVG files and SVG's embedded inside other files
Live preview of Python diagrams-as-code scripts (using the diagrams library), rendered to SVG in real time as you edit
Panning and zooming of the preview (up to 32767%)
Custom preview styling (background, borders, etc.)

Commands

Command	Keybinding
Real-Time Diagram as Code: Open Preview to the Side	`ctrl+alt+p`
Real-Time Diagram as Code: Reload Preview	none

Settings

Property	Description	Default
realtimeDiagrams.autoOpen	Automatically open the preview when a svg file is opened	`false`
realtimeDiagrams.scaleToFit	Whether or not the svg should be scaled to fit the viewport or keep its original size	`true`
realtimeDiagrams.style	Custom style for the preview	`{}`

How to use the `realtimeDiagrams.style` setting

You can change the background color:

{
  "realtimeDiagrams.style": {
    "html": {
      "background": "white"
    }
  }
}

Or you can make a checkerboard background:

{
  "realtimeDiagrams.style": {
    "html": {
      "background-position": "0 0, 13px 13px",
      "background-size": "26px 26px",
      "background-image": "linear-gradient(45deg, [#141414](https://github.com/alloc7260/Real-Time-Diagram-as-Code/issues/141414) 25%, transparent 25%, transparent 75%, [#141414](https://github.com/alloc7260/Real-Time-Diagram-as-Code/issues/141414) 75%, [#141414](https://github.com/alloc7260/Real-Time-Diagram-as-Code/issues/141414)), linear-gradient(45deg, [#141414](https://github.com/alloc7260/Real-Time-Diagram-as-Code/issues/141414) 25%, transparent 25%, transparent 75%, [#141414](https://github.com/alloc7260/Real-Time-Diagram-as-Code/issues/141414) 75%, [#141414](https://github.com/alloc7260/Real-Time-Diagram-as-Code/issues/141414))"
    }
  }
}

Or a gradient background:

{
  "realtimeDiagrams.style": {
    "html": {
      "background-image": "linear-gradient(135deg, #1e3c72, #2a5298)"
    }
  }
}

Credits

This extension is built upon SimonSiefke/vscode-svg-preview (MIT licensed), with added support for live Python diagrams-as-code preview using:

Pyodide — runs Python in-process to execute diagrams-as-code scripts
diagrams — the Python library used to describe diagrams as code
Graphviz (via @ts-graphviz/adapter) — renders the resulting DOT graph to SVG

Real-Time Diagram as Code

Pranav Hirani