Skip to content
| Marketplace
Sign in
Visual Studio Code>Programming Languages>Graphviz PreviewNew to Visual Studio Code? Get it now.

Graphviz Preview

EFanZh

|
68,504 installs
| (3) | Free
Preview Graphviz (DOT) files.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Graphviz Preview

.github/workflows/CI.yml Bors enabled

An extension for Visual Studio Code to preview Graphviz (DOT) files.

Graphviz Preview screenshot

Installation

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.

Usage

Open preview

Open the Command Palette (usually by pressing Ctrl + Shift + P), then select “Graphviz: Open Preview to the Side”.

Manipulate preview

Action Gesture
Zoom in Mouse wheel up / +
Zoom out Mouse wheel down / -
Toggle 100% zoom Mouse double click / Space
Pan Mouse drag / Left / Right / Up / Down / A / D / W / S
Zoom to 100% 0
Move to center X

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.

Export graph

To export the generated graph, click the “Export” button on the top right corner.

Configuration

Configuration Type Description
graphvizPreview.dotPath string Path to the “dot” executable.
graphvizPreview.dotExtraArgs string[] Extra arguments passed to the “dot” executable.
graphvizPreview.engine "dot" 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.

Roadmap

  • [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.
  • [x] 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.
  • [ ] Design a better icon.
  • [x] Apply Content Security Policy to webview.
  • [x] Support specifying a command-line array for the “dotPath” configuration so that we can use a wrapper for the “dot” program.
  • [ ] Fix no-explicit-any errors.
  • [ ] Fix no-use-before-define errors.
  • [ ] Add focus indicator to preview controls.

Known issues

  • After saving an untitled file, the preview becomes invalid.
  • When the zoom ratio is too large, the graph may be at a wrong position.

FAQ

  • Q: How do I change the layout engine?
    • A: Set graphvizPreview.dotExtraArgs configuration to ["-Glayout=<ENGINE>"], where <ENGINE> is the desired layout engine.
  • Contact us
  • Jobs
  • Privacy
  • Terms of use
  • Trademarks
© 2023 Microsoft