flowchar.js是一個javascript庫，可以簽到很多應用中直接使用，所以在很多類型的平臺都是直接支持的，比如CSDN的markdown語法也是支持flowchart.js的，這篇文章的flowchart.js示例也都是使用mermaid方式直接指定並進行顯示的。這樣，用戶就可以直接已DSL的方式非常容易地進行流程圖的繪製了。
概要信息
flowchart.js的概要信息如下表所示：
| 項目 | 說明 |
|---|---|
| 官網 | http://flowchart.js.org/ |
| 開源/閉源 | 開源 |
| 源碼管理地址 | https://github.com/adrai/flowchart.js/releases |
| License類別 | MIT License |
| 開發語言 | javascript |
| 當前穩定版本 | 1.13.0 （2019/11/28） |
使用方法
flowchart.js和其他的javascript庫一樣，直接引用即可使用，本文同時會介紹一下如何通過diagrams來創建flowchart.js格式的svg文件。安裝diagrams直接使用npm即可，安裝命令如下所示：
執行命令：npm install -g diagrams
安裝日誌示例：
liumiaocn:~ liumiao$ npm install -g diagrams
...省略
+ [email protected]
added 387 packages from 258 contributors in 564.37s
liumiaocn:~ liumiao$
flowchart.js的常見類型
| 流程圖節點 | 圖形類型 | 說明 |
|---|---|---|
| 開始 | 圓角矩形 | 流程圖的開始 |
| 結束 | 圓角矩形 | 流程圖的結束 |
| 處理操作 | 矩形 | 流程圖中的處理或者步驟 |
| 條件判斷 | 菱形 | 需要根據條件進行判斷 |
| 輸入 | 平行四邊形 | 與外界信息的輸入交互 |
| 輸出 | 平行四邊形 | 與外界信息的輸出交互 |
| 預定義過程 | 上下邊重合的嵌套矩形 | 子過程或者作業指引 |
| 工作流方向 | 箭頭 | 流程執行邏輯順序 |
使用說明
關鍵字
| 流程圖節點 | 圖形類型 | 類型關鍵字 |
|---|---|---|
| 開始 | 圓角矩形 | start |
| 結束 | 圓角矩形 | end |
| 處理操作 | 矩形 | operation |
| 條件判斷 | 菱形 | condition |
| 輸入 | 平行四邊形 | inputoutput |
| 輸出 | 平行四邊形 | inputoutput |
| 預定義過程 | 上下邊重合的嵌套矩形 | subroutine |
| 工作流方向 | 箭頭 | -> |
定義格式
定義格式：節點名稱=>類型: 顯示內容[:>鏈接]
定義格式說明：
- 鏈接爲可選設定，可以設定點擊跳轉的鏈接地址, 另外[]並不是輸入的內容，只是表示爲可選內容
- 節點名稱爲連線關聯時用到
- 顯示內容爲流程圖上顯示的節點信息。
- 注意類型和顯示內容之間的: 後的空格不要丟失，否則可能無法正常顯示
使用示例：開始/結束
此處已CSDN給出的示例進行說明：
- flowchart代碼信息
flowchat
start=>start: 開始
e=>end: 結束
start->e
- 顯示示例
使用示例：處理操作
- flowchart代碼信息
flowchat
start=>start: 開始
end=>end: 結束
operation=>operation: 我的操作
start->operation->end
- 顯示示例
使用示例：條件操作
- flowchart代碼信息
flowchat
start=>start: 開始
end=>end: 結束
operation=>operation: 我的操作
condition=>condition: 確認
start->operation->condition->end
condition(yes)->end
condition(no)->operation
- 顯示示例
使用示例：輸入輸出
- flowchart代碼信息
flowchat
start=>start: 開始
end=>end: 結束
input=>inputoutput: 我的輸入
output=>inputoutput: 我的輸出
operation=>operation: 我的操作
condition=>condition: 確認
start->input->operation->output->condition
condition(yes)->end
condition(no)->operation
- 顯示示例
使用示例：子過程
- flowchart代碼信息
flowchat
start=>start: 開始
end=>end: 結束
input=>inputoutput: 我的輸入
output=>inputoutput: 我的輸出
operation=>operation: 我的操作
condition=>condition: 確認
subroutine=>subroutine: 我的子過程
start->input->operation->output->condition
condition(yes)->end
condition(no)->subroutine(right)->operation
- 顯示示例
注意事項：subroutine(right)是缺省寫法，等同於subroutine，注意寫成subroutine(left)後效果如下所示：
使用示例：鏈接跳轉
- flowchart代碼信息
flowchat
start=>start: 開始
end=>end: 結束
input=>inputoutput: 我的輸入
output=>inputoutput: 我的輸出
operation=>operation: 我的操作
condition=>condition: 確認
subroutine=>subroutine: 我的子過程
jump2blog=>operation: 跳轉頁面 :>https://liumiaocn.blog.csdn.net/
start->input->operation->output->condition
condition(yes)->jump2blog->end
condition(no)->subroutine(right)->operation
- 顯示示例
使用diagrams生成svg
事前準備
使用上述的flowchart代碼，詳細如下所示：
liumiaocn:flowchart liumiao$ cat input.flowchart
start=>start: 開始
end=>end: 結束
input=>inputoutput: 我的輸入
output=>inputoutput: 我的輸出
operation=>operation: 我的操作
condition=>condition: 確認
subroutine=>subroutine: 我的子過程
jump2blog=>operation: 跳轉頁面 :>https://liumiaocn.blog.csdn.net/
start->input->operation->output->condition
condition(yes)->jump2blog->end
condition(no)->subroutine(right)->operation
liumiaocn:flowchart liumiao$
生成svg圖形
liumiaocn:flowchart liumiao$ diagrams flowchart input.flowchart flowchart.svg
liumiaocn:flowchart liumiao$ ls flowchart.svg
flowchart.svg
liumiaocn:flowchart liumiao$
結果確認
svg有很多種方式確認結果，最簡單的直接通過html頁面嵌入通過瀏覽器進行確認，準備如下HTML頁面，雙擊打開即可：
liumiaocn:flowchart liumiao$ ls
flowchart.svg input.flowchart svg.html
liumiaocn:flowchart liumiao$ cat svg.html
<html>
<body>
<iframe src="flowchart.svg" style="width:100%;" height="900px"></iframe>
</body>
</html>
liumiaocn:flowchart liumiao$
