用Mermaid画图

news/2025/1/17 20:42:30/文章来源:https://www.cnblogs.com/Rong-/p/18677639

1、用Mermaid画图
mermaid.md
TyporaPortable.rar
mermaid.zip

1 Mermaid是什么
- 1.1 概述
- 1.2 网址
  - 官网地址：
  - Github地址：
图形
- 图形
  - 几种图形
  - 名字节点与无名字节点
  - 设置样式:style, classDef, class, :::
线条
- 图形连线(--)及注释(%%)
- 线条样式
- 实线与虚线
- 箭头
- 实线与粗实线及箭头
- 延长线
- 其他线条：flowchart
- 其他线条
- 连接形式
  - 直连
  - 多重连接: &
方向
- 由上到下：TB/TD
- 由下到上：BT
- 由左到右:LR
- 由右到左:RL
子图：flowchart/subgraph/end
练习：画思维导图
练习：类图
- 线条
- 图形
练习：时序图
- 线条
  - 线条： ->>, -->>,-x, --x activate, deactivate
  - 参与者声明与线条： participant, +/-
  - 笔记： note
  - loop:循环
  - alt: 条件判断
  - opt: 可选
  - par: 并行与autonumber
  - 背景颜色与title
练习：状态图
- demo 1
- 疑问
- demo 2
- demo 3： Typora
  - state Runing
    - state Hidden
    - state Visible
练习：饼状图
练习：数据流图

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[\反向梯形/]

名字节点与无名字节点

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;

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

线条

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

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

线条样式

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

实线与虚线

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

箭头

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

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

实线与粗实线及箭头

graph TB a-->b c--实线箭头-->d e-->|实线箭头|f

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

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

延长线

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

其他线条：flowchart

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

其他线条

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

连接形式

直连

graph LR a --> b-->c

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

多重连接: &

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

方向

由上到下：TB/TD

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

graph TD 图形1-->A(图形2)

由下到上：BT

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

由左到右:LR

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

由右到左:RL

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

子图：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

注：

子图中，有个定义方向的语法：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 %% 组合 a "1" *-- "1..n" b : map %% 聚合 e o-- f: 聚合 %% 继承 c<|--d: 继承 %% 实线 g <|.. h %% 依赖 i ..> j: 依赖 %% Link k .. l m -- n %% 关联 p --> q:关联

图形

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

线条

线条： ->>, -->>,-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:调用

笔记： 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!

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/870952.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！