mermaid 語法
官網地址: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;
第一行的
graph LR中graph指定是一個圖，第二個LR指定圖的方向，所有的方向關鍵詞為:TB - top bottom
BT - bottom top
RL - right left
LR - left right
TD - same as TB
之后的A,B,C等都是節點的標識（標識中不能使用空格）
節點默認只顯示標識,但也可以通過如下方法控制其顯示
A[aa bb]顯示字符串aa bb的方框B(wo)顯示字符串wo的圓角框C((我是C))顯示我是C字符串的圓圈D>我是D]顯示我是D的半方框E{我是E}顯示我是E的正方形框
連線可以選擇如下形式:
A-->B箭頭A--B無箭頭線A--hh dd--B或者A--|hh dd|B線之間可以添加注釋A-.->B虛線箭頭A-. hh .->B添加了注釋的虛線箭頭A==>B加粗的箭頭A== hh ==>B加注釋加粗的箭頭
子圖可以使用
subgraph id定義
graph TB
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
c1-->a2
使用如下語法給節點添加點擊行為
click nodeId callback
callback是javascript回調函數
修改節點的顯示樣式
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!
時序圖使用
sequenceDiagram關鍵詞聲明參與者使用
participant聲明消息聲明是使用
[參與者][發送方式][參與者]:消息內容形式聲明
發送方式有如下幾種:->無箭頭的線-->無箭頭的虛線->>有箭頭的實線-->>有箭頭虛線-x有十字叉的實線--x有十字叉的虛線
可以通過
ote right of [參與者]: 信息的方式添加備注(多行信息請使用<br/>)添加循環
loop Loop text
... statements ...
end
添加判斷使用如下語法
有選擇的:
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
使用關鍵詞
gantt聲明甘特圖使用關鍵詞
title聲明標題使用關鍵詞
section聲明板塊板塊后是任務的名稱，任務類型，開始時間，持續時間等
時間參數
| 參數 | 示例 | 含義 |
|---|---|---|
| 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 |