ditaa 字符画转图

简介 / Introduction

ditaa 是一种”用字符画描述图形”的记法：你在源码里手写 +---+ 边框和 | 竖线，后端再把它渲染成真正的图形。PlantUML 内置了 ditaa 引擎，因此可以直接用 @startditaa 把字符画变成图片，适合快速画线框草图或者在文档里表达一个”手绘感”很强的布局。Mermaid 没有字符画语法，但可以用 flowchart 表达完全相同的服务拓扑。

PlantUML 版

PlantUML 用 @startditaa / @endditaa 包住一段 ditaa 源码。箭头用 +------>，竖直箭头用 v，| 画竖线，+---+ 画边框：

1
2
3
4
5
6
7
8
9
10
11
12
13

@startditaa
   +----------+       +-------------+
   |   Web    |       |             |
   |  Client  |       |   Gateway   |
   |          +------>+             |
   +----------+       |             |
                      +-------------+
                        |         |
                        v         v
                  +---------+ +---------+
                  |  Auth   | | Orders |
                  +---------+ +---------+
@endditaa

字符画的空格必须严格对齐，箭头的落点要正好顶在目标框的边框上，否则渲染出来的连线会歪。

Mermaid 版

Mermaid 用 flowchart 表达同样的结构，节点和连线由语法显式声明，不依赖字符对齐：

1
2
3
4

flowchart TD
  Web["Web Client"] --> Gateway["Gateway"]
  Gateway --> Auth["Auth"]
  Gateway --> Orders["Orders"]

对比 / Side-by-side

小结 / Wrap-up

ditaa 的价值在于”所见即所得”的字符草图——画线框原型时非常顺手，代价是对空格极其敏感。想要可维护、可自动布局的拓扑图，还是用 Mermaid flowchart 更省心；两者也可以混用，先用字符画定稿布局，再翻译成 Mermaid 交给团队协作。