Mermaid 基础语法汇总

这种基于文字的图标，最大的优势在于它的制作的速度、与修改的便捷性。mermaid 能够非常容易的维护和修改这些图表。这样你就可以及时的更新你的文档，让他们尽可能的接近你的代码。 Mermaid 是一种基于 Javascript 的绘图工具，使用类似于 Markdown 的语法，使用户可以方便快捷地通过代码创建图表。

——Mermaid 官方文档

基本信息

mermaid 支持下列类型的图示：

• Flowchart 流程图
• Sequence diagram 时序图
• Class diagram 类图
• State diagram 状态图
• Entity relationship diagram ER 图（实体关联图）
• User journey diagram 客户旅程图
• Gantt 甘特图
• Pie chart 饼图

关于这些图表是什么可以查看图表笔记

使用方法

可以使用在线编辑器

Typora 等内置了 mermaid 插件，使用 markdown 的代码块符号：三个反引号，再输入 mermaid，即可开启一块 mermaid 的输入区域。

graph TD
  XXX --> YYY

hexo butterfly 主题的使用方法是用 {% mermaid %}` 和 `{% endmermaid %} 围起来

配置

主题设置：主要有 default、forest、dark、neutral、null 等选项。

在代码中修改主题配置：

%%{init: {'theme':'forest'}}%%
  graph LR
    a --> b

注释：%% 注释一行

流程图 Flowcharts

所有流程图均由节点，几何形状和边缘，箭头或线条组成。mermaid 代码定义了制作这些节点和边缘并进行交互的方式。它还可以适应不同的箭头类型，多向箭头以及与子图之间的链接。

不要将 end 作为流程图节点键入。将所有或任何一个字母大写，以防止流程图中断，即 End 或 END。

节点 node

默认

graph LR
    id

带有文本的节点

graph LR
    id1[节点的文本]

特殊字符

可将文本放在 "" 中

节点形状	代码	节点形状	代码
圆角矩形	( )	体育场形	([ ])
子程序形状	[[ ]]	圆柱状	[( )]
圆形	(( ))	右向旗帜状	> ]
菱形	{ }	平行四边形	[/ /]
梯形	[/ \] 或 [\ /]

图形 graph

流程图方向

从上到下：

graph TD
    开始 --> 停止

以下语句声明可能的流程图方向为：

语法	方向
TD/TB	top-down/top to bottom 从上至下
BT	bottom to top 从下到上
RL	right to left 从右到左
LR	left to right 从左到右

节点之间的链接

链接类型	符号
带箭头	-->
不带箭头	---
虚线	-.->
粗线	==>

多个节点链接

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

使用 flowchart

新箭头类型：

flowchart LR
A --o B
B --x C

多向箭头

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

子图 Subgraphs

基础语法

subgraph 标题
    graph 定义
end

实例：

graph TB
    c1-->a2
    subgraph graph1 [图一] %% 可为子图设置一个显式 ID
    a1-->a2
    end
    subgraph 图二
    b1-->b2
    end
    subgraph 图三
    c1-->c2
    end

使用 graphtype 流程图，也可以如下图所示在子图之间设置边线。

flowchart TB
    c1-->a2
    subgraph 图一
    a1-->a2
    end
    subgraph 图二
    b1-->b2
    end
    subgraph 图三
    c1-->c2
    end
    图一 --> 图二
    图三 --> 图二
    图二 --> c2

支持 Font Awesome

graph TD
B[fa:fa-home]
B-->C[fa:fa-ban]
B-->D(fa:fa-spinner)
B-->E(fa:fa-camera-retro)

支持超链接

flowchart TD
A[fa:fa-home 首页]-->B & C & D
B[fa:fa-archive 时间轴]
C[fa:fa-tags 标签]
D[fa:fa-folder-open 分类]

click A "/"
click B "/archives/"
click C "/tags/"

时序图 Sequence diagrams

mermaid 基础时序图语法如下所示：

sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later!

参与者 participant 和别名

指定参与者的出现顺序，参与者可以具有方便的标识符和描述性标签。

sequenceDiagram
    participant J as John
    participant A as Alice
    A->>J: Hello John, how are you?
    J->>A: Great!

消息

基础语法：[Actor][Arrow][Actor]:Message text

类型	描述	类型	描述
->	实线无箭头	–>	虚线无箭头
->>	实线带箭头	–>>	虚线带箭头
-x	实线末端带有叉号	–x	虚线末端带有叉字
-)	实线末端带有空心箭头	–)	虚线末端带有空心箭头

激活和停用参与者

消息箭头后面添加 +/- 后缀，对于同一参与者可以堆叠激活

sequenceDiagram
    Alice->>+John: Hello John, how are you?
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    John-->>-Alice: I feel great!

注解

基本语法：Note [ right of | left of | over ] [Actor]

sequenceDiagram
    participant John
    Note right of John: Text in note

跨越两个参与者的注解：

sequenceDiagram
    Alice->John: Hello John, how are you?
    Note over Alice,John: 一个典型的交互

循环 Loop

基本语法：

loop Loop text
语句
end

例如

sequenceDiagram
    Alice->John: Hello John, how are you?
    loop Every minute
        John-->Alice: Great!
    end

抉择 Alt

基本语法：

alt 描述文本
语句 1
else
语句 2
end
opt 描述文本 %% 可选序列
语句 3
end

sequenceDiagram
    Alice->>Bob: Hello Bob, how are you?
    alt 生病了
        Bob->>Alice: Not so good :(
    else 身体好
        Bob->>Alice: Feeling fresh like a daisy
    end
    opt 额外回复
        Bob->>Alice: Thanks for asking
    end

并行 Par

基本语法：

par [Action 1]
... statements ...
and [Action 2]
... statements ...
and [Action N]
... statements ...
end

sequenceDiagram
    par Alice to Bob
        Alice->>Bob: Hello guys!
    and Alice to John
        Alice->>John: Hello guys!
    end
    Bob-->>Alice: Hi Alice!
    John-->>Alice: Hi Alice!

背景高亮

颜色是使用 rgb 和 rgba 语法定义的：

rect rgb(0, 255, 0)
... content ...
end

rect rgba(0, 0, 255, .1)
... content ...
end

sequenceDiagram
    participant Alice
    participant John

    rect rgb(191, 223, 255)
    note right of Alice: Alice calls John.
    Alice->>+John: Hello John, how are you?
    rect rgb(200, 150, 255)
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    end
    John-->>-Alice: I feel great!
    end
    Alice ->>+ John: Did you want to go to the game tonight?
    John -->>- Alice: Yeah! See you there.

状态图 State diagrams

状态图是计算机科学和相关领域中用来描述系统行为的一种图，所描述的系统由有限个状态组成

mermaid 可以渲染状态图。该语法尝试与 plantUml 中使用的语法兼容，因为这将使用户更容易在 mermaid 和 plantUml 之间共享图。PlantUML 是一个开源项目，支持绘制 UML 图。

具体语法如下：

stateDiagram-v2
    [*] --> 静止
    静止 --> [*]

    静止 --> 移动
    移动 --> 静止
    移动 --> 崩溃
    崩溃 --> [*]

状态

用描述定义状态：

stateDiagram-v2
    s2 : 状态描述

过渡

可以向过渡添加文本：

stateDiagram-v2
    s1 --> s2: 一个转移

开始和结束

有两种特殊状态指示图的开始和停止。这些是用 [*] 编写的，转换到它的方向将其定义为开始或停止状态。

stateDiagram-v2
    [*] --> s1
    s1 --> [*]

复合状态

基本语法：

stateDiagram-v2
    [*] --> First
    state First {
        [*] --> second
        second --> [*]
    }

复合状态之间可以有过渡：

stateDiagram-v2
    [*] --> First
    First --> Second
    First --> Third

    state First {
        [*] --> fir
        fir --> [*]
    }
    state Second {
        [*] --> sec
        sec --> [*]
    }
    state Third {
        [*] --> thi
        thi --> [*]
    }

fork

stateDiagram-v2
 state fork_state <<fork>>
   [*] --> fork_state
   fork_state --> State2
   fork_state --> State3

   state join_state <<join>>
   State2 --> join_state
   State3 --> join_state
   join_state --> State4
   State4 --> [*]

注解

可以选择将注解放在节点的右侧或左侧

stateDiagram-v2
    State1: The state with a note
    note right of State1
        Important information! You can write
        notes.
    end note
    State1 --> State2
    note left of State2 : This is the note to the left.

用户历程图 User Journey Diagram

用户历程高度详细地描述了不同用户在系统，应用程序或网站内为完成特定任务所采取的步骤。该技术显示了当前（按原样）的用户工作流程，并揭示了将来的工作流程需要改进的地方。这个图 mermaid 提供的 api 不多，主要例子如下：

journey
    title My working day
    section 去工作
      %% 任务语法为Task name: <score>: <comma separated list of actors>
      %% 喝茶：事件
      %% 5：分数评价，一般 0 到 5，分数越高越好
      %% 我：参与者
      喝茶: 5: 我
      下楼: 3: 我
      工作: 1: 我, 猫
    section 回家
      下楼: 2: 我
      坐下: 4: 我

甘特图 Gantt diagrams

基础语法：

task: state, name，start time, end time
或 task: state, name，time

对于 state 值，主要有以下几种状态。

• done 完成
• active 活跃
• crit 关键
• 空 未来任务

gantt
    %% 设定时间格式
    dateFormat MMM-DD
    %% 标题
    title       甘特图名称
    %% excludes`接受YYYY-MM-DD格式的特定日期、一周中的几天（“星期日”）或“周末”，但不接受“工作日”一词
    excludes    weekends

    section 类别 A
    已经完成的任务           :done,    des1, 2014-01-06,2014-01-08
    进行中的任务             :active,  des2, 2014-01-09, 3d
    未来的任务               :         des3, after des2, 5d

    section 关键任务
    完成的关键任务        :crit, done, 2014-01-06,24h
    进行中的关键任务       :crit, active, 3d
    将来的关键任务        :crit, 5d

饼图 Pie

pie title 被志愿者领养的宠物
"狗" : 386
"猫" : 85
"老鼠" : 15