制作示意图的工具有很多。
我喜欢使用基于文本代码的作图工具，来绘制线框图，比如 Mermaid、Plantuml、Graphviz。
它们都能根据代码，生成图片，非常适合放入代码仓库，进行版本管理。
最近，我发现了一个更易用的同类工具 D2，简单直观，功能强大，下面介绍给大家。
D2 可以命令行使用，也可以浏览器使用。假定你有一个图片代码文件example.d2，那么生成图片的命令如下。
$ d2 example.d2
大部分时候，我都通过浏览器使用它。它有一个线上生成器 play.d2lang.com（下图），把代码贴进去，按下"compile"按钮，马上生成图片。
想要 A 节点（节点的名称为 A），直接输入 A 就可以了。
A
A 只是节点名称，如果要定制节点的内容，就像下面这样写。
A: 甲
接着，添加一个节点。
A: 甲B: 乙
把它们连起来。
A: 甲B: 乙A -> B
连接可以用正箭头（->）、也可以用反箭头（<-），甚至双向箭头（<->）。如果不需要箭头，就直接连线（--）。
箭头上还能添加文字。
A: 甲B: 乙A -> B: 连接
节点之间可以有多根连线。
A: 甲B: 乙A -> B: 请求A <- B: 响应
节点的连接也可以写在一行。
甲 -> 丙 <- 乙: 连接
阶段一 -> 阶段二 -> 阶段三 -> 阶段四阶段四 -> 阶段一: 反馈
这些语法就够画出基本的线框图了，是不是挺简单。
D2 可以绘制非常复杂的图，更多语法参考文档。
最后提一下，如果想修改节点形状，方框改成圆形，就像下面这样写。
A: 甲A.shape: circle
形状甚至可以改成一朵云，表示云服务。
A: 甲A.shape: cloud
线条颜色也可以改。
A: 甲A.style.stroke: red
Comments