復(fù)制以下代碼使用 typora 的源碼模式粘貼到編輯器中查看效果:
1、橫向流程圖源碼格式:
```mermaid
graph LR
A[方形] -->B(圓角)
? ? B --> C{條件a}
? ? C -->|a=1| D[結(jié)果1]
? ? C -->|a=2| E[結(jié)果2]
? ? F[橫向流程圖]
```
2旧噪、豎向流程圖源碼格式:
```mermaid
graph TD
A[方形] --> B(圓角)
? ? B --> C{條件a}
? ? C --> |a=1| D[結(jié)果1]
? ? C --> |a=2| E[結(jié)果2]
? ? F[豎向流程圖]
```
3吨娜、標(biāo)準(zhǔn)流程圖源碼格式:
```flow
st=>start: 開始框
op=>operation: 處理框
cond=>condition: 判斷框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 輸入輸出框
e=>end: 結(jié)束框
st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op
```
4、標(biāo)準(zhǔn)流程圖源碼格式(橫向):
```flow
st=>start: 開始框
op=>operation: 處理框
cond=>condition: 判斷框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 輸入輸出框
e=>end: 結(jié)束框
st(right)->op(right)->cond
cond(yes)->io(bottom)->e
cond(no)->sub1(right)->op
```
5淘钟、UML時序圖源碼樣例:
```sequence
對象A->對象B: 對象B你好嗎?(請求)
Note right of 對象B: 對象B的描述
Note left of 對象A: 對象A的描述(提示)
對象B-->對象A: 我很好(響應(yīng))
對象A->對象B: 你真的好嗎宦赠?
```
6、UML時序圖源碼復(fù)雜樣例:
```sequence
Title: 標(biāo)題:復(fù)雜使用
對象A->對象B: 對象B你好嗎?(請求)
Note right of 對象B: 對象B的描述
Note left of 對象A: 對象A的描述(提示)
對象B-->對象A: 我很好(響應(yīng))
對象B->小三: 你好嗎
小三-->>對象A: 對象B找我了
對象A->對象B: 你真的好嗎米母?
Note over 小三,對象B: 我們是朋友
participant C
Note right of C: 沒人陪我玩
```
7袱瓮、UML標(biāo)準(zhǔn)時序圖樣例:
```mermaid
%% 時序圖例子,-> 直線,-->虛線爱咬,->>實線箭頭
? sequenceDiagram
? ? participant 張三
? ? participant 李四
? ? 張三->王五: 王五你好嗎尺借?
? ? loop 健康檢查
? ? ? ? 王五->王五: 與疾病戰(zhàn)斗
? ? end
? ? Note right of 王五: 合理 食物 <br/>看醫(yī)生...
? ? 李四-->>張三: 很好!
? ? 王五->李四: 你怎么樣?
? ? 李四-->王五: 很好!
```
8、甘特圖樣例:
```mermaid
%% 語法示例
? ? ? ? gantt
? ? ? ? dateFormat? YYYY-MM-DD
? ? ? ? title 軟件開發(fā)甘特圖
? ? ? ? section 設(shè)計
? ? ? ? 需求? ? ? ? ? ? ? ? ? ? ? :done,? ? des1, 2014-01-06,2014-01-08
? ? ? ? 原型? ? ? ? ? ? ? ? ? ? ? :active,? des2, 2014-01-09, 3d
? ? ? ? UI設(shè)計? ? ? ? ? ? ? ? ? ? :? ? ? ? des3, after des2, 5d
? ? 未來任務(wù)? ? ? ? ? ? ? ? ? ? :? ? ? ? des4, after des3, 5d
? ? ? ? section 開發(fā)
? ? ? ? 學(xué)習(xí)準(zhǔn)備理解需求? ? ? ? ? ? ? ? ? ? ? :crit, done, 2014-01-06,24h
? ? ? ? 設(shè)計框架? ? ? ? ? ? ? ? ? ? ? ? ? ? :crit, done, after des2, 2d
? ? ? ? 開發(fā)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? :crit, active, 3d
? ? ? ? 未來任務(wù)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? :crit, 5d
? ? ? ? 耍? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? :2d
? ? ? ? section 測試
? ? ? ? 功能測試? ? ? ? ? ? ? ? ? ? ? ? ? ? ? :active, a1, after des3, 3d
? ? ? ? 壓力測試? ? ? ? ? ? ? ? ? ? ? ? ? ? ? :after a1? , 20h
? ? ? ? 測試報告? ? ? ? ? ? ? ? ? ? ? ? ? ? ? : 48h
```
效果圖如下: