## 示意图利器 D2

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

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



!img





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

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



!img





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

> $ d2 example.d2

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



!img





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

> A



!img





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

> A: 甲



!img





接着，添加一个节点。

> A: 甲
> B: 乙



!img





把它们连起来。

> A: 甲
> B: 乙
> A -> B



!img





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

箭头上还能添加文字。

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



!img





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

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



!img





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

> 甲 -> 丙 <- 乙: 连接



!img





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



!img





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

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



!img





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

> A: 甲
> A.shape: circle



!img





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

> A: 甲
> A.shape: cloud



!img





线条颜色也可以改。

> A: 甲
> A.style.stroke: red



!img

#tools