Brush topic, summary, is as an important means of tamping technology foundation. When we implement complex data structures, or summarize some problem solving process, it is necessary to visualize the data structure and process. Drawing, can be compared with the theoretical results, more can make our summary more full.

One tool I recommend is Graphviz, which comes with an explanatory language, dot, and can be drawn in plain code.

1. Installation and use

Download it from the official website and install it foolishly.

Use, check the official website documentation.

2. Vscode plug-in

Using vscode plugins, you can render images directly from vscode after writing a dot file, without using the command line, freeing productivity.

Search graphviz in vscode and recommend the first two: graphviz Interactive Preview and graphviz Preview.

  • Graphviz Interactive Preview

  • Graphviz Preview

I prefer Graphviz Preview, which exports PNG images after rendering.

Do not apply the plugin, you can also use the command to manually render, dot-tpng your code filename -o output image filename.

3. Solve the problem of Chinese garbled characters in exported pictures

In the image generated by rendering, if there are Chinese characters, when exporting to PDF or PNG file, Chinese characters may be garbled (there will be no Chinese characters problem in rendering).

To resolve Chinese garbled characters, you can set the fontName property.

digraph { graph [fontname="Microsoft Yahei"]; edge [fontname="Microsoft Yahei"]; node [fontname="Microsoft Yahei"]; A [label = "dotted", style = "dotted"]Copy the code
MingLiU: MingLiU standard regular script: DFKai-SB black script: SimHei: SimSun New song: FangSong Regular script: KaiTi song _GB2312: FangSong_GB2312 Regular script _GB2312: KaiTi_GB2312 Microsoft is in black: Microsoft JhengHei YaHeiCopy the code

4, pit

4.1 NULL covering

In order to display NULL nodes when drawing a tree structure, NULL nodes need to be used for complement, otherwise the tree will be pulled into a chain.

4.2 named

Two nodes with the same name are considered to be the same node. Pay attention to the node name, especially the node with the NULL complement.