用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

图形

图形

几种图形

graph TB 默认方形 id1[方形] id2(圆边矩形) id3([体育场形]) id4[[子程序形]] id5[(圆柱形)] id6((圆形))
graph TD id1{菱形} id2{{六角形}} id3[/平行四边形/] id4[\反向平行四边形\] id5[/梯形\] id6[\反向梯形/]

image

名字节点与无名字节点

graph TB A[有名 字节点] 无名字节点 A-->无名字节点

设置样式:style, classDef, class, :::

graph TB id4:::defaultStyle 默认方形:::defaultStyle id1[方形] id2(圆边矩形) id3([体育场形]) id4[[子程序形]] id5[(圆柱形)] id6((圆形)) style id1 fill:#f9f,stroke:#333,stroke-width:1px classDef defaultStyle fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5 id2:::defaultStyle class id3,id4,id5 defaultStyle;

image
fill：设置结点的填充颜色
stroke：设置边缘绘制颜色
stroke-width：设置边缘绘制的粗细
stroke-dasharray：设置如何绘制虚线边框，第一个参数描述的是虚线中线段的长度，第二个参数描述的是每个线段之间的间隔
classDef: 自定义样式

线条

图形连线(--)及注释(%%)

graph LR a---b %% 这是一条注释 c-->d

image

线条样式

graph LR a---b c-->d linkStyle 0 stroke:#0ff,stroke-width:2px; linkStyle default stroke:#ff3,stroke-width:4px,color:red;

image

实线与虚线

graph LR a---b c-.-d

image

箭头

graph TB a---b c--无箭头线---d
graph TB a-->b c--带箭头线-->d

image

实线与粗实线及箭头

graph TB a-->b c--实线箭头-->d e-->|实线箭头|f
graph TB a==>b c==粗实线箭头==>d e==>|实线箭头|f
graph TB a-.->b c-.虚线箭头.->d e-.->|虚线箭头|f

image

延长线

graph LR a-->b c--->d

image

其他线条：flowchart

flowchart LR a <--> b c x--x d e o--o f g o--圆头--o h

image

其他线条

类图、时序图等线条与图形，详见相关Demo

连接形式

直连

graph LR a --> b-->c
graph LR d-->e e-->f c-->d c-->g

image

多重连接: &

graph LR a & b-->c & d e-->f & g --> h

image

方向

由上到下：TB/TD

graph TB 图形1--由上到下-->A(图形2)
graph TD 图形1-->A(图形2)

image

由下到上：BT

graph BT 图形1--由上到下-->A(图形2)

image

由左到右:LR

graph LR 图形1--由左到右-->A(图形2)

由右到左:RL

graph RL 图形1--由左到右-->A(图形2)

image

子图：flowchart/subgraph/end

flowchart TB c1-->a2 subgraph one a1-->a2 end subgraph two b1-->b2 end subgraph three c1-->c2 subgraph four d1-->d2 end end one-->two three-->two two-->c2 c1-->d2

image
image

  • 注：
  • 子图中，有个定义方向的语法：direction，例如direction LR; 目前没有找到支持该语法的编辑器。

练习：画思维导图

graph LR MD学习-->MR[Mermaid学习]-->GP[图形] MR-->D[方向] & L[线条] & U[UML] GP-->名字节点与无名字节点 L-->虚线与实线 & 箭头 & 粗细 & 文本 & 直连与多重连接 U-->数据流图 & 类图 & 时序图 & 状态图 & 流程图 & 子图

练习：类图

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

代码：

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

线条

classDiagram %% 组合 a "1" *-- "1..n" b : map %% 聚合 e o-- f: 聚合 %% 继承 c<|--d: 继承 %% 实线 g <|.. h %% 依赖 i ..> j: 依赖 %% Link k .. l m -- n %% 关联 p --> q:关联

image

图形

classDiagram class DFBInputEvent~T,V~ { <<interface>> -mutex +Get() #Poll() +Put() }

练习：时序图

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): 添加关注人员标签

image
代码：

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

image

参与者声明与线条： 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:调用

image
代码：

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!

image
代码：

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

image

alt: 条件判断

sequenceDiagram alt if true a->>b:how are you else b->>a: how are you end

image

opt: 可选

sequenceDiagram opt ask a->>b:how are you end

image

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

image

背景颜色与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

image

练习：状态图

  • 参考状态图
    state

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

picture

疑问

1、不清楚如何表达：

  1. 状态图中的属性
  2. 进入，离开时的响应
    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

picture

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

image

练习： 数据流图

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
posted @ 2025-01-17 20:40  荣--  阅读(290)  评论(0)    收藏  举报