Sequence（時序圖）
依托於js-sequence實現
簡單樣例
對象A->對象B: 對象B你好嗎?（請求）
Note right of 對象B: 對象B的描述
Note left of 對象A: 對象A的描述(提示)
對象B-->對象A: 我很好(響應)
對象A->對象B: 你真的好嗎？
復雜樣例
Title: 標題：復雜使用
對象A->對象B: 對象B你好嗎?（請求）
Note right of 對象B: 對象B的描述
Note left of 對象A: 對象A的描述(提示)
對象B-->對象A: 我很好(響應)
對象B->小三: 你好嗎
小三-->>對象A: 對象B找我了
對象A->對象B: 你真的好嗎？
Note over 小三,對象B: 我們是朋友
participant C
Note right of C: 沒人陪我玩
flow（流程圖）
依托於flowchart.js實現
橫向
st=>start: 開始框
op=>operation: 處理框
cond=>condition: 判斷框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 輸入輸出框
e=>end: 結束框
st(right)->op(right)->cond
cond(yes)->io(bottom)->e
cond(no)->sub1(right)->op
豎向
st=>start: 開始框
op=>operation: 處理框
cond=>condition: 判斷框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 輸入輸出框
e=>end: 結束框
st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op
mermaid
結合Mermaid，支持了Mermaid模式下的時序圖(sequence)，流程圖(flowchart)和甘特圖(Gantt)
時序圖
樣例
%% 時序圖例子,-> 直線，-->虛線，->>實線箭頭 sequenceDiagram participant 張三 participant 李四 張三->王五: 王五你好嗎？ loop 健康檢查 王五->王五: 與疾病戰斗 end Note right of 王五: 合理 食物 <br/>看醫生... 李四-->>張三: 很好! 王五->李四: 你怎么樣? 李四-->王五: 很好!
流程圖
橫向
graph LR A[方形] -->B(圓角) B --> C{條件a} C -->|a=1| D[結果1] C -->|a=2| E[結果2] F[橫向流程圖]
豎向
graph TD A[方形] -->B(圓角) B --> C{條件a} C -->|a=1| D[結果1] C -->|a=2| E[結果2] F[豎向流程圖]
甘特圖
樣例
%% 語法示例 gantt dateFormat YYYY-MM-DD title 軟件開發甘特圖 section 設計 需求 :done, des1, 2014-01-06,2014-01-08 原型 :active, des2, 2014-01-09, 3d UI設計 : des3, after des2, 5d 未來任務 : des4, after des3, 5d section 開發 學習准備理解需求 :crit, done, 2014-01-06,24h 設計框架 :crit, done, after des2, 2d 開發 :crit, active, 3d 未來任務 :crit, 5d 耍 :2d section 測試 功能測試 :active, a1, after des3, 3d 壓力測試 :after a1 , 20h 測試報告 : 48h
樣例二
%% Example with selection of syntaxes 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