Mermaid

PlantUML 是最近才了解到的, 实际上这个东西存在已经很多年了. 之前有用过 mermaid, 但是 mermaid 的 flowchart 写起来很蛋疼. PlantUML 的 activity diagram 对多行文本和 note 支持更好, 同时不用写太多的箭头和 A, B, C 这种标记. mermaid 要支持多行文本, 当前只能用 `foo1<br/>foo2<br/>foo3` 的方式. 另一方面, A, B, C 这种标记, 当你突然想在中间插入一个的时候, 就会很蛋疼. ## 添加到 Hugo 模板 这里我并没有采用 Front Matter 参数的方式来确定是否加载 plantuml-encoder js 文件, 因此老灯觉得这样太麻烦. ...

首先，看下效果，就是下面这样（RSS 订阅用户可能看不到效果，请点击查看原文)： ``` {{< mermaid >}} sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->John: Fight against hypochondria end Note right of John: Rational thoughts prevail... John-->Alice: Great! ...