Mermaid入门

流程图

举例

---
title: Node
---
flowchart LR
    i1(你好)
    i2[混合]
    i3([This ❤ Unicode])
    i4[["`**markdown**`"]]
    i5[("`Line1
    Line2
    `")]
    A@{ shape: manual-file, label: "File Handling"}
    i1-->i2
    i1-.->|你好|i4
    subgraph one
    a1-->a2
    end

注释

以%%开始的文字会被忽略

大体格式

---
title: 我是标题 %% title处写标题
---
flowchart TB %% flowchart代表流程图, TB代表(箭头)方向top->bottom类似的BT,RL,LR
    i1[文本] %% 创建一个带有文本的节点,它的编号是i1
    i2[文本] %% 创建一个带有文本的节点,它的编号是i2
    i1 --> i2 %% i1 指向 i2 
    i3["`markdown语法`"] %% 被"``"包裹可以写markdown语法

节点形状

[] 方形
() 圆边
([]) 体育场形
[[]] 子程序形
[()] 圆柱体形
(()) 圆形
>] 特殊形状
{} 菱形
{{}} 六边形
[//] 平行四边形
[\\] 平行四边形
[/\] 梯形
[\/] 梯形
((())) 双圈

扩展节点形状

• 格式: i1@{shape: rect, label: "文本"}
• 具体见此处

自定义节点

• 格式: i1@{icon: "fa:user", form: "square", label: "文本"}
  

箭头形状

• i1-->i2
• i1-->|text|i2 带文字
• i1-.->i2 虚线
• i1-.->|text|i2 虚线带文字
• i1==>i2 加粗
• i1<-->i2 双向箭头
• i1--o i2
• i1--x i2

Tips: —越多箭头越长, 可以在一行操作多个节点: i1-->i2 & i1-->i3

子图

subgraph id [title]
direction TB
...
end

• 子图也可以互相指向

对fontawesome的支持**

• 例如: i1["fa:fa-twitter "]

Warning:
单词“end”，请将整个单词或任意字母大写(例如“End”或“END”)全部以小写字母输入“end”将破坏流程图.
如果使用字母“o”或“x”作为连接流程图节点的首字母，请在字母前添加空格或将字母大写（例如，“dev— ops”、“dev—Ops”）.
输入“A—oB”将创建一个圆形边缘.输入“A—xB”将创建一个十字边

思维导图

举例

mindmap
    ROOT[根]
        A[分支1]
            B[分支1.1]
            ::icon(fa fa-book)
            C[分支1.2]
        a[分支2]
            b[分支2.1]
            c[分支2.2]

作者认为结合代码和图像就可以看清楚结构了