Mermaid和PlantUML

这两款都是用于生成各种图表的工具集，下面是官网介绍

• 关于Mermaid

Mermaid允许您使用文本和代码创建图表和可视化效果。它是一种基于 JavaScript的图表和图表工具，可呈现受 Markdown启发的文本定义以动态创建和修改图表。如果你熟悉 Markdown，那么学习 Mermaid的语法应该没有问题。

• 关于PlantUML

PlantUML是一个多功能组件，可快速、直接地创建图表。用户可以使用简单直观的语言起草各种图表。

Mermaid基本语法结构

图表类型

flowchart - 流程图

警告

如果在流程图节点中使用单词“end”，请将整个单词或任何字母大写（例如，“End”或“END”），或应用此解决方法。在所有小写字母中键入“end”将破坏流程图。

警告

如果在连接的流程图节点中使用字母“o”或“x”作为第一个字母，请在字母前添加一个空格或将字母大写（例如，“dev--- ops”、“dev---ops”）。

键入“A---oB”将创建一个圆形边。

键入“A---xB”将创建交叉边。

节点

基本

---
title: 基本节点
---
flowchart LR
    Id

带有文本的节点

---
title: 带有文本的节点
---
flowchart LR
    id[这是框中的文本]

Unicode 文本

用"将unicode文本括起来。

---
title: 带有unicode文本的节点
---
flowchart LR
    id["这个 ❤ Unicode"]

Markdown 格式

使用双引号和反引号这样“'text'” 将 Markdown 文本括起来。

---
title: 带有Markdown格式文本的节点
---
%%{init: {"flowchart": {"htmlLabels": false}} }%%
flowchart LR
    markdown["`This **is** _Markdown_`"]
    newLines["`Line1
    Line 2
    Line 3`"]
    markdown --> newLines

方向

从上至下|从下至上

此语句声明流程图的方向。

TB 或BT声明流程图从上至下或从下至上。

Top to Bottorm

Bottorm to Top

flowchart TB
    Start --> Stop

从左至右|从右至左

LR或RL声明流程图从左至右或从右至左。

Left to Right

Right to Left

flowchart LR
    Start --> Stop

节点形状

具有圆边的节点

flowchart LR
    id1(This is the text in the box)

体育场形节点

flowchart LR
    id1([This is the text in the box])

子例程形状中的节点

flowchart LR
    id1[[This is the text in the box]]

圆柱形的节点

flowchart LR
    id1[(Database)]

非对称形状的节点

flowchart LR
    id1>This is the text in the box]

菱形节点

flowchart LR
    id1{This is the text in the box}

六边形节点

flowchart LR
    id1{{This is the text in the box}}

平行四边形

flowchart TD
    id1[/This is the text in the box/]

反向平行四边形

flowchart TD
    id1[\This is the text in the box\]

梯形

flowchart TD
    A[/Christmas\]

反向梯形

flowchart TD
    B[\Go shopping/]

双圆(环)

flowchart TD
    id1(((This is the text in the circle)))

节点之间的链接

带箭头的链接

flowchart LR
    A-->B

打开的链接

flowchart LR
    A --- B

链接上的文字

flowchart LR
    A-- This is the text! ---B

或者

flowchart LR
    A---|This is the text|B

带有箭头和文本的链接

flowchart LR
    A-- text -->B

或者

flowchart LR
    A-->|text|B

虚线链接

flowchart LR
   A-.->B;

带文本的虚线链接

flowchart LR
   A-. text .-> B

厚链接

flowchart LR
   A ==> B

带有文本的粗链接

flowchart LR
   A == text ==> B

看不见的链接

在某些情况下，当您想要更改节点的默认位置时，这可能是一个有用的工具。

flowchart LR
    A ~~~ B

多个链接

• 可以在同一行中声明多个链接，如下所示：

flowchart LR
   A -- text --> B -- text2 --> C

• 在同一行中声明多个节点链接

flowchart LR
   a --> b & c--> d

• 可以以一种非常富有表现力的方式描述依赖关系。

flowchart TB
    A & B--> C & D

新的箭头类型

圆边

flowchart LR
    A --o B

交叉边缘

flowchart LR
    A --x B

多方向箭头

可以使用多向箭头

flowchart LR
    A o--o B
    B <--> C
    C x--x D

链接的最小长度

流程图中的每个节点最终都会根据其链接到的节点分配给呈现图中的一个等级，即垂直或水平级别（取决于流程图方向）。默认情况下，链接可以跨越任意数量的等级，但您可以通过在链接定义中添加额外的破折号来要求任何链接比其他链接更长。

注意为了适应其他请求，渲染引擎可能仍会使链接长于请求的等级数。

在以下示例中，在从节点 B 到节点 E 的链接中添加了两个额外的破折号，以便它比常规链接多跨越两个行：

flowchart TD
    A[Start] --> B{Is it?}
    B -->|Yes| C[OK]
    C --> D[Rethink]
    D --> B
    B ---->|No| E[End]

当链接标签写在链接中间时，必须在链接的右侧添加额外的破折号。以下示例与上一个示例等效：

flowchart TD
    A[Start] --> B{Is it?}
    B -- Yes --> C[OK]
    C --> D[Rethink]
    D --> B
    B -- No ----> E[End]

对于虚线或粗链接，要添加的字符是等号或点，如下表所示：

破坏语法的特殊字符

可以将文本放在引号内，以呈现更麻烦的字符。如下例所示：

flowchart LR
    id1["This is the (text) in the box"]

用于转义字符的实体代码

可以使用此处示例的语法对字符进行转义。

    flowchart LR
        A["A double quote:#quot;"] --> B["A dec char:#9829;"]

给出的数字以 10 为基数，因此可以编码为 。还支持使用 HTML 字符名称。##35;

子图

subgraph title
    graph definition
end

下面是一个例子：

flowchart TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end

您还可以为子图设置显式 ID。

flowchart TB
    c1-->a2
    subgraph ide1 [one]
    a1-->a2
    end

待续...