Mermaid

点此文章参考 Mermaid 官方文档

⭐什么是 Mermaid?

先别着急，我们通过一组图片展示 Mermaid 的魅力

graph TD
	A([什么是Mermaid?]) ==> B(它是一种基于Javascript的图表和图表工具) ==> a(图形结构)
	style A fill:#00d26a, stroke: #333,stroke-width: 2px
	style B fill:#f9a, stroke: #333, stroke-width: 2px;

	a --> C(流程图) & D(时序图) & E(类图) & F(状态图) & G(实体关系图) & H(用户日记) & I(甘特图) & K(饼状图) & L(需求图) & M(其他例子...)

	style a fill:#ff9f2e, stroke: #333, stroke-width: 2px, stroke-dasharray: 5 5;
	style C fill:#ff9f2e, stroke: #333, stroke-width: 2px;
	style D fill:#ff9f2e, stroke: #333, stroke-width: 2px;
	style E fill:#ff9f2e, stroke: #333, stroke-width: 2px;
	style F fill:#ff9f2e, stroke: #333, stroke-width: 2px;
	style G fill:#ff9f2e, stroke: #333, stroke-width: 2px;
	style H fill:#ff9f2e, stroke: #333, stroke-width: 2px;
	style I fill:#ff9f2e, stroke: #333, stroke-width: 2px;
	style K fill:#ff9f2e, stroke: #333, stroke-width: 2px;
	style L fill:#ff9f2e, stroke: #333, stroke-width: 2px;
	style M fill:#ff9f2e, stroke: #333, stroke-width: 2px;

第一次接触时我还在感叹，画图工具的精度也比不上 Mermaid

1. 流程图

graph TD
    A(IT资产配置管理)-->B([技术人员现场值守]);
    B-->C([日常运维/响应服务请求]);
    B-->D([故障事件响应])-->E([二线故障响应])-->F([原厂故障响应]);
    C-->G;
    F-->G{{事件管理}};
    G-->H{{可选:问题管理}};
    H-->I{{定期服务报告}};
    style A fill:#00d26a, stroke: #333,stroke-width: 2px
    style B fill:#25aff3, stroke: #333,stroke-width: 2px
    style C fill:#25aff3, stroke: #333,stroke-width: 2px
    style D fill:#ffc019, stroke: #333,stroke-width: 2px
    style E fill:#ffc019, stroke: #333,stroke-width: 2px
    style F fill:#ffc019, stroke: #333,stroke-width: 2px
    style G fill:#00d26a, stroke: #333,stroke-width: 2px
    style H fill:#00d26a, stroke: #333,stroke-width: 2px
    style I fill:#3298ff, stroke: #333,stroke-width: 2px

2. 时序图

sequenceDiagram
    participant 张三
    participant 李四
    张三->>李四: Hi 张三
    李四->>张三: Hi 李四

3. 甘特图

gantt
    dateFormat  YYYY-MM-DD
    title       甘特图名称
  
    section 类别A
    已经完成的任务    :         done,     des1,   2014-01-06,  2014-01-08
    进行中的任务      :         active,   des2,   2014-01-09,  3d
    未来的任务        :                   des3,   after des2,  5d

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

4. 类图

classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    Animal: +mate()
    class Duck{
      +String beakColor
      +swim()
      +quack()
    }
    class Fish{
      -int sizeInFeet
      -canEat()
    }
    class Zebra{
      +bool is_wild
      +run()
    }

classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label

5. Git 图（实验功能）

依赖英文，展示还不支持中文（或许是我没发现啊）

gitGraph:
options
{
    "nodeSpacing": 150,
    "nodeRadius": 10
}
end
commit
branch newbranch
checkout newbranch
commit
commit
checkout master
commit
commit
merge newbranch

6. 实体关系图（实验功能）

依赖英文，展示还不支持中文（或许是我没发现啊）

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

7. 个人旅行图

journey
    title 我的一天的工作日安排
    section 上班
      泡茶: 5: 我
      上楼: 3: 我
      学习(开始卷): 1: 我, 猫
    section 回家
      下楼: 5: 我
      躺平(好啊): 5: 我

Mermaid 无所不能，实时渲染让我们的操作更为方便

⭐基础语法-流程图 (graph/flowchart)

首先我们先来了解流程图基础语法和布局结构

TB - 从上到下
TD - 从上到下
BT - 从下到上
RL - 从右到左
LR - 从左到右

构建流程图的基础语法：

graph TD
	A[这是一个从上至下的流程图] --> B(现在咱就是演示一下)

graph TD
	A[这是一个从上至下的流程图] --> B(现在咱就是演示一下)

明白了基础语法的构建，我们就可以开始选择形状了

1. 结点形状

1.1 圆角矩形结点

graph LR
    id1(这个是圆角矩形)

注意：这里的 graph 也可以替换为 flowchart，但是考虑到图形的兼容性，我更推荐使用 ==graph==

graph LR
    id1(这个是圆角矩形)

1.2 跑道形结点

graph LR
    id1([这个也是特殊的圆角矩形])

graph LR
    id1([这个也是特殊的圆角矩形])

1.3 子程序形结点

graph LR
    id1[[这个是子程序结点]]

graph LR
    id1[[这个是子程序结点]]

1.4 圆柱形结点

graph LR
    id1[(数据库)]

graph LR
    id1[(数据库)]

1.5 圆形结点

graph LR
    id1((这个是圆形结点))

graph LR
    id1((这个是圆形结点))

1.6 旗帜结点

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

graph LR
    id1>这个是旗帜结点]

1.7 菱形结点

graph LR
    id1{这个是菱形结点}

graph LR
    id1{这个是菱形结点}

1.8 六边形结点

graph LR
    id1{{六边形结点}}

graph LR
    id1{{六边形结点}}

1.9 平行四边形和梯形

graph LR
	id1[/平行四边形右倾斜/]
	id2[\平行四边形左倾斜\]
	id3[/上底梯形\]
	id4[\下底梯形/]

graph LR
	id1[/平行四边形右倾斜/]
	id2[\平行四边形左倾斜\]
	id3[/上底梯形\]
	id4[\下底梯形/]

2. 连接线

graph TD
	A --> B
	C --- D
	a --文本--- b
	c ---|也可以这样|d
	E-->|也可以这样|F
	H-.->I;
	e-.文本.->f
	J ==> K
	j ==文本==> k

graph TD
	A --> B
	C --- D
	a --文本--- b
	c ---|也可以这样|d
	E-->|也可以这样|F
	H-.->I;
	e-.文本.->f
	J ==> K
	j ==文本==> k

graph TD
    A -- text --> B -- text2 --> C
    a --> b & c--> d
    e & f--> h & i
    也可以
    e --> h
    e --> i
    f --> h
    f --> i

graph TD
    A -- text --> B -- text2 --> C
    a --> b & c--> d
    e & f--> h & i

由于 graph 不兼容此语法，故使用 flowchart

flowchart TD
	A --o B
	B --x C

	D o--o E
    E <--> F
    F x--x G

flowchart TD
	A --o B
	B --x C

	D o--o E
    E <--> F
    F x--x G

至此，我们就完成了最基础的 Mermaid 语法学习

让我们尝试画画程序框图吧

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

总结