flowchart.js是在浏覽器和終端中運行的流程圖DSL和SVG渲染。節點和連接是分别定義的,因此可以重複使用節點,并可以快速更改連接。也可以在DSL中對節點和連接器樣式進行細微的更改。
Github示例
以下是一個簡單的示例(flowchart.js依賴raphael):
下面是一段帶有顔色的示例:
以下是一個完成的demo:
節點類型語法
- start
用作流從其開始的第一個節點。默認文本為“start”
- end
用作流結束的最後一個節點。默認文本為“end”
- operation
表示需要在流中進行操作:
- inputoutput
輸入輸出
- subroutine(子程序)
指示流中的子流程,并且應該有另一個流程圖記錄該子流程
- condition(條件)
允許條件或邏輯語句将流定向到兩個或多個路徑之一
- parallel
允許多個流程同時出現
總結
本文簡單介紹了flowchart.js在浏覽器中的的用法,它還可以在終端使用,如果你有需要在浏覽器或者終端繪制簡單的流程圖,那麼flowchart.js将會是你可以選擇的工具,感興趣的可以直接到官網文檔在線查看編寫效果,可從Github進入!
,