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 warning.
When the mouse hovers over an attribute, information about the attribute will be displayed.
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
Click 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.
Set graphviz.multiPanel to true in settings.json to preview multiple files at the same time.
Set graphviz.multiPanel to false in settings.json to preview in the same panel.
Set graphviz.hotUpdate to true in settings.json to enable hot update.
As shown in the figure above, change bgcolor to transparent in the editor on the left, then save, and the preview interface on the right will be updated synchronously immediately.
Click Export in the editor to export.
