❇️ 点此文章参考 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==
graph TD;
A(这是一张使用Mermaid绘制的流程图)-->B([它的基础语法非常简单 易上手]);
A-->C([许多编辑器和插件也支持Mermaid]);
B-->D;
C-->D{{今天我们着重讨论最常用的流程图}};
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
sequenceDiagram
participant 张三
participant 李四
张三->>李四: Hi 张三
李四->>张三: Hi 李四
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
咱学 Java的不陌生吧:cat:UML图
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
依赖英文,展示还不支持中文(或许是我没发现啊)
gitGraph:
options
{
"nodeSpacing": 150,
"nodeRadius": 10
}
end
commit
branch newbranch
checkout newbranch
commit
commit
checkout master
commit
commit
merge newbranch
依赖英文,展示还不支持中文(或许是我没发现啊)
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
journey
title 我的一天的工作日安排
section 上班
泡茶: 5: 我
上楼: 3: 我
学习(开始卷): 1: 我, 猫
section 回家
下楼: 5: 我
躺平(好啊): 5: 我
Mermaid无所不能,实时渲染让我们的操作更为方便
首先我们先来了解流程图基础语法和布局结构
TB - 从上到下
TD - 从上到下
BT - 从下到上
RL - 从右到左
LR - 从左到右
构建流程图的基础语法:
```mermaid
graph TD
A[这是一个从上至下的流程图] --> B(现在咱就是演示一下)
```
graph TD
A[这是一个从上至下的流程图] --> B(现在咱就是演示一下)
明白了基础语法的构建,我们就可以开始选择形状了
graph LR
id1(这个是圆角矩形)
注意:这里的
graph
也可以替换为flowchart
,但是考虑到图形的兼容性,我更推荐使用 ==graph==
graph LR
id1(这个是圆角矩形)
graph LR
id1([这个也是特殊的圆角矩形])
graph LR
id1([这个也是特殊的圆角矩形])
graph LR
id1[[这个是子程序结点]]
graph LR
id1[[这个是子程序结点]]
graph LR
id1[(数据库)]
graph LR
id1[(数据库)]
graph LR
id1((这个是圆形结点))
graph LR
id1((这个是圆形结点))
graph LR
id1>This is the text in the box]
graph LR
id1>这个是旗帜结点]
graph LR
id1{这个是菱形结点}
graph LR
id1{这个是菱形结点}
graph LR
id1{{六边形结点}}
graph LR
id1{{六边形结点}}
graph LR
id1[/平行四边形右倾斜/]
id2[\平行四边形左倾斜\]
id3[/上底梯形\]
id4[\下底梯形/]
graph LR
id1[/平行四边形右倾斜/]
id2[\平行四边形左倾斜\]
id3[/上底梯形\]
id4[\下底梯形/]
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];
==总结==:
长度 | 1 | 2 | 3 |
---|---|---|---|
默认(不带方向箭头) | --- |
---- |
----- |
默认(带方向箭头) | --> |
---> |
----> |
加粗无向实线 | === |
==== |
===== |
加粗有向实线 | ==> |
===> |
====> |
无向虚线 | -.- |
-..- |
-...- |
有向虚线 | -.-> |
-..-> |
-...-> |
下一篇文章将会提到==破坏 Mermaid语法强行显示转义字符==、==显示流程图的子图==、==在结点中嵌入链接==、==使用css语法修改结点样式==