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[\反向梯形/]
名字节点与无名字节点
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中无法正常显示
state Runing
stateDiagram-v2 HD:Hidden V:Visible [*] -->HD : Launch into hidden [*] -->V: Launch HD-->V: Make Visible V --> HD: Hidden V-->[*]: exitCode/AppCrash/AppExitstate 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 Runningstate 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