Typora 图形插件 Mermaid 完美画图
今天给伙伴们分享一下Typora 图形插件 Mermaid 画图，希望看了有所收获。
我是想吃西红柿，公众号「想吃西红柿」「云原生运维实战派」作者，对云原生运维感兴趣，也保持时刻学习，后续会分享工作中用到的运维技术，在运维的路上得到支持和共同进步！
如果伙伴们看了文档觉得有用，欢迎大家关注我的公众号，获取相关文档。爱运维，爱生活。
一、Mermaid 介绍
-
Mermaid 是一个用于画流程图、状态图、时序图、甘特图的库，使用 JS 进行本地渲染，广泛集成于许多 Markdown 编辑器中。
-
mermaid语法和Markdown一样简单。通过文本化的方法来制作图形，一方面不需要其他软软件，直接在Typora中就可以编辑和修改，另一方面图形体积非常小，加载速度非常快。
-
本文的代码和图形都在用Typora编辑器实现的。以下以例子为主，在实际使用过程中可以根据例子照猫画虎。例子中的mermaid代码很简单，很容易理解，工作使用中根据需要修改就可以用了。
二、Mermaid 流程图基础
1、流程图符号和含义
- Mermaid 的流程图的图形含义使用象形的表达形式，非常类似中国象形，理解起来很直观，比如矩形
[],圆角矩形(),圆形(())
| 图形 | 符号含义 | |
|---|---|---|
| 圆角矩形 | 表示开始和结束 | id(“文字”) |
| 矩形 | 表示过程环节 | id["文字"] |
| 单向箭头线段 | 表示流程进行方向 | |
| 菱形 | 决策判断 | id{"文字"} |
| 圆形 | 表示连接，避免流程图 | id(("文字")) |
| 右向旗帜节点 | 标志提示 | id>"文字"] |
-
示例：
graph TB
start("圆角矩形")
rectangle["矩形"]
rhombus{"菱形"}
round(("圆形"))
right_arrow>"右向旗帜节点"]
2、节点之间的连线
| 表述 | 说明 | 使用示例 |
|---|---|---|
--> | 添加尾部箭头 | A(把大象装进冰箱)-->B{打开冰箱} |
--- | 不添加尾部箭头 | A(把大象装进冰箱)---B{打开冰箱} |
-- | 单线 | A(把大象装进冰箱)--B{打开冰箱} |
--text-- | 单线上加文字 | A(把大象装进冰箱)--你好亲爱的--B{打开冰箱} |
== | 粗线 | A(把大象装进冰箱)==>B{打开冰箱} |
==text== | 粗线加文字 | |
-.- | 虚线 | |
-.text.- | 虚线加文字 |
1、示例 1:箭头连线示例
graph TD
A(把大象塞进冰箱)-->B{打开冰箱门}
B-->|"保鲜,使用小箭头"|C["放进保鲜区"]
C---E("三杠没有箭头指向")
B==>|"冷藏,使用大箭头"|D["放进冷冻区"]
D-- "整块" ---forever("结冰")
D---|"分块"|forever("结冰")
2、示例 2：箭头上加文字
-
加文字方式：节点连线表述定义+文字+节点连线表述定义
-
如：-.|“文字”|.->id(“”)
graph TB
connect["数据库连接"]--"root 192.168.100.100"-->start{"开始连接"}
start-.虚线加文字.->ok["连接成功"]
start-.->faild["连接超时"]
3、示例3：结合fontawesome使用
graph TD
B["fa:fa-dns dns解析"]
B-->C[fa:fa-ban 递归解析]
B-->D(fa:fa-spinner 迭代解析);
4、示例4：流程表做标题
- 将其添加到流程图TD定义之后的顶部。
- 将定义一个框，用下划线（）设置文本的样式，并使框填充和描边为空白
#FFF（样式标题） - 并将其链接到实际的第一步/框（FirstStep），从而使其显示在顶部，同时使使用linkStyle 0隐藏链接
graph TD
title[<u>标题</u>]
title -->FirstStep
style title fill:#FFF,stroke:#FFF
linkStyle 0 stroke:#FFF,stroke-width:0;
FirstStep-->...
3、布局方向
| TB/TB | Top Bottom 从上到下 |
|---|---|
| BT | bottom top 从下到上 |
| LR | left right 从左到右 |
| RL | right left 从右到左 |
4、子图
1、代码格式
subgraph title
graph definition
end
2、代码示例
graph TB
subgraph 图3
two1---two2
end
subgraph 图2
three1 ==> three2
end
subgraph 图1
one1-->one2
end
one1-->two2
style 图2 fill:#f9f,stroke:#333,stroke-width:4px
三、Mermaid 代码格式
1、语法基本格式
graph {布局方向[`TB` | `BT` | `LR` |`RL` ]}
2、Typora中用 mermaid 绘制图像
- 主要说明饼图、时序图、流程图、状态转移图和类图的方法
- 注意： Typpra中直接写入代码块，脚本语言标记为mermaid
1、实现饼图
pie
title 饼图标题
"dogs":156
"cats":100
"birds":60
2、实现时序图
sequenceDiagram
title: 时序图例子
Alice->>Alice: 自言自语
Alice->>John: Hello John, how are you?
%% over 可用于单独一个角色上，也可以用于相邻两个角色间：
Note over Alice,John: A typical interaction
%% loop 后跟循环体说明文字
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
%% 控制焦点：用来表示时序图中对象执行某个操作的一段时间
%% activate 角色名 表示**控制焦点
activate Bob
Bob-->>John: Jolly good!
%% deactivate 角色名 表示控制焦点结束
deactivate Bob
Alice->>+Bob: Hello John, how are you?
rect rgb(175, 255, 212)
alt is sick
Bob-->>Alice: Not so good :(
else is well
Bob-->>Alice: Feeling fresh like a daisy
end
opt Extra response
Bob-->>Alice: Thanks for asking
end
end
loop communicating
Alice->>+John: asking some questions
John-->>-Alice: answer
end
par Alice to John
Alice->>John: Bye
and Alice to Bob
Alice->>Bob: Bye
end
Alice-xJohn: 这是一个异步调用
Alice--xBob: 这是一个异步调用
3、实现流程图
graph LR
%% 这是注释，流程图中用到的各种图形画法、连线
id1((start))-->A[方角矩形]
A -.虚线.-> B(圆角矩形)
A --> F[\平行四边形\]--> G[/平行四边形/]-->H[/梯形\]-->I[\梯形/]
A ---|没箭头的连线|i21(圆角矩形)
B --文案--> C{菱形}
C -->|One| D{{Result one}}
C -->|Two| E>Result two]
graph TB
%% 子流程
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
graph TB
%% 抖音发布视频流程
B(点击拍摄) --> C{是否允许抖音拍摄视频}
C-->|N|D[提示用户允许抖音拍摄]
C-->|Y|E[开始拍摄]
E-->F[相册]-->G[自行编辑]-->H[发布]
E-->I[选择滤镜和音乐]-->J[按住拍摄]-->H
E-->J
H-->|N|K[返回首页]
H-->|Y|L[所有人可见]
4、实现UML类图
- 类的画法，-开头的是它的私有属性，+开头的是类的公共方法。Protected方法则在前面放上#。
- 方法的表示，括号中可以放入方法的参数，在括号后面可以放上方法的返回值类型。
classDiagram
class Duck{
-String beakColor
- double weight
+swim()
+quack()
#count()
+getPrice(count) double
+someAbstractMethod() *
-someStaticMethod() $
}
class Shape{
%% This whole line is a comment classDiagram class Shape <<interface>>
<<interface>>
noOfVertices
draw()
}
class Color{
<<enumeration>>
RED
BLUE
GREEN
WHITE
BLACK
}
class Relation{
<<<<abstract>>>>
}
classDiagram
class system{
-String beakColor
- double weight
+swim()
+quack()
#count()
+getPrice(count) double
+someAbstractMethod() *
-someStaticMethod() $
}
-
类与类之间的关系，常见有下面6种：
-
- 依赖（Dependency）：元素A的变化会影响元素B，反之不成立，那么B和A的关系是依赖关系，B依赖A；uml中用带箭头的虚线表示，箭头指向被依赖元素。
- 泛化（Generalization）：就是通常所说的继承（特殊个体 is kind of 一般个体）关系。uml中用带空心箭头的实线线表示，箭头指向一般个体。
- 实现（Realization）：元素A定义一个约定，元素B实现这个约定，则B和A的关系是Realization，B 实现了 A。这个关系最常用于接口。uml中用空心箭头和虚线表示，箭头指向定义约定的元素。
- 关联（Association）：元素间的结构化关系，是一种弱关系，被关联的元素间通常可以被独立的考虑。uml中用实线表示，箭头指向被依赖元素。
- 聚合（Aggregation）：关联关系的一种特例，表示部分和整体（整体 has a 部分）的关系。uml中用带空心菱形头的实线表示，菱形头指向整体。
- 组合（Composition）：组合是聚合关系的变种，表示元素间更强的组合关系。如果是组合关系，如果整体被破坏则个体一定会被破坏。uml中用带实心菱形头的实线表示，菱形头指向整体。
-
类与类之间关系的画法，主要是箭头和线条类型不同：
classDiagram
classK ..> classL : 依赖关系
classA --|> classB : 继承关系（泛化）
classM ..|> classN : 实现关系
classG --> classH : 关联关系
classE --o classF : 聚合关系
classC --* classD : 组合关系
- 多重性是用来说明两个类之间的数量关系，表示为一个整数范围n…m，整数n定义所链接的最少对象的数目，m为最多对象数目（但不确定最大数时，可以*号表示）。
5、实现状态转移图
- 状态转换图主要用来描述系统的状态，及引起系统状态转化的事件，来表示系统的行为。
- 状态转化图可以用来描述单程生命周期，也可以用来表示循环运行过程。
- 单程生命周期起点是实心圆，终点是同心圆，内圆为实心。初态只有一个，终态可以有很多。循环运行过程一般不考虑起点与终点。
stateDiagram
%% 单程生命周期起点是实心圆，终点是同心圆，内圆为实心。
%%这个例子包含是3个状态Still, Moving 和 Crash. 从Still状态可以转移到Moving，从Moving可以转移到Still 或者 Crash。不能从Still转移到Crash
[*] --> Still
Still --> [*]
Still --> Moving: A transition
note right of Moving
Moving可以转移到Still或者Crash
end note
Moving --> Still
Moving --> Crash
Crash --> [*]
- 多个互不干扰状态的并行状态流转
stateDiagram
[*] --> Active
note right of Active
起始状态进入Active状态后
就可以并行执行三个状态的流转了
end note
state Active {
[*] --> NumLockOff
NumLockOff --> NumLockOn : EvNumLockPressed
NumLockOn --> NumLockOff : EvNumLockPressed
--
[*] --> CapsLockOff
CapsLockOff --> CapsLockOn : EvCapsLockPressed
CapsLockOn --> CapsLockOff : EvCapsLockPressed
--
[*] --> ScrollLockOff
ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
}
分支状态流转代码
stateDiagram
%% state fork_state <<fork>>声明一个state
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 --> [*]
6、甘特图
%% Example with selection of syntaxes
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
section A section
Completed task :done, des1, 2024-07-06,2024-07-08
Active task :active, des2, 2024-07-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, 2024-07-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 :1d
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
四、参考资料
-
https://mermaid-js.github.io/mermaid/
-
https://www.typora.io/
以上就是Typora 图形插件 Mermaid 画图的使用方法，相信有了这些编辑技巧，足够常用的文档书写，在写文档的时候也会更加的规范美观，希望对想要写博客的伙伴门有所帮助。
我是想吃西红柿，动动发财的小手关注一下**公众号「想吃西红柿」「云原生运维实战派」**后续会有更多实用的运维技术分享给伙伴们，您的关注就是我最大的成就。
扫一扫
1579
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
