Markdown流程圖：扮演構建思維框架的角色

一、如何渲染Markdown流程圖

1、安裝插件

npm install -g markdown-it

2、編寫Markdown源代碼

```flow
st=>start: 開始
e=>end: 結束
op=>operation: My Operation
cond=>condition: Yes or No?
io=>inputoutput: catch something...
st->op->cond
cond(yes)->io->e
cond(no)->op
```

3、使用markdown-it渲染Markdown源代碼：

var md = require('markdown-it')();
var result = md.render(`\`\`\`flow
    st=>start: 開始
    e=>end: 結束
    op=>operation: My Operation
    cond=>condition: Yes or No?
    io=>inputoutput: catch something...
    st->op->cond
    cond(yes)->io->e
    cond(no)->op
\`\`\``);
console.log(result);

4、渲染結果：

<div class="mermaid">
flowchat
st((開始))->op((My Operation))->cond((Yes
or No?))
cond->io>e((結束))
cond(no)->op
</div>

二、Markdown大戰略流程圖

在大戰略雲端IDE中，Markdown流程圖的渲染已經內置，只需要以下簡單的步驟

1、在Markdown文檔中輸入如下代碼：

```flow
    st=>start: 開始
    op1=>operation: 操作1
    op2=>operation: 操作2
    e=>end: 結束
    st->op1->op2->e
```

2、預覽結果

<div class="mermaid">
flowchat
st((開始))->op1((操作1))->op2((操作2))->e((結束))
</div>

三、des流程圖

1、安裝des並創建工作目錄

npm install -g des
mkdir des-workspace
cd des-workspace

2、創建des源代碼文件 test.des

statechart {
    State1 -> State2 : Event1 / Action1
    State2 -> State3 : Event2 / Action2
    State3 -> State1 : Event3 / Action3
}

3、將des源代碼編譯為svg格式的圖片

des test.des test.svg

4、在Markdown中引用該svg圖片

![](./test.svg)

四、MD流程圖

MD流程圖是基於純文本的流程圖，輕便而靈活

1、安裝MDFlow圖插件

npm install mdflow --save

2、在Markdown中輸入以下代碼：

sequenceDiagram
    A->>B: 請求數據
    B->>C: 處理數據
    C-->>A: 返迴響應

3、預覽效果：

<div class="mermaid">
sequenceDiagram
    A->>B: 請求數據
    B->>C: 處理數據
    C-->>A: 返迴響應
</div>

五、流程圖PRD

PRD中的流程圖常用於闡述產品的功能流程和邏輯

1、用PRD工具畫出流程圖並導出jpg、png等格式的圖片

2、在Markdown中引用該圖片

![](./flowchart.jpg)

六、MD畫流程圖

MD畫流程圖同MD流程圖類似，是基於純文本的流程圖

1、安裝mdp插件

npm install mdp --save

2、在Markdown中輸入以下代碼：

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

3、預覽結果：

<div class="mermaid">
graph LR
    A-->B
    B-->C
    C-->D
    D-->E
</div>

七、流程圖HTML

HTML中的流程圖同PRD類似，是為了展示產品功能流程和邏輯

1、畫出HTML流程圖並導出圖片，或使用HTML流程圖工具生成