An extension for Visual Studio Code to preview Graphviz (DOT) files.
You can install this extension from the Visual Studio Marketplace.
This extension requires Graphviz to be installed. Also, make sure that the extension can find
the dot
executable provided by Graphviz. Either make sure the directory containing the dot
executable exists in the
PATH
or Path
environment variable, or specify the path of the dot
executable with graphvizPreview.dotPath
configuration.
Open the Command Palette (usually by
pressing Ctrl
+ Shift
+ P
), then select “Graphviz: Open Preview to the Side”.
Action | Gesture |
---|---|
Previous graph | P |
Next graph | N |
Zoom in | Mouse wheel up / + |
Zoom out | Mouse wheel down / - |
Toggle center position | X |
Toggle 100% scale | Mouse double click / Space / 0 |
Scroll | Mouse drag / Left / Right / Up / Down / A / D / W / S |
There are three scale modes: Fixed, Fit and Auto Fit.
To export the generated graph, click the “Export” button on the top right corner.
Configuration | Type | Description |
---|---|---|
graphvizPreview.dotPath |
string |
Path to the dot executable. |
graphvizPreview.dotExtraArgs |
string[] |
Extra arguments passed to the dot executable. |
graphvizPreview.engine |
string |
The layout engine to use. Currently, only the dot engine is supported. |
Make sure the extension can find the dot
program. You can set graphvizPreview.dotPath
option to the path of the dot
executable, or make sure the directory containing the dot program is in your PATH
environment variable.
To set the graphvizPreview.dotPath
option, go to File → Preference → Settings.
graphvizPreview.dotExtraArgs
configuration to ["-Glayout=<ENGINE>"]
, where <ENGINE>
is the desired
layout engine.