【Makedown Flow】使用 Flowchart.js 實(shí)現(xiàn)文本繪制簡(jiǎn)單 SVG 流程圖表
不同的 Blog 平臺(tái)對(duì) Makedown 的解析方式不一樣展哭。
簡(jiǎn)書(shū)的 Makedown 不支持 flow 語(yǔ)法酿雪，CSDN 的也差了一些安寺。
僅供參考：https://blog.csdn.net/wilson1068/article/details/86708610
SVG（Scalable Vector Graphics哈蝇，可縮放矢量圖形）
可縮放矢量圖形（英語(yǔ)：Scalable Vector Graphics弦赖，SVG）是一種基于可擴(kuò)展標(biāo)記語(yǔ)言（XML）喳挑，用于描述二維矢量圖形的圖形格式。SVG 由 W3C 制定掀抹，是一個(gè)開(kāi)放標(biāo)準(zhǔn)虐拓。
SVG 主要支持以下幾種顯示對(duì)象:
| 類型 | 示例 |
|---|---|
| 矢量顯示對(duì)象 | 矩形、圓傲武、橢圓蓉驹、多邊形、直線揪利、任意曲線 |
| 嵌入式外部圖形 | PNG态兴、JPEG、SVG 等 |
| 文字對(duì)象 |
Flow Chart（流程圖）
流程圖能夠直觀的表示一些處理邏輯和順序疟位，是表示算法思路的一種極好的方式瞻润。
千言萬(wàn)語(yǔ)不如一張圖。
流程圖可以分為以下四種類型：
- 文件流程圖
- 數(shù)據(jù)流程圖
- 系統(tǒng)流程圖
- 程序流程圖
一般來(lái)說(shuō)，流程圖的常用的表示有：
| 關(guān)鍵節(jié)點(diǎn) | 說(shuō)明 | 圖形表示 |
|---|---|---|
| 開(kāi)始 / 結(jié)束 | 代表一個(gè)流程開(kāi)始和結(jié)束 | 圓角矩形 |
| 處理 | 表示流程圖中的一個(gè)處理或者步驟 | 矩形 |
| 判斷 | 對(duì)一個(gè)條件進(jìn)行判斷抉擇 | 菱形 |
| 輸入 / 輸出 | 表示信息與外界的交互 | 平行四邊形 |
| 工作流方向 | 變成流程圖執(zhí)行邏輯 | 箭頭 |
| 預(yù)定義 | 表示決定下一個(gè)步驟的一個(gè)子進(jìn)程 | 兩個(gè)上下邊重合的嵌套矩形 |
其它常用的流程圖符號(hào)：
常見(jiàn)流程圖符號(hào)
flowchart.js
flowchart.js 是一個(gè)通過(guò)分析流程圖文本绍撞，繪制簡(jiǎn)單 SVG 圖像顯示流程圖的庫(kù)（JavaScript）正勒。
流程圖的組成是圖示+邏輯，所以 flowchart.js 存在元素的定義和元素的連接：
Flow 元素定義
元素定義形式：
成員=>類型: 內(nèi)容[:>鏈接]
示例：
id_start=>start: 這是一個(gè)開(kāi)始的圖例
id_operation=>operation: 這是一個(gè)操作的圖例楚午，你可以點(diǎn)擊跳轉(zhuǎn):>https://cn.bing.com
id_condition=>condition: 這是一個(gè)判斷的圖例
id_end=>end: 這是一個(gè)結(jié)束的圖例昭齐，但我可
以隨便換行Ｄ蛘小矾柜！
上面的 [ ] 表示可選擇添加。
::: alert-info
注意：
上面有空格的地方可以輸入多個(gè)空格（至少要有一個(gè)空格）就谜。
但是沒(méi)有空格的地方一定要連起來(lái)（不能添加空格）怪蔑。
:::
表示定義一個(gè)流程圖節(jié)點(diǎn)類型的成員
支持的元素：
| 元素 | 說(shuō)明 | 圖例 |
|---|---|---|
| start | 開(kāi)始 | 圓角矩形 |
| end | 結(jié)束 | 圓角矩形 |
| operation | 操作 | 矩形 |
| subroutine | 預(yù)定義（子程序） | 兩個(gè)上下邊重合的嵌套矩形 |
| condition | 判斷（條件） | 菱形 |
| inputoutput | 輸入輸出 | 平行四邊形 |
| (content) | 圖例上顯示的文本內(nèi)容（不是可定義的圖例類型），可以換行 | |
| (url) | 圖例文本上的超鏈接（不是可定義的圖例類型）丧荐，可選添加 |
Flow 元素連接
元素連接形式：
成員[(yes | no)]->成員[->成員[(yes | no)]]
id_start=>start: 這是一個(gè)開(kāi)始的圖例
id_operation=>operation: 這是一個(gè)操作的圖例缆瓣，你可以點(diǎn)擊跳轉(zhuǎn)鏈接:>https://cn.bing.com
id_condition=>condition: 這是一個(gè)判斷的圖例
id_end=>end: 這是一個(gè)結(jié)束的圖例，但
我可以隨便換行：缤场弓坞！
示例：
id_start->id_operation->id_condition
id_condition(yes)->id_end
id_condition(no)->id_operation
上面的 [ ] 僅在成員是 condition（判斷類型）時(shí)才能添加，而且只能是小寫(xiě)的 yes 或 no车荔。
Makedown 中示例 Flow 語(yǔ)法
主要框架
```flow
元素定義
元素連接
```
```flow
id_start=>start: 開(kāi)始(start)
id_end=>end: 結(jié)束(end)渡冻，可以點(diǎn)擊:>https://cn.bing.com
id_operation=>operation: 操作(operation)
id_subroutine=>subroutine: 子程序(subroutine)
id_condition=>condition: 判斷(condition)
id_inputoutput=>inputoutput: 輸入輸出(inputoutput)
id_start->id_operation->id_condition
id_condition(yes)->id_inputoutput->id_end
id_condition(no)->id_subroutine->id_inputoutput
```
id_start=>start: 開(kāi)始(start)
id_end=>end: 結(jié)束(end)，可以點(diǎn)擊:>https://cn.bing.com
id_operation=>operation: 操作(operation)
id_subroutine=>subroutine: 子程序(subroutine)
id_condition=>condition: 判斷(condition)
id_inputoutput=>inputoutput: 輸入輸出(inputoutput)
id_start->id_operation->id_condition
id_condition(yes)->id_inputoutput->id_end
id_condition(no)->id_subroutine->id_inputoutput
```flow
id_start=>start: 這是一個(gè)開(kāi)始的圖例
id_operation=>operation: 這是一個(gè)操作的圖例忧便，你可以點(diǎn)擊跳轉(zhuǎn):>https://cn.bing.com
id_condition=>condition: 這是一個(gè)判斷的圖例
id_end=>end: 這是一個(gè)結(jié)束的圖例族吻，但我可
以隨便換行！珠增！
id_start->id_operation->id_condition
id_condition(yes)->id_end
id_condition(no)->id_operation
```
id_start=>start: 這是一個(gè)開(kāi)始的圖例
id_operation=>operation: 這是一個(gè)操作的圖例超歌，你可以點(diǎn)擊跳轉(zhuǎn):>https://cn.bing.com
id_condition=>condition: 這是一個(gè)判斷的圖例
id_end=>end: 這是一個(gè)結(jié)束的圖例，但我可
以隨便換行５俳獭巍举！
id_start->id_operation->id_condition
id_condition(yes)->id_end
id_condition(no)->id_operation
