Markdown mermaid种草(1)_ mermaid简介
文章目录
1 为什么要推荐mermaid
本小白最近特别迷恋markdown及markdown相关的工具. 可能是因为正牌的编程技巧学不会,只能学学这种用来锦上添花(zhuangbility)的技巧. 开个玩笑,好的笔记好的呈现,可以为学习效果添砖加瓦.
Markdown语言怎么说呢,简直可以说是程序员之友了. 不管是github还是你现在正在查看的CSDN,以及各种笔记类产品,都支持这种图文并茂的编辑格式. 本小白首先推荐一款人人都推荐的markdown神器typora,这款产品目前是我使用markdown语言的主打产品,在体会了几种线上编辑器和几种笔记类软件之后,我还是觉得typora是本地端markdown编辑器的最优解(本小白个人见解,高手轻喷).
言归正传,来讲本篇的主角mermaid. 本小白之前以为,markdown也只能在文本、表格层面耍得很精彩了,直到最近偶然间发现了mermaid这个markdown语言的加成神器.
可以说,mermaid基本上满足了程序员对工作中常用图表的编辑需求.冲这一点,就值得本小白的墙裂推荐.
2 mermaid简介
直接先上一个mermaid的主页:mermaid传送门.
mermaid目前提供了以下类型的图形绘制:
编号 | 英文图名 | 中文图名 |
---|---|---|
1 | Flowchart | 流程图 |
2 | Sequence Diagram | 序列图 |
3 | Class Diagram | 类图 |
4 | State Diagram | 状态图 |
5 | Entity Relationship Diagram | 实体关系图 |
6 | User Journey | 流水账 |
7 | Gantt | 甘特图 |
8 | Pie Chart | 饼图 |
Mermaid lets you represent diagrams using text and code.
mermaid的目标是让你可以用文本编辑器和代码来绘制图表. OK,既然是简介,那就每种图来一个示例吧(以下示例摘抄来的,没有版权保护):
感谢CSDN支持了mermaid的多数绘图,但是甘特图是不是没有支持???
2.1 流程图
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
2.2 序列图
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
2.3 类图
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
2.4 状态图
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 --> [*]
2.5 实体关系图(ER图)
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
2.6 用户体验地图
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me
2.7 甘特图
gantt
dateFormat YYYY-MM-DD
axisFormat %m-%d
title Adding GANTT diagram to mermaid
excludes weekdays 2021-01-10
section A section
Completed task :done, des1, 2021-01-16,2021-01-28
Active task :active, des2, 2021-01-29, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
2.8 饼图
pie
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5