typora绘图

多刷新一下，Mermaid的图是可以渲染出来的😂

目录

1，序列图

Alice->Bob: Hello Bob, how are you?
Note left of Alice: Alice thinks
Note right of Alice: Alice thinks
Note left of Bob: Bob thinks
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!

a-->b: a2b
a-->c: a2c
a-->d: a2d
a-->e: a2e
a-->f: a2f
a-->g: a2g
a-->h: a2h
a-->i: a2i
a-->j: a2j
a-->k: a2k

特性表

语法 名称（功能） 方法（示例）
-> 事件线（直线）：事件 对象a->对象b：事件
--> 事件线（直线）：事件 对象a-->对象b：事件
note left/right of 备注 note left of 对象：备注

2，流程图

st=>start: Start
op=>operation: Your Operation
cond=>condition: Yes or No?
e=>end

st->op->cond
cond(yes)->e
cond(no)->op

特性表

语法 名称（功能） 方法（示例）
st=>start: 开始（声明）：显示文本 st=>start:开始
op=>operation: 选项（声明）：显示文本 op=>operation:行为
cond=>condition: 条件（声明）：显示文本 cond=>condition:是/否？
e=>end: 结束（声明）：显示文本 e=>end
-> 事件线（实线） st->op->cond cond(yes/no)->e/op cond()的参数必须是yes和no

3，Mermaid序列图

sequenceDiagram Alice->>Bob: Hello Bob, how are you? 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
sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts <br/>prevail! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!

特性表

语法 名称（功能） 方法（示例）
sequenceDiagram 声明 段首声明用
->>: 事件线（实现） 对象a->>对象b：时间文本
alt 情况替换文本 alt 条件/情况
else （其他）情况替换文本 else 条件/情况
opt 选择性文本 opt 条件/情况
end 结束（声明） 段尾结束
%% 注释

4，Mermaid流程图

横向流程图

graph LR id1[alt] -->id2(alt) id2 --> id3{alt} id3 -->|情况1| id4[结果1] id3 -->|情况2| id5[结果2]

纵向流程图

graph TD id1[alt] -->id2(alt) id2 --> id3{alt} id3 -->|情况1| id4[结果1] id3 -->|情况2| id5[结果2] id3 -->|情况3| id6[结果3]
语法 名称（功能） 方法（示例）
graph LR/TD 声明 横向制图LR 纵向制图TD
id[alt] 直角矩形 id[alt]
id(alt) 圆角矩形 id(alt)
id 菱形（结点） id
--> 事件线（实线） 对象a-->对象b

5，Mermaid甘特图

gantt dateFormat YYYY-MM-DD title Adding GANTT diagram functionality to mermaid section A section Completed task :done, des1, 2014-01-06,2014-01-08 Active task :active, des2, 2014-01-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, 2014-01-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

特性表

语法 名称（功能） 方法（示例）
gantt 类型声明 段首声明
dateFormat 时间格式 dateformat: YYYY-MM-DD datefomat: MM-DD-YYYY (更多的格式查看Mermaid甘特图文档)
title 甘特图标题 title xx项目管理表
section 项目名称(分区) section 项目1
:done 完成(状态) 事件1 :done, ...
:active 正在进行(状态) 事件1 :active, ...
:crit critical, 关键任务 事件1 :crit, ...
des description, 任务描述(指针或者选择器) des, <对项目事件的时间描述>

关于"des"的补充

description, 个人认为应该理解为一个对事件时间节点的快速标记语法;

首先这种标记的基础和原理是甘特图本身就是"在时间轴上基于事件地描述整个项目流程", 因此每个项目的事件还可以用"某事件后多久"来进行定位(和描述), 这样一来, 许多事件可以很方便的"挂"在几个时间标记之后。

6，Memaid类图

classDiagram Animal <|-- Duck Animal <|-- Fish Animal <|-- Zebra Animal : +int age Animal : +String gender Animal: +isMammal() Animal: +mate() class Duck{ +String beakColor +swim() +quack() } class Fish{ -int sizeInFeet -canEat() } class Zebra{ +bool is_wild +run() }
classDiagram Class01 <|-- AveryLongClass : Cool Class03 *-- Class04 Class05 o-- Class06 Class07 .. Class08 Class09 --> C2 : Where am i? Class09 --* C3 Class09 --|> Class07 Class07 : equals() Class07 : Object[] elementData Class01 : size() Class01 : int chimp Class01 : int gorilla Class08 <--> C2: Cool label

特性表

语法 名称(功能) 方法(示例)
classDiagram 声明 段首声明
<|-- 带箭头的连线(实线) 类a <|-- 类b
主类名 : 定义主类里面的内容 类a : 内容1 类a : 内容2 类a : 内容3
class 类名称 定义子类里面的内容 class 类b

7，Mermaid状态图

stateDiagram-v2 [*] --> Still Still --> [*] Still --> Moving Moving --> Still Moving --> Crash Crash --> [*]
stateDiagram-v2 [*] --> Active state Active { [*] --> NumLockOff NumLockOff --> NumLockOn : EvNumLockPressed NumLockOn --> NumLockOff : EvNumLockPressed -- [*] --> CapsLockOff CapsLockOff --> CapsLockOn : EvCapsLockPressed CapsLockOn --> CapsLockOff : EvCapsLockPressed -- [*] --> ScrollLockOff ScrollLockOff --> ScrollLockOn : EvScrollLockPressed ScrollLockOn --> ScrollLockOff : EvScrollLockPressed }

特性表

语法 名称(功能) 方法(示例)
stateDiagram 声明 段首声明
[*] 状态点 [*]-->对象a
--> 连接线(实线) 对象a-->对象b (对象可以是状态点)

8，Mermaid饼图

pie title Key elements in Product X "Calcium" : 42.96 "Potassium" : 50.05 "Magnesium" : 10.01 "Iron" : 5

特性表

语法 名称(功能) 方法(示例)
pie 声明 段首声明
title 标题 title 标题x
" " : 描述 "部分a": <数量> "部分b": <数量> "部分c": <数量> "部分d": <数量> 只需填入数量, 百分比Mermaid自动求解
posted @ 2021-07-17 15:06  tensor_zhang  阅读(158)  评论(0)  编辑  收藏  举报