Graphviz(dot) language supported and preview (Visual Studio Code Extension)
This plugin provides features such as code highlighting, error prompts, auto-completion, color selection, automatic formatting, find references and rename references for the
dot language. At the same time, use viz.js to preview the code.
Here a directed graph
digraph is defined, but
-- is used to connect the edges, so an
error is prompted. A non-existing attribute
bgcolor was used in an edge attribute, thus giving a
Mouse hover prompt
When the mouse hovers over an
attribute, information about the attribute will be displayed.
Selection of color
When the mouse moves over the color, a color selection box will appear for selecting a color.
This plugin gives autocompletion functionality. Keyword attributes and attribute values can be hinted.
At the same time, you can also prompt for the defined nodes and the port of the nodes.
There is a small bug for versions below
1.1.14, where the formatting feature removes all comments. But
1.1.14 fixes this bug.
keep the comments
Find references, rename nodes
Preview in the editor to preview, you can drag the mouse or use the scroll wheel to zoom in and out. Click the drop-down menu above to switch the layout engine.
Preview multiple files
settings.json to preview multiple files at the same time.
Preview in the same panel
settings.json to preview in the same
settings.json to enable hot update.
As shown in the figure above, change
transparent in the editor on the left, then save, and the preview interface on the right will be updated synchronously immediately.
Export in the editor to export.