Open the Command Palette (usually by
pressing Ctrl + Shift + P), then select “Graphviz: Show Preview”.
Mouse wheel up / +
Mouse wheel down / -
Toggle 100% zoom
Mouse double click / Space
Mouse drag / Left / Right / Up / Down / A / D / W / S
Zoom to 100%
Move to center
There are three zooming modes: Fixed, Fit and Auto Fit.
Fixed: The zoom ratio does not change when the source changes or the window size changes.
Fit: The graph is scaled to align to the border of the visible view area.
Auto Fit: When the view area is big enough to contain a 100% sized graph, the graph will be set a zoom ratio of
100%, otherwise the graph is scaled to fit into the view area.
To export the generated graph, click the “Export” button on the top right corner.
string | null
null means to use the “dot” program in your PATH environment variable, or a string value to indicate the “dot” program you want to use.
"dot" | null
The layout engine to use. null means to use the “dot” layout engine. 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.
[x] Add border and shadow to indicate the graph border.
[x] Allow user to save the generated graph.
[x] Report error if the source is invalid.
[x] Apply configuration change without restart.
[x] Allow user to manipulate preview with keyboard.
[ ] Add CI integration.
[ ] Add animation for zooming.
[x] Take a new screenshot.
[ ] Allow user to configure the default zoom mode.
[x] Add a preview button for source editor.
[x] Add cancellation support in scheduler.
[ ] Support previewing source containing multiple graphs.