VS Code画思维导图：Graphviz Markdown Preview

简介

Graphviz是一种思维导图格式，其文件后缀是.dot。VS code中既有专门针对.dot的插件，也有嵌入Markdown的Graphviz插件，从我个人的使用频次来说，后者更加常用，有了Graphviz Markdown Preview，就可以在VS Code中绘制思维导图了。

在插件栏中下载安装之后，即可在markdown文件中使用，如图所示

结合示例可知，在Markdown中通过代码片来定义一个思维导图，并且指明代码片的类型为graphviz。在代码片内部，最外层说明图的类型和名称，graph表示无向图，FF可以为任意名字。

花括号内，进入具体的图形设置。rankdir为思维导图方向，LR表示从左到右；TD表示从上到下。size表示生成导图的尺寸。

Graphviz由节点组成，节点之间用线连接，节点属性则在方括号内部声明。如果节点名字不包含空格，节点内容会默认为节点名字，若想进一步设置，可指明节点中的label属性。如果一个节点同时连接多个节点，则多个节点用花括号聚集。

在所有节点之前的node节点，并没有体现在图像中，其存在的意义是规范整个导图的默认属性。

其源码如下

graph FF{
    rankdir=LR;
    size=4
    node[shape=record style=filled]
    vscode--{IDE 编程效率 外观}
    IDE--Julia
    编程效率--{Codeium Codelf}
    外观--{主题 background Power_Mode[label="Power Mode"]}
    主题--{颜色主题 图标主题}
    title[shape=egg label="VS Code插件" style=wedged]
}

常见属性

在上述代码中，主要涉及到shape、style等属性，其中shape即节点形状，更多可选形状可参考graphviz shapes。

其他常用的属性如下表所示，

节点属性	默认值	说明/可选值
label	节点名	节点内容
color	black	边框颜色
fontcolor	black	字体颜色
fillcolor	无	填充色
fontsize	14	字体尺寸
shape	椭圆	record, box, ellipse, circle, diamond plaintext, point, triangle, invtriangle…
style	bold	bold, dashed, dotted, filled
image	无	背景图片地址

graphviz支持设置全局属性，在所有节点之前，声明一个node节点，那么这个节点中设置的参数就是默认节点参数。此外，其他常用的全局属性如下

图属性	备注
bgcolor	背景色
fontcolor	字体颜色，默认black
fontname	字体，默认Times-Roman
fontsize	字体尺寸，默认14
rank	子图等级限制：same, min, max, sink
rankdir	排序方向，可选LR, TB
compound	false

除了节点之外，连接线也有其属性，也通过方括号进行设置，与点的区别如下，其中a--b用于设置线，c--d用于设置点

a--b[label="线"]
c--{d[label="点"]}

常用的线属性如下，其中箭头和箭尾的可选值可参考：箭头箭尾。

边属性	默认值	备注：可选值
label		描述关系
color	black	箭头颜色
fontcolor	black	关系文字颜色
dir	forward	forward, back, both, none
arrowhead	normal	箭头
arrowtail	normal	箭尾
arrowsize	1.0	箭头尺寸

聚集子图

在Graphviz图中，每个节点都有特定的层级，如果不加说明，那么就逐级递减。通过subgraph可以将多个节点捆绑到一起。示例如下

代码如下

digraph show{
    rankdir = LR;
size=5
node[shape=record color=gray]
A->{B C}
C->D
subgraph cluster_a{B D}
}

节点结构

对于Record类型的节点来说，可以通过花括号更有层次地填充内容，效果如下

代码为

digraph show{
node[shape=record color=gray]
  test[label="{A|{B|{C|D}|{E|F|G}}}"]
}