mermaid 語法

mermaid 語法

mermaid

usage

官網地址:http://knsv.github.io/mermaid/index.html

圖

例如從左到右的一個有向圖

graph LR;
A[aa bb]-->B(wo);
A-->C((我是C));
B-->D>我是D];
C-->D;
D-->E{我是E};
C-->E;
2-->E;
_-->E;

1. 第一行的graph LR中graph指定是一個圖，第二個LR指定圖的方向，全部的方向關鍵詞爲:

   • TB - top bottom

   • BT - bottom top

   • RL - right left

   • LR - left right

   • TD - same as TB

2. 以後的A,B,C等都是節點的標識（標識中不能使用空格）

3. 節點默認只顯示標識,但也能夠經過以下方法控制其顯示

   • A[aa bb] 顯示字符串aa bb的方框

   • B(wo) 顯示字符串wo的圓角框

   • C((我是C)) 顯示我是C字符串的圓圈

   • D>我是D] 顯示我是D的半方框

   • E{我是E} 顯示我是E的正方形框

4. 連線能夠選擇以下形式:

   • A-->B 箭頭

   • A--B 無箭頭線

   • A--hh dd--B或者A--|hh dd|B 線之間能夠添加註釋

   • A-.->B 虛線箭頭

   • A-. hh .->B 添加了註釋的虛線箭頭

   • A==>B 加粗的箭頭

   • A== hh ==>B 加註釋加粗的箭頭

5. 子圖可使用subgraph id定義

graph TB
 subgraph one
 a1-->a2
 end
 subgraph two
 b1-->b2
 end
 subgraph three
 c1-->c2
 end
 c1-->a2

6. 使用以下語法給節點添加點擊行爲

click nodeId callback

callback是javascript回調函數

7. 修改節點的顯示樣式

graph LR
 id1(Start)-->id2(Stop)
 style id1 fill:#f9f,stroke:#333,stroke-width:4px;
 style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5;

或者使用以下方式修改class

class nodeId1 className;
class nodeId1,nodeId2 className;
classDef default fill:#f9f,stroke:#333,stroke-width:4px;

時序圖

以下是一個基本的時序圖

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!

1. 時序圖使用sequenceDiagram關鍵詞聲明

2. 參與者使用participant聲明

3. 消息聲明是使用[參與者][發送方式][參與者]:消息內容形式聲明
   發送方式有以下幾種:

   • -> 無箭頭的線

   • --> 無箭頭的虛線

   • ->> 有箭頭的實線

   • -->> 有箭頭虛線

   • -x 有十字叉的實線

   • --x 有十字叉的虛線

4. 能夠經過ote right of [參與者]: 信息的方式添加備註(多行信息請使用<br/>)

5. 添加循環

loop Loop text
... statements ...
end

5. 添加判斷使用以下語法
   有選擇的:

alt Describing text
... statements ...
else
... statements ...
end

肯定的:

opt Describing text
... statements ...
end

示例:

 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

甘特圖

示例:

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

1. 使用關鍵詞gantt聲明甘特圖

2. 使用關鍵詞title聲明標題

3. 使用關鍵詞section聲明板塊

4. 板塊後是任務的名稱，任務類型，開始時間，持續時間等

時間參數

參數	示例	含義
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