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$