Dhole 与 Mermaid
Mermaid 证明了以文本编写示意图是值得的,Dhole 也从中借鉴良多:它所涵盖的种类,以及它最好的那些想法。不过,与 Mermaid 相像并不是 Dhole 的目标,Mermaid 文本也不是 Dhole 文本。本页写给熟悉 Mermaid、想知道哪些内容可以沿用的人。
Dhole 借鉴了什么
- 种类。 流程图、时序图、状态图、类图和实体图、思维导图、时间线、甘特图,以及饼图、XY 图、象限图和桑基图。
- 事物在首次命名处创建,以及用
-->表示虚线箭头。 - 用
*表示状态机的开始和结束,以及复合状态。 - 将时序图的块绘制为框 ——
loop、alt/else、opt、par/and、critical、break。 - 在其他任务之后开始的甘特图任务,以及里程碑。
Dhole 能读取的 Mermaid 写法
只要某种 Mermaid 写法不会被误解,Dhole 就按照 Mermaid 的含义来读取它:
| Mermaid | Dhole 将其读作 |
|---|---|
graph TD, flowchart LR |
采用该方向的流程图 |
stateDiagram-v2, [*] |
状态图,及其开始或结束 |
时序图中单独一行的 autonumber |
numbers: on |
alt |
if |
饼图中的 "Dogs" : 30 |
一个扇区 |
sankey-beta,以及 Coal, Power plant, 25 |
桑基图,以及一条流 |
quadrant-1 至 quadrant-4 |
各象限,按 Mermaid 的编号方式编号 |
实体图会把 Mermaid 用字符画出的鸦脚符号读作它们所表示的计数:||--o{、|o--|{、}|..|| 等。
Dhole 在哪些地方写法不同,以及原因
- 所有种类只有一种书写标签的方式。 Mermaid 根据种类不同,有四种书写箭头标签的方式 ——
A -->|yes| B、A -- yes --> B、A ->> B: yes、A : yes。Dhole 只有一种写法:写在行尾的冒号之后,A --> B: yes。写在竖线之间的标签会被指出,并给出 Dhole 的写法。 - 用单词表示形状和颜色。 Mermaid 用括号来画形状 ——
[(db)]、{{hex}}、[/io/]、((circle))—— 这些需要专门学习,回头阅读也很困难。Dhole 直接说出形状的名称:[database]、[hexagon]、[io]、[circle]。颜色也以同样方式命名,[green],并且使用主题的颜色而非 CSS。 - 缩进在任何地方都表示嵌套。 Mermaid 用
end或花括号来结束子图、块、类的主体和复合状态。Dhole 全部用缩进来结束,正如 Mermaid 自己的思维导图已经做的那样。 - 问题会说明位置和修正方法。 Mermaid 遇到第一个错误就会停止,并给出解析器的消息。Dhole 会继续读下去,尽可能绘制,并用文字说明每个问题及其所在的行和列。
- 处处都是同样的图片。 同样的文本在任何机器上都画出同样的图片,保存在文档中或由测试检查的图片都需要这一点。
Dhole 省略了什么,以及原因
- 样式语言 ——
classDef、style、linkStyle、%%{init}%%和 CSS。它们让示意图的外观变成了第一个程序内部的第二个程序。Dhole 示意图的外观就是它的主题,文本只说明其中事物的含义。 - 标签中的 HTML 和 Markdown,以及点击处理程序。 图片不是网页,Dhole 的每种输出 —— PNG、SVG、PDF、幻灯片 —— 都以同样的方式绘制同样的文本。
- Git 图、C4、需求图、用户旅程图、块图、数据包图和架构图,以及 ZenUML。 它们要么是有更好的专用工具的小众表示法,要么是换了一套词汇的流程图,而且每一种都会增加只在一个种类中有效的词。
- Mermaid 仅用于流程图的箭头 ——
-.->、--o、--x、~~~,以及用额外短横线加长的连接。Dhole 只有一种虚线箭头-->,以及一种无箭头的线--;其他写法会被指出,并列出流程图支持的箭头。
Dhole 增加了什么
- 表格、看板和雷达图,源自最早的 Dhole。
- 在一段文本中编写多张示意图,并排绘制。
- 甘特图可以跳过周末和节假日,并在相互等待的任务之间画出连线。
- 可以向下展开为组织结构图的思维导图。
- 用一句话说明每张图片展示的内容,为看不见图片的人提供帮助。
- 绘图框架的输出和主题 —— 以及作为主题的编辑器自身调色板。
迁移一张 Mermaid 流程图
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
变为:
flowchart
direction: down
A: Christmas
B: Go shopping [round]
C: Let me think [diamond]
A -> B: Get money
B -> C
C -> D: One
C -> E: Two
D: Laptop
E: iPhone
短名称保持不变,每个都在单独一行上指定其标签;形状被说出名称;标签写在冒号之后;箭头使用 ->,即 Dhole 的实线箭头,因为 Mermaid 的 --> 是实线箭头,而 Dhole 的这个箭头是虚线箭头。