制作示意图的工具有很多。

我喜欢使用基于文本代码的作图工具，来绘制线框图，比如 Mermaid、Plantuml、Graphviz。

它们都能根据代码，生成图片，非常适合放入代码仓库，进行版本管理。

最近，我发现了一个更易用的同类工具 D2[1]，简单直观，功能强大，下面介绍给大家。

D2 可以命令行使用，也可以浏览器使用。假定你有一个图片代码文件example.d2，那么生成图片的命令如下。

$ d2 example.d2

大部分时候，我都通过浏览器使用它。它有一个线上生成器 play.d2lang.com[2]（下图），把代码贴进去，按下“compile”按钮，马上生成图片。

想要 A 节点（节点的名称为 A），直接输入 A 就可以了。

A

A 只是节点名称，如果要定制节点的内容，就像下面这样写。

A: 甲

接着，添加一个节点。

A: 甲
B: 乙

把它们连起来。

A: 甲
B: 乙
A -> B

连接可以用正箭头（->）、也可以用反箭头（<-），甚至双向箭头（<->）。如果不需要箭头，就直接连线（--）。

箭头上还能添加文字。

A: 甲
B: 乙
A -> B: 连接

节点之间可以有多根连线。

A: 甲
B: 乙
A -> B: 请求
A <- B: 响应

节点的连接也可以写在一行。

甲 -> 丙 <- 乙: 连接

阶段一 -> 阶段二 -> 阶段三 -> 阶段四
阶段四 -> 阶段一: 反馈

这些语法就够画出基本的线框图了，是不是挺简单。

D2 可以绘制非常复杂的图，更多语法参考文档[3]。

最后提一下，如果想修改节点形状，方框改成圆形，就像下面这样写。

A: 甲
A.shape: circle

形状甚至可以改成一朵云，表示云服务。

A: 甲
A.shape: cloud

线条颜色也可以改。

A: 甲
A.style.stroke: red

References

[1] D2: https://d2lang.com
[2] play.d2lang.com: https://play.d2lang.com/
[3] 文档: https://d2lang.com/tour/intro