多刷新一下,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 |
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 |
结束(声明) |
段尾结束 |
%% |
注释 |
|
横向流程图
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{alt} |
菱形(结点) |
id{alt} |
--> |
事件线(实线) |
对象a-->对象b |
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, 个人认为应该理解为一个对事件时间节点的快速标记语法;
首先这种标记的基础和原理是甘特图本身就是"在时间轴上基于事件地描述整个项目流程", 因此每个项目的事件还可以用"某事件后多久"来进行定位(和描述), 这样一来, 许多事件可以很方便的"挂"在几个时间标记之后。
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{ 内容1 内容2 内容3 } |
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 (对象可以是状态点) |
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自动求解 |
typora绘图
原文:https://www.cnblogs.com/tensorzhang/p/15023498.html