A Visual Studio Code extension that allows you to preview Graphviz diagrams directly in your markdown files. This extension uses Viz.js for Graphviz rendering.
- Preview Graphviz diagrams in Markdown files with support for multiple layout engines.
- Uses Viz.js for rendering Graphviz graphs.
- Install the Markdown Graphviz Preview extension in Visual Studio Code.
- Open a markdown file and start writing Graphviz code blocks.
To render a simple binary tree with dot Engine, use the graphviz-dot or dot language block. Here's an example using the dot layout engine:
```dot
digraph BinaryTree {
node [shape=circle];
A -> B;
A -> C;
B -> D;
B -> E;
C -> F;
C -> G;
A [label="Root"];
B [label="Left"];
C [label="Right"];
D [label="L1"];
E [label="L2"];
F [label="R1"];
G [label="R2"];
}
```Or use graphviz-dot language mark,
```graphviz-dot
digraph BinaryTree {
node [shape=circle];
A -> B;
A -> C;
B -> D;
B -> E;
C -> F;
C -> G;
A [label="Root"];
B [label="Left"];
C [label="Right"];
D [label="L1"];
E [label="L2"];
F [label="R1"];
G [label="R2"];
}
```This will render the diagram in your markdown preview:
You can also change the layout engine by changing the language suffix in the code block. For example, to use the circo engine, change the block’s language to graphviz-circo or circo.
```circo
digraph BinaryTree {
node [shape=circle];
A -> B;
A -> C;
B -> D;
B -> E;
C -> F;
C -> G;
A [label="Root"];
B [label="Left"];
C [label="Right"];
D [label="L1"];
E [label="L2"];
F [label="R1"];
G [label="R2"];
}
```Or use graphviz-circo language mark,
```graphviz-circo
digraph BinaryTree {
node [shape=circle];
A -> B;
A -> C;
B -> D;
B -> E;
C -> F;
C -> G;
A [label="Root"];
B [label="Left"];
C [label="Right"];
D [label="L1"];
E [label="L2"];
F [label="R1"];
G [label="R2"];
}
```This will render the diagram with the circo engine:
If you don't specify any engine, it will take dot engine as the default engine. For more information on available layout engines, check the Graphviz documentation.
MIT © 但为君故