Markdown高级用法——mermaid
前言
Markdown 的原生语法不支持绘制图形，但通过 Mermaid 扩展，我们可以将一些格式化的文字渲染成我们需要的图形。常用的图形有 “流程图”、“时序图”、“类图”、“状态图”、“甘特图”、“饼图” 等。
Mermaid 是一个方便于 Markdown 文档撰写者通过文本方式生成图形的扩展工具。
流程图（FlowChart）
流程图（flow chart）是体现封闭系统运动状态的有效展示形式，可以让管理者、实现者清晰的认识系统运转流程，也可以直观的描述工作过程。
Mermaid 支持多种图表的方向
语法
graph 方向描述
图表中的其他语句...
方向描述
| 用词 | 含义 |
|---|---|
| TB | 从上到下 |
| BT | 从下到上 |
| RL | 从右到左 |
| LR | 从左到右 |
节点定义
即流程图中每个文本块，包括开始、结束、处理、判断等。Mermaid中每个节点都有一个id，以及节点的文字
| 表述 | 说明 |
|---|---|
| id[文字] | 矩形节点 |
| id(文字) | 圆形矩形节点 |
| id((文字)) | 圆形节点 |
| id>文字] | 右向旗帜状节点 |
| id{文字} | 菱形节点 |
| id[[文字]] | 双边框 |
| id[(文字)] | 圆柱 |
| id{{文字}} | 两边尖尖 |
需要注意的是，如果节点的文字中包含标点符号，需要时使用双引号包裹起来。
另外如果希望在文字中使用换行，请使用替换换行
节点间的连线
| 表述 | 说明 |
|---|---|
| > | 添加尾部箭头 |
| - | 不添加尾部箭头 |
| – | 单线 |
| –text– | 单线上加文字 |
| == | 粗线 |
| text | 粗线加文字 |
| -.- | 虚线 |
| -.text.- | 虚线加文字 |
子图表
使用以下语法添加子图表
subgraph 子图表名称
子图表中的描述语句...
end
---
title: Node
---
graph TB
id1(圆角矩形)--普通线-->id2[矩形]
id1--普通线-->a["包含标点符号，需要时用双引号包裹起来"]
a-->b[换行<br>换行]
subgraph 子图表
id2==粗线==>id3{菱形}
id3-.虚线.->id4>右向旗帜]
id3--无箭头---id5((圆形))
id5-->id6[[双边框]]
id4-->id7[(圆柱)]
id7-->id8{{尖尖}}
end
graph LR
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
graph TD
subgraph 用户
用户操作 --> A[前端应用]
end
subgraph 服务端
A --> B[负载均衡]
B -->|请求| C[服务1]
B -->|请求| D[服务2]
B -->|请求| E[服务3]
end
subgraph 数据存储
C -->|读写| F[数据库1]
D -->|读写| G[数据库2]
E -->|读写| H[数据库3]
end
subgraph 消息队列
C -->|异步通信| I[消息队列1]
D -->|异步通信| I
E -->|异步通信| I
end
语法
sequenceDiagram
[参与者1] [消息线] [参与者2]:消息体
...
例子
sequenceDiagram
张三->>李四: 吃了吗？
李四->>张三: 吃了
参与者
上例中的张三、李四都是参与者，上例中的语法是最简单的，也可以明显表明参与者有哪些。
如果特别想使用参与者符号而不是带有文本的矩形，则可以使用参与者语句来实现，如下所示
sequenceDiagram
actor 参与者1
actor 参与者2
参与者1->>参与者2: Hi 参与者2
参与者2->>参与者1: Hi 参与者1
消息线
| 类型 | 描述 |
|---|---|
-> | 无箭头的实线 |
--> | 无箭头的虚线 |
->> | 有箭头的实线 |
-->> | 有箭头的虚线 |
-x | 末端为叉的实线（表示异步） |
--x | 末端为叉的虚线（表示异步） |
处理中
在消息线末尾增加 + ，则消息接收者进入当前消息的“处理中”状态；
在消息线末尾增加 - ，则消息接收者离开当前消息的“处理中”状态。
或者使用以下语法直接说明某个参与者进入“处理中”状态
activate 参与者
sequenceDiagram
Alice->>John: Hello John, how are you?
activate John
John-->>Alice: Great!
deactivate John
标注
语法如下
Note 位置表述 参与者: 标注文字1
其中位置表述可以为
| 表述 | 含义 |
|---|---|
| right of | 右侧 |
| left of | 左侧 |
| over | 在当中，可以横跨多个参与者 |
循环
语法如下
loop 循环的条件
循环体描述语句
end
判断
alt 条件 1 描述
分支 1 描述语句
else 条件 2 描述 # else 分支可选
分支 2 描述语句
else ...
...
end
如果遇到可选的情况，即没有 else 分支的情况，使用如下语法：
opt 条件描述
分支描述语句
end
例子
sequenceDiagram
participant z as 张三(参与者)
participant l as 李四(参与者)
loop 日复一日（循环体）
z->>l: 吃了吗您呐？
l-->>z: 吃了，您呢？
activate z
Note left of z: 想了一下（标注）
Note over l,z: 跨越标注
alt 还没吃（判断）
z-xl: 还没呢，正准备回去吃
else 已经吃了
z-xl: 我也吃过了，哈哈
end
opt 大过年的
l-->z: 祝您新年好啊
end
end
sequenceDiagram
participant 参与者1
participant 参与者2
rect rgb(191, 223, 255)
note right of 参与者1: 参与者1 打电话给 参与者2.
参与者1->>+参与者2: 你好吗？
rect rgb(200, 150, 255)
参与者1->>+参与者2: 参与者2, 你能听到我的声音吗？
参与者2-->>-参与者1: 嗨，我能听到你的声音
end
参与者2-->>-参与者1: 我感觉很棒！
end
参与者1 ->>+ 参与者2: 你今晚想去看比赛吗？
参与者2 -->>- 参与者1: 是的！到时候见
类图用于描述系统的静态结构，显示系统的类、它们的属性、操作以及它们之间的关系。下面是一个简单的类图示例：
了解：
1、public 公用的 ：用+ 前缀表示 ，该属性对所有类可见
2、protected 受保护的：用 # 前缀表示，对该类的子孙可见
3、private 私有的：用- 前缀表示，只对该类本身可见
4、package 包的：用 ~ 前缀表示，只对同一包声明的其他类可见
语法
classDiagram
class 类名A{
+类型 属性名
+操作名()
}
class 类名B{
-类型 属性名
-操作名()
}
类名A <-- 类名B
...
关系
classDiagram
classA <|-- classB:继承
classC *-- classD:组合
classE o-- classF:聚合
classG <-- classH:关联
classI -- classJ:连接(Solid)
classK <.. classL:依赖
classM <|.. classN:实现
classO .. classP:连接(Dashed)
例子
---
title: Animal example
---
classDiagram
note "标注"
note for Duck "标注\n can fly \n can swim \n can dive \n can help in debugging"
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()
}
---
title: Animal example
---
classDiagram
note "标注"
note for Duck "标注\n can fly \n can swim \n can dive \n can help in debugging"
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()
}
饼图（pie）
pie showData
title 饼图示例
" A" : 40
" B" : 25
" C" : 20
" D" : 15
状态图（stateDiagram）
状态图(Statechart Diagram)是描述一个实体基于事件反应的动态行为，显示了该实体如何根据当前所处的状态对不同的事件做出反应。通常我们创建一个UML状态图是为了以下的研究目的：研究类、角色、子系统、或组件的复杂行为。
stateDiagram
[*] --> 暂停
暂停 --> 播放
暂停 --> 停止:类型
播放 --> 暂停
播放 --> 停止
停止 --> [*]
时间线（timeline）
依据时间顺序，把一方面或多方面的事件串联起来，形成相对完整的记录体系，再运用图文的形式呈现给用户；时间轴可以运用于不同领域，最大的作用就是把过去的事物系统化、完整化、精确化。
%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : Youtube
2006 : Twitter
2007 : Tumblr
2008 : Instagram
2010 : Pinterest
%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : Youtube
2006 : Twitter
2007 : Tumblr
2008 : Instagram
2010 : Pinterest
用户旅途图（journey）
用户旅程图以高度详细的方式描述了不同用户在系统、应用或网站内等完成特定任务所采取的确切步骤。这种技术展示了当前（现状）用户的工作流程，并揭示了未来（预期）工作流程的改进空间。
语法
<任务>:<评分>:<参与者1>,<参与者2>…
journey
title 标题
section 最大层次标签
第二层名称1: 等级数字
第二层名称2: 3
第二层名称3: 1
section 最大层次标签
第二层名称4: 5
第二层名称5: 5
例子
表情从下到上（1-10）
journey
title My working day
section 在工作
喝水: 5:我, 猫
工作: 3:我
开会: 1:我
section 在家
玩游戏: 5:我
看书: 5:我
甘特图（gantt）
甘特图是工程计划中常用的一种图形，用以管理任务的分解、时间的长度和节点计划、以及实际进度和计划进度的差距等等.
甘特图将记录每个计划的任务作为一个连续的条形，从左到右延伸. x 轴表示时间， y 轴记录不同的任务及其完成顺序.
从上面这段描述里我们能够摘取到甘特图的一些重要因素：时间、任务、计划和进度.
task显示名 : 状态（可缺省） 任务名（可缺省） 开始时间（或任务位置） 延续时长（或结束时间）
task进度条有三种状态，
<default>，done，active
<default>表示的状态即为缺省下的状态，具体来说，就是已计划但尚未实施.
done表示该工作已完成.
active表示该工作正激活，处于正在进行中.对于关键任务，还提供了一个
crit状态，表示该任务为关键任务.crit状态可以与其他状态复用.
例子
gantt
dateFormat YYYY-MM-DD ---时间格式指定
title Adding GANTT diagram functionality to mermaid ---标题
excludes weekends --- excludes排除日期，排除周末
section A section ---section区块分隔
Completed task :done, des1, 2014-01-06,2014-01-08 ---task任务条，对应一个甘特图进度条
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :until isadded
Functionality added :milestone, isadded, 2014-01-25, 0d
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page :20h
Add another diagram to demo page :48h
思维导图（mindmap）
mindmap
root((根))
Origins
Long history
Popularisation
British popular psychology author Tony Buzan
Research
On effectiveness<br/>and features
On Automatic creation
Tools
Pen and paper
Mermaid
mindmap
root((根))
Origins
Long history
Popularisation
British popular psychology author Tony Buzan
Research
On effectiveness<br/>and features
On Automatic creation
Tools
Pen and paper
Mermaid
6032
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
