Markdown的Diagrams

目录

• sequence
• FlowCharts
• Mermaid
  • 1. Sequence Diagrams
    • 箭头
    • 分支
      • loop
      • alt
      • opt
      • parallel
    • Background Highlighting
    • 添加编号
  • 2. Journey Diagram
  • 3. Flowcharts
    • 方向：
    • 节点形状：
    • 连接箭头：
      • 原版箭头样式
      • 新增箭头
    • 节点连接：
    • 子图及颜色
  • 4. Gantt Charts
    • 日期格式
    • 持续时间格式
  • 5. Class Diagrams
  • 6. State Diagrams
  • 7. Pie Charts
  • 8. Requirement Diagrams

尝试了sequence、flowcharts、mermaid之后，再加上博客园博客貌似不支持sequence和flowcharts，还是推荐使用mermaid。

我用markdown过程中涉及不到CLI，Configuration，API等等，就只是简单的记录一下这些语句的使用，方便自己查找。

详细文档可以去看：mermaid官方文档

---

原编辑文档网盘地址：
链接：https://pan.baidu.com/s/1rAt1CM8KXg-Oxj-cZSFAJQ
提取码：XL11

---

sequence

Alice->Bob:Hello Bob!
Note right of Bob:Bob thinks
Bob->Alice:Hi, Alice!

Andrew->China:Says Hello
Note right of China:CHina thinks \nabout it
China-->Andrew:How are you?
Andrew->China:I am good, thanks!

Title:Here is a title
A->B:Normal line
B-->C:Dashed line
C->>D:Open arrow
D-->>A:Dashed open arrow

# Example of a comment
Note left of A:Note to the \n left of A
Note right of A:Note to the \n right of A
Note over A:Note over A
Note over A,B:Note over both A and B
participant C

FlowCharts

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: 开始
communicate=>operation: 启动内外网通信检测线程
card=>operation: 启动密码卡状态检测线程
interface=>operation: 启动对外通信接口状态检测线程
check=>operation: 内外CPU定期向外网CPU发送心跳检测指令
cond_heart=>condition: 连续3次无法收到外部CPU心跳检测响应
res=>operation: 重启故障设备
e=>end

st->communicate->check->cond_heart(yes)->res->e
cond_heart(no)->check

Mermaid

1. Sequence Diagrams

箭头

[Actor][Arrow][Actor]:Message text

Type	Description
->	Solid line without arrow
-->	Dotted line without arrow
->>	Solid line with arrowhead
-->>	Dotted line with arrowhead
-x	Solid line with a cross at the end
--x	Dotted line with a cross at the end.
-)	Solid line with an open arrow at the end (async)
--)	Dotted line with a open arrow at the end (async)

%% 注释 sequenceDiagram Alice->>Bob: Hello! alt is sick Bob-->>Alice: Not so good Note right of Alice: Note for Alice else is well Note right of Bob:Note right of Bob is good Bob-->>Alice: Feeling good end opt Extra response Bob->>Alice: Thanks end

sequenceDiagram participant A as Alice participant B as Bob A ->> B: Hey activate B B ->> B: ring B -->> A: HI deactivate B

sequenceDiagram autonumber %% 在箭头后面加上 + / -来表示激活 Alice->>John: Hello John, how are you? John-->>Alice: Great! Alice->>+Bob: Here you are! Bob->>+Bob: Who? Note right of Bob: Who is this girl? Bob -->>-John: Hey, do you know her? John-->>Bob: She is my sister. Note over John,Bob: They are talking. Bob ->>-Bob: Ah Bob ->> Alice: Hi, sister, thanks. Alice->>Bob: You're welcome. loop family dairy rect rgb(191,223,250) rect rgba(250,10,0,.3) %% alt分支的使用 alt is home John -->> Alice:My dear sister. Alice->> John: My brother. else is outside John ->> Alice: Girl Alice->> John: Boy end end %% opt分支的使用 opt exception John ->> Alice: I will protect you. Alice->> John: You're so kind. end end end Note over Alice,Bob: these actions are happening in parallel par Alice to Bob Alice ->> Bob: Hello guys! and Alice to John Alice ->> John: Hello guys! end par John to Bob John ->> Bob: Can we do this today? and Bob to Alice Bob -->> Alice: Hello, sister. end

分支

loop

loop loopname
	statements
end

alt

相当于if…else…end

alt condition1
	statements
else condition2
	statements
end

opt

相当于if没有else

opt condition
	statements
end

parallel

par [Action 1]
	statements
and [Action 2]
	statements
and [Action 3]
	statements
end

Background Highlighting

颜色采用rgb或rgba的形式

rect rgb(0,255,0)
	content
end

rect rgba(0,255,0,.1)
	content
end

添加编号

sequenceDiagram
%% 只需要添加就可以了
	autonumber

---

2. Journey Diagram

journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 5: Me

journey title My workflow section Go to work 英语语法: 7: XL 设计理论: 6: XL 绘画练习: 5: LSP 日语: 1: 可乐 section 兴趣爱好 乐理: 0: LSP 钢琴练习: -1: 乐乐 医药学: -2: XL

3. Flowcharts

Flowcharts包含nodes, shapes, edges, arrows / lines.

end, END, End等不可以作为中间node， 会终止流程

graph LR
id1[Text in the box to display] --> id2[from Left to Right graph LR]

方向：

• TB - top to bottom
• TD - top-bottom / same as top to bottom
• BT - bottom to top
• RL - right to left
• LR - left to right

graph LR id1[Text in the box to display] --> id2[向右 graph LR]

graph TD id1[Text in the box to display] --> id2[from Top to Bottom graph TD or graph TB]

节点形状：

node[your text] - 直角矩形

node(your text) - 圆角矩形

node([your text]) - 倒圆角矩形

node[[your text]] - 子程序形状

node[(your text)] - 圆柱

node((your text)) - 正圆

node>your text] - 非对称形状

node{your text} - 菱形

node{{your text}} - 六边形

node[/your text/] - 平行四边形

node[\your text\ ] - 反平行四边形

node[/your text\ ] - 等腰梯形

node[\your text/ ] - 倒等腰梯形

graph LR A[直角矩形] --> B(圆角矩形)-->C{菱形} A --> G((圆)) --> I>非对称形状] I --> |I1| I1{{六边形}} I --> |I1| I2[/平行四边形/] I --> |I1| I3[\反平行四边形\] I --> |I1| I4[/等腰梯形\] I --> |I1| I5[\等腰梯形/] C-->|One| D([倒圆角矩形]) C-->|2| D C-->|3| E[(圆柱)] C --> |4| F[[子程序形状]]

连接箭头：

原版箭头样式

A --> B 普通箭头

A --- B 两端无箭头

A -- Text -- B 两端无箭头，中间有字

A --- |TEXT|B 两端无箭头，中间有字

A -->|TEXT|B 普通箭头，中间有字

A -- TEXT --> B 普通箭头，中间有字

A -.-> B 虚线箭头

A -.TEXT.-> B 虚线箭头，中间有字

A ==> B 粗箭头

A == TEXT ==> B 粗箭头，中间有字

graph LR A1 --> B1[普通箭头] A2 --- B2[两端无箭头] A3 -- TEXT --- B3[两端无箭头,中间有字] A4---|TEXT|B4[两端无箭头,中间有字] A5 -->|TEXT| B5[普通箭头,中间有字] A5 -- TEXT --> B5[普通箭头,中间有字] A6 -.-> B6[虚线箭头] A7 -. TEXT .-> B7[虚线箭头,中间有字] A8 ==> B8[粗箭头] A9 == TEXT ==> B9[粗箭头,中间有字]

新增箭头

以下我的版本（0.10.11）皆不支持

A --o B

A -- x C

A o--o B B <--> C C x--x D

Length	1	2	3
Normal	---	----	-----
Normal with arrow	-->	--->	---->
Thick	===	====	=====
Thick with arrow	==>	===>	====>
Dotted	-.-	-..-	-...-
Dotted with arrow	-.->	-..->	-...->

graph LR A --o B --x C

graph TD 1([设备上电复位]) ==> 2[各板卡软件启动,等待被激活] -- 自动启动 --> 3[双机热备软件Keepalived启动] --> 4{根据Keepalived优先级配置,决策本设备是主机还是备机} 4 -.主机.-> 5[激活各板卡软件] --> 6[各软件被激活后,启动自身业务] --> 8[结束] 4 -.备机.-> 7["检测主备机心跳,主机发生异常时，主动升级为主机"] --> 8 id1["Special text 需要添加双引号（，）：#9829;"]

节点连接：

A --TEXT--> B --TEXT--> C

a --> b & c--> d

graph LR A --TEXT --> B --TEXT --> C a ---> B & b ---> d style A fill:#f9f,stroke:#333,stroke-width:4px style a fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharra: 5 5 linkStyle 4 stroke:#ff3,stroke-width:4px,color:red;

graph TB A & B ---> C & D c:::someclass a:::someclass --> b %% attach classname to the node using ::: operator classDef someclass fill:#f96,stroke:blue,stroke-width:4px; class id1,id2 someclass; id1:::someclass --text--> id2

graph LR A --> B[AABB] --> D class A cssClass;

子图及颜色

graph TB a1 --> b1 -.-> b2 subgraph 子图1 a2 --> b2 end %% 子图注释 subgraph gr2 [子图2] a3 --> b4 --text--> b1 end subgraph 子图3 a4 --> a2 --> b1 end

graph TB sq[square shape] --> c1((Circle shape)) subgraph 子图1 od>Odd shape] -- Two line<br/>comment --> ro Di{Diamond with<br/>line break} -.-> ro([Rounded<br/>square<br/>shape]) Di{Diamond with<br/>line break} ==> ro2([Rounded square shape]) end e:::orange --> od3>Really long text with linebreak] e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!) classDef green fill:#9f6, stroke:#333, stroke-width:2px; classDef orange fill:#f96, stroke:#333, stroke-width:4px; class sq,e green class Di orange

graph LR;
 A-->B;
 B-->C;
 C-->D;
 click A callback "Tooltip for a callback"
 click B "http://www.github.com" "This is a tooltip for a link"
 click A call callback() "Tooltip for a callback"
 click B href "http://www.github.com" "This is a tooltip for a link"

4. Gantt Charts

gantt todayMarker stroke-width:5px, stroke:#0f0, opacity:.5 dateFormat YYYY-MM-DD title Adding GANTT diagram functionality to mermaid excludes weekends %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".) section A section Completed task :done, des1, 2021-05-06,2021-05-08 Active task :active, des2, 2021-05-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, 2021-06-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, 3h Add gantt diagram to demo page :20h Add another diagram to demo page :48h

日期格式

dateFormat YYYY-MM-DD

Input Example Description:
YYYY 2014 4 digit year
YY 14 2 digit year
Q 1..4 Quarter of year. Sets month to first month in quarter.
M MM 1..12 Month number
MMM MMMM January..Dec Month name in locale set by moment.locale()
D DD 1..31 Day of month
Do 1st..31st Day of month with ordinal
DDD DDDD 1..365 Day of year
X 1410715640.579 Unix timestamp
x 1410715640579 Unix ms timestamp
H HH 0..23 24 hour time
h hh 1..12 12 hour time used with a A.
a A am pm Post or ante meridiem
m mm 0..59 Minutes
s ss 0..59 Seconds
S 0..9 Tenths of a second
SS 0..99 Hundreds of a second
SSS 0..999 Thousandths of a second
Z ZZ +12:00 Offset from UTC as +-HH:mm, +-HHmm, or Z

持续时间格式

axisFormat  %Y-%m-%d

%a - abbreviated weekday name.
%A - full weekday name.
%b - abbreviated month name.
%B - full month name.
%c - date and time, as "%a %b %e %H:%M:%S %Y".
%d - zero-padded day of the month as a decimal number [01,31].
%e - space-padded day of the month as a decimal number [ 1,31]; equivalent to %_d.
%H - hour (24-hour clock) as a decimal number [00,23].
%I - hour (12-hour clock) as a decimal number [01,12].
%j - day of the year as a decimal number [001,366].
%m - month as a decimal number [01,12].
%M - minute as a decimal number [00,59].
%L - milliseconds as a decimal number [000, 999].
%p - either AM or PM.
%S - second as a decimal number [00,61].
%U - week number of the year (Sunday as the first day of the week) as a decimal number [00,53].
%w - weekday as a decimal number [0(Sunday),6].
%W - week number of the year (Monday as the first day of the week) as a decimal number [00,53].
%x - date, as "%m/%d/%Y".
%X - time, as "%H:%M:%S".
%y - year without century as a decimal number [00,99].
%Y - year with century as a decimal number.
%Z - time zone offset, such as "-0700".
%% - a literal "%" character.

5. Class Diagrams

classDiagram Animal <|--Duck Animal <|--Fish Animal <|--Zebra Animal <|--Test Animal :+int age Animal :+isMamal() Animal :+mate() class Duck{ +String eakColor +swim() +quack() -cot dota } class Fish{ +String eakColor +swim() +quack() -cot dota } class Zebra{ +String eakColor +swim() +quack() -cot dota } class test{ sjin test() 测试 } class Test{ 测试1 测试2 测试3 测试4 测试1() +测试1 +测试1() +测试2() }

6. State Diagrams

stateDiagram [*] --> Still Still --> [*] Still --> Moving Moving --> Still Moving --> Crash Crash --> [*] New_point--> Still

7. Pie Charts

pie title 饼图 "Dog": 340 "Cat":290 "Rats":150

8. Requirement Diagrams

尝试过，我的版本（0.10.11）不支持