用Mermaid画图
1、用Mermaid画图
mermaid.md
TyporaPortable.rar
mermaid.zip
1 Mermaid是什么
1.1 概述
Mermaid 是一个用于画流程图、状态图、时序图、甘特图的库，使用 JS 进行本地渲染，广泛集成于许多 Markdown 编辑器中。
Mermaid 作为一个使用 JS 渲染的库，生成的不是一个“图片”，而是一段 HTML 代码。
1.2 网址
官网地址：
https://mermaid-js.github.io/mermaid/#/
Github地址：
https://github.com/knsv/mermaid
图形
图形
几种图形
名字节点与无名字节点
设置样式:style, classDef, class, :::
fill：设置结点的填充颜色
stroke：设置边缘绘制颜色
stroke-width：设置边缘绘制的粗细
stroke-dasharray：设置如何绘制虚线边框，第一个参数描述的是虚线中线段的长度，第二个参数描述的是每个线段之间的间隔
classDef: 自定义样式
线条
图形连线(--)及注释(%%)
线条样式
实线与虚线
箭头
实线与粗实线及箭头
延长线
其他线条：flowchart
其他线条
类图、时序图等线条与图形，详见相关Demo
连接形式
直连
多重连接: &
方向
由上到下：TB/TD
由下到上：BT
由左到右:LR
由右到左:RL
子图：flowchart/subgraph/end
- 注：
- 子图中，有个定义方向的语法：direction，例如direction LR; 目前没有找到支持该语法的编辑器。
练习：画思维导图
练习：类图
代码：
classDiagram
class Application {
Run
DispatchNextEvent
virtual GetNextEvent
virtual Initialize
virtual Teardown
virtual AcceptFrame
}
class QueueApplication {
GetNextEvent
virtual WaitForSystemEventWithTimeout
virtual PollNextSystemEvent
Inject
InjectTimedEvent
}
class AppManagerHisense {
GetDirectFB
GetWindow
Initialize
Teardown
}
class Queue {
Get
Poll
Put
}
class EventQueue {
Put
Get
}
class TimedEventQueue {
Get
}
class IDirectFB {
<<interface>>
}
class SbWindow {
<<interface>>
}
class DFBInputEvent {
<<interface>>
}
Application <|-- QueueApplication
QueueApplication<|--AppManagerHisense
Queue<|--EventQueue
QueueApplication*--EventQueue
QueueApplication*--TimedEventQueue
AppManagerHisense*--IDirectFB
AppManagerHisense*--SbWindow
SbWindow*--DFBInputEvent
线条
图形
练习：时序图
代码：
sequenceDiagram
前端 ->> xwjAiotCommunity:设置关注人员(owner/care/batchSet)
xwjAiotCommunity->>DB(basic_owner): 获取业主卡号
xwjAiotCommunity->>DB(basic_owner_validtime): 获取FaceId
xwjAiotCommunity ->> xwjAiotTrajectory: 向AI下发人脸(care/registFace2AI)
xwjAiotTrajectory ->> AI: 下发人脸(xwj-videoai-specialperson/reportMsg)
xwjAiotCommunity ->> DB(basic_owner_business_tag): 添加关注人员标签
线条
线条： ->>, -->>,-x, --x activate, deactivate
sequenceDiagram
a ->> b:调用
activate b
b -->> a:返回
a-xc: 删除消息
a--xb: 删除消息
deactivate b
参与者声明与线条： participant, +/-
sequenceDiagram
participant a as A
participant b AS B
participant c AS C
a ->>+b: 调用
c ->>+b:call
b ->>-a:返回
a-xc:删除消息
a-xb: 删除消息
b->>-c:调用
代码：
sequenceDiagram
participant a as A
participant b AS B
participant c AS C
a ->>+b: 调用
c ->>+b:call
b ->>-a:返回
a-xc:删除消息
a-xb: 删除消息
b->>-c:调用
笔记： note
sequenceDiagram
participant a as Alice
participant j as John
participant d as Dan
Note right of j: John is a studenst
Note left of a: Alice is a girl
Note over j,d: this is a test
a->>+j:Hello John, how are you?
d->>+j:John, can you hear me?
j-->>-a:Hi Alice, I can hear you!
j-->>-d:I feel great!
代码：
sequenceDiagram
participant a as Alice
participant j as John
participant d as Dan
Note right of j: John is a studenst
Note left of a: Alice is a girl
Note over j,d: this is a test
a->>+j:Hello John, how are you?
d->>+j:John, can you hear me?
j-->>-a:Hi Alice, I can hear you!
j-->>-d:I feel great!
loop:循环
sequenceDiagram
title: loop 循环
a->>b:how are you
loop wait answer
a->>b:how are you 2
end
b-->>a: how are you
alt: 条件判断
sequenceDiagram
alt if true
a->>b:how are you
else
b->>a: how are you
end
opt: 可选
sequenceDiagram
opt ask
a->>b:how are you
end
par: 并行与autonumber
sequenceDiagram
autonumber
title: par 演示
par A
a->>b:how are you
and B
a->>b:how are you2
and C
a->>b:how are you3
end
背景颜色与title
sequenceDiagram
title: 设置颜色
rect rgba(60, 125, 255, .5)
par A
a->>b:how are you
and B
a->>b:how are you2
and C
a->>b:how are you3
end
end
练习：状态图
- 参考状态图
demo 1
stateDiagram-v2
NR:Not Runing
R:Running
HD:Hidden
V:Visible
F:Focus
NF:Not Focus
S:Suspend
B:Background(resume to plackback)
state R {
direction LR
state HD {
direction LR
S
B
}
state V {
direction TB
F
NF
}
}
NR --> F: Launch
NR --> HD: Launch into hidden
HD --> F: Make Visible
V --> HD: Hidden
F --> NF: Lost Focus
NF --> F: Got Focus
%%R --> NR: AppExit/exit code/App crash
疑问
1、不清楚如何表达：
- 状态图中的属性
- 进入，离开时的响应
2、方向（direction）似乎不太灵
3、有些状态跳转不能添加，例如 R-->NR
4、Typora不能很好的支持stateDiagram-v2,只支持stateDiagram
5、Typora不支持direction
demo 2
stateDiagram-v2
NR:Not Runing
R:Running
HD:Hidden
V:Visible
F:Focus
NF:Not Focus
S:Suspend
B:Background(resume to plackback)
state R {
direction TB
state HD {
direction TB
S
B
[*] --> S:Launch into hidden/Visible to Hidden
[*] --> B:Launch into hidden/Visible to Hidden
S --> B:todo
B --> S:todo
S-->[*]:MakeVisible/To Not Running
B-->[*]:MakeVisible/To Not Running
}
state V {
direction TB
F
NF
[*]-->F: Make Visible/Launch
F-->NF: Lost Focus
NF-->F:Got Focus
F-->[*]:Hidden
NF-->[*]:Hidden
}
[*] -->HD : Launch into hidden
[*] -->V: Launch
HD-->V: Make Visible
V --> HD: Hidden
V-->[*]: exitCode/AppCrash/AppExit
}
[*]-->NR:start
NR --> R:Launch/Launch into hidden
R-->NR:exitCode/AppCrash/AppExit
demo 3： Typora
- demo1, demo2在有道云笔记中，可以正常显示，但在Typora中无法正常显示
stateDiagram-v2
NR:Not Runing
R:Running
[*]-->NR:device launch
NR --> R:Launch/Launch into hidden
R-->NR:exitCode/AppCrash/AppExit
state Runing
stateDiagram-v2
HD:Hidden
V:Visible
[*] -->HD : Launch into hidden
[*] -->V: Launch
HD-->V: Make Visible
V --> HD: Hidden
V-->[*]: exitCode/AppCrash/AppExit
state Hidden
stateDiagram-v2
S:Suspend
B:Background(resume to plackback)
[*] --> S:Launch into hidden/Visible to Hidden
[*] --> B:Launch into hidden/Visible to Hidden
S --> B:todo
B --> S:todo
S-->[*]:MakeVisible/To Not Running
B-->[*]:MakeVisible/To Not Running
state Visible
stateDiagram-v2
F:Focus
NF:Not Focus
[*]-->F: Make Visible/Launch
F-->NF: Lost Focus
NF-->F:Got Focus
F-->[*]:Hidden/To Not Running
NF-->[*]:Hidden/To Not Running
练习：饼状图
pie
title 为什么总是宅在家里？
"喜欢宅" : 15
"天气太热或太冷" : 20
"穷" : 500
练习： 数据流图
graph LR
R[RAE]
D(DIAL)
R--start/stop command-->D
R--Test Case Command-->N
D--apm Message:start/stop-->N
N--device info:esn,mac,ip,model-->R
classDef outerStype fill:#d3d3d3,stroke:#333,stroke-width:1px
R:::outerStype
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？