作者：黃永剛

mermaid簡介

當撰寫文檔的時候，對于流程圖的生成大多使用Visio等繁重的工具，沒有一種輕便的工具能夠畫圖從而簡化文檔的編寫，就像markdown那樣。

mermaid解決這個痛點，這是一個類似markdown語法的腳本語言，通過JavaScript實現圖表的生成。
先來看個例子:

1.流程圖(flowchart)

graph LR; 　　A-->B; 　　A-->C; 　　B-->D; 　　C-->D;

生成的圖表如下所示：

2. 時序圖(sequence diagram)

sequenceDiagramparticipant Aliceparticipant BobAlice->John:Hello John, how are you?loop HealthcheckJohn->John:Fight against hypochondriaendNote right of John:Rational thoughts <br/>prevail...John-->Alice:Great!John->Bob: How about you?Bob-->John: Jolly good!

生成的圖表如下所示：

3.甘特圖(gantt diagram)

ganttdateFormat　YYYY-MM-DDtitle Adding GANTT diagram functionality to mermaidsection A sectionCompleted task　　:done, des1, 2014-01-06,2014-01-08Active task 　　　　:active, des2, 2014-01-09, 3dfuture task 　　　　:　　　 des3, after des2, 5dfuture task2　　　　:　　　 des4, after des3, 5dsection Critical tasksCompleted task in the critical line　:crit, done, 2014-01-06,24hImplement parser and json　　　　　　:crit, done, after des1, 2dCreate tests for parser　　　　　　　:crit, active, 3dFuture task in critical line　　　　　:crit, 5dCreate tests for renderer　　　　　　:2dAdd to ,mermaid　　　　　　　　　　　:1d

生成的表如下：

---

下游項目

Mermaid 是由Knut Sveidqbist發(fā)起旨在輕便化的文檔撰寫。所有開發(fā)者:開發(fā)者列表

• Gitbook-plugin
• Light table
• Confluence plugin
• Using mermaid via docpad
• Using mermaid in Jekvll
• Using mermaid via Octopress
• Mardown editor Haroopad
• Plugin for atom
• Markdown Plus
• LightPaper 1.2+
• Vim Plugin
  以上的這些都有集成mermaid或者開發(fā)相關的插件。

Graph

graph LRA --> B

這是申明一個由左到右，水平向右的圖。\
可能方向有：
- TB - top bottom
- BT - bottom top
- RL - right left
- LR - left right
- TD - same as TB

---

節(jié)點與形狀

默認節(jié)點

graph LR
id1

注意：’id’顯示在節(jié)點內部。

文本節(jié)點

graph LR id[This is the text in the box];

圓角節(jié)點

graph LR id(This is the text in the box);

圓節(jié)點(The form of a circle)

graph LR id((This is the text in the circle));

非對稱節(jié)點(asymetric shape)

graph LR id>This is the text in the box]

菱形節(jié)點(rhombus)

graph LR id{This is the text in the box}

---

連接線

節(jié)點間的連接線有多種形狀，而且可以在連接線中加入標簽：

箭頭形連接

graph LR;A-->B;

開放行連接

graph LR A --- B

標簽連接

graph LR A -- This is the label text --- B;

箭頭標簽連接

A–>|text|B\
或者\
A– text –>B

graph LRA-- text -->B

虛線(dotted link,點連線)

-.->

graph LR A-.->B

-.-.

graph LR A-.-.B

標簽虛線

-.text.->

graph LR A-.text.->B

粗實線

==>

graph LR A==>B

===

graph LR A===B

標簽粗線

=\=text\==>

graph LR A==text==>B

=\=text\===

graph LR A==text===B

---

特殊的語法

使用引號可以抑制一些特殊的字符的使用，可以避免一些不必要的麻煩。

graph LR\
d1[“This is the (text) in the box”]

graph LR d1["This is the (text) in the box"]

html字符的轉義字符

轉義字符的使用語法：
流程圖定義如下：

graph LR\
A[“A double quote:#quot;”] –> B[“A dec char:#9829;”]

渲染后的圖如下：

graph LRA["A double quote:#quot;"]-->B["A dec char:#9829;"]

子圖(Subgraphs)

subgraph title\
graph definition\
end

示例：

graph TBsubgraph onea1 --> a2ensubgraph twob2 --> b2endsubgraph threec1 --> c2endc1 --> a2

結果：

基礎fontawesome支持

如果想加入來自frontawesome的圖表字體,需要像frontawesome網站上那樣引用的那樣。\
詳情請點擊：fontawdsome

引用的語法為：++fa:#icon class name#++

graph TDB["fa:fa-twitter for peace"]B-->C[fa:fa-ban forbidden]B-->D(fa:fa-spinner);B-->E(A fa:fa-camerra-retro perhaps?);

渲染圖如下：

graph TDB["fa:fa-twitter for peace"]B-->C[fa:fa-ban forbidden]B-->D(fa:fa-spinner);B-->E(A fa:fa-camera-retro perhaps?);

以上reference：
1.mermaid docs

---

第二部分—圖表(graph)

---

定義連接線的樣式

graph LRid1(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;

渲染結果：

graph LRid1(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;

備注：這些樣式參考CSS樣式。

樣式類

為了方便樣式的使用，可以定義類來使用樣式
類的定義示例：

classDef className fill:#f9f,stroke:#333,stroke-width:4px;

對節(jié)點使用樣式類：

class nodeId className;

同時對多個節(jié)點使用相同的樣式類：

class nodeId1,nodeId2 className;

可以在CSS中提前定義樣式類，應用在圖表的定義中。

graph LRA-->B[AAABBB];B-->D;class A cssClass;

默認樣式類：\
當沒有指定樣式的時候，默認采用。

classDef default fill:#f9f,stroke:#333,stroke-width:4px;

示例：

graph LRclassDef default fill:#f90,stroke:#555,stroke-width:4px;id1(Start)-->id2(Stop)

結果：

graph LR classDef default fill:#f90,stroke:#555,stroke-width:4px; id1(Start)-->id2(Stop)

序列圖(sequence diagram)1

序列圖

示例：

sequenceDiagramAlice->>John: Hello John, how are you ?John-->>Alice: Great!Alice--->>John: Huang,you are better .John-->>Alice: yeah, Just not bad. sequenceDiagramAlice->>John: Hello John, how are you ?John-->>Alice: Great!Alice->>John: Hung,you are better .John-->>Alice: yeah, Just not bad.

觀察上面的圖，如果想讓John出現在前面，如何控制，mermaid通過設定參與者(participants)的順序控制二者的順序。上面的圖可以做如下修改：

sequenceDiagram\
　　participant John\
　　participant Alice\
　　Alice->>John:Hello John,how are you?\
　　John–>>Alice:Great!

sequenceDiagramparticipant Johnparticipant AliceAlice-xJohn:Hello John,how are you?John-->>Alice:Great!

消息的語法：
　　實線或者虛線的使用：
[Actor][Arrow][Actor]:Message text\
Arrow的六種樣式：

• ->
• –>
• ->>
• –>>
• -x
• –x

示例：

sequenceDiagramAlice->John: Hello John, how are you ?John-->Alice:Great!Alice->>John: dont borther me !John-->>Alice:Great!Alice-xJohn: wait!John--xAlice: Ok!

便簽

給序列圖增加便簽：\
具體規(guī)則：\
[right of | left of | over][Actor]:Text\
示例：

sequenceDiagramparticipant JohnNote left of John: Text in note

結果：

跨越兩個Actor的便簽：

sequenceDiagramAlice->John:Hello John, how are you?Note over Alice,John:A typical interaction sequenceDiagram Alice->>John:Hello John, how are you? Note over Alice,John:A typical interaction

循環(huán)Loops

在序列圖中，也可以使用循環(huán)，具體規(guī)則如下：

loop Loop text ... statements... end

示例：

sequenceDiagramAlice->>John: Hello!loop Reply every minuteJohn->>Alice:Great!end

渲染結果：

選擇ALT

在序列圖中選擇的表達。規(guī)則如下：

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

或者使用opt(推薦在沒有else的情況下使用)

opt Describing text ...statements... end

示例：

sequenceDiagramAlice->>Bob: Hello Bob, how are you?alt is sickBob->>Alice:not so good :(else is wellBob->>Alice:Feeling fresh like a daisy:)endopt Extra responseBob->>Alice:Thanks for askingend

渲染結果如下：

---

甘特圖(gantt)2

甘特圖是一類條形圖，由Karol Adamiechi在1896年提出, 而在1910年Henry Gantt也獨立的提出了此種圖形表示。通常用在對項目終端元素和總結元素的開始及完成時間進行的描述。

示例：

gantt dateFormat YYYY-MM-DDsection S1 T1: 2014-01-01, 9dsection S2 T2: 2014-01-11, 9dsection S3 T3: 2014-01-02, 9d gantt dateFormat YYYY-MM-DD section S1 T1: 2014-01-01, 9d section S2 T2: 2014-01-11, 9d section S3 T3: 2014-01-02, 9d

先來看一個大的例子：

ganttdateFormat YYYY-MM-DDtitle Adding GANTT diagram functionality to mermaidsection A sectionCompleted task :done, des1, 2014-01-06,2014-01-08Active task :active, des2, 2014-01-09, 3dFuture task : des3, after des2, 5dFuture task2 : des4, after des3, 5dsection Critical tasksCompleted task in the critical line :crit, done, 2014-01-06,24hImplement parser and jison :crit, done, after des1, 2dCreate tests for parser :crit, active, 3dFuture task in critical line :crit, 5dCreate tests for renderer :2dAdd to mermaid :1dsection DocumentationDescribe gantt syntax :active, a1, after des1, 3dAdd gantt diagram to demo page :after a1 , 20hAdd another diagram to demo page :doc1, after a1 , 48hsection Last sectionDescribe gantt syntax :after doc1, 3dAdd gantt diagram to demo page : 20hAdd another diagram to demo page : 48h

獲得的圖渲染后如下：

header 1header 2

title	標題
dateFormat	日期格式
section	模塊
Completed	已經完成
Active	當前正在進行
Future	后續(xù)待處理
crit	關鍵階段
日期缺失	默認從上一項完成后

關于日期的格式可以參考：
- string-format
- Time-Formatting

Demo

graph TBsq[Square shape] --> ci((Circle shape))subgraph A subgraphdi{Diamond with line break} -.-> ro(Rounded)di==>ro2(Rounded square shape)ende --> od3>Really long text with linebreak<br>in an Odd shape]cyr[Cyrillic]-->cyr2((Circle shape Начало));classDef green fill:#9f6,stroke:#333,stroke-width:2px;classDef orange fill:#f96,stroke:#333,stroke-width:4px;class sq,e greenclass di orange

reference

mermaid docs

---

本文原創(chuàng)首發(fā)于公眾號：老王和他的IT界朋友們

微信掃描關注微信號：（原創(chuàng)投稿有驚喜！！！）

---

序列圖的樣式的定制需要在可以渲染CSS的地方才可使用，具體可以查閱參考。 ?

甘特圖的樣式的定制需要在可以渲染CSS的地方才可使用，具體可以查閱參考。 ?

轉載于:https://www.cnblogs.com/wuyida/p/6301240.html

總結

以上是生活随笔為你收集整理的markdown绘图插件----mermaid简介的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。