首页
/
每日頭條
/
生活
/
svg動态圖制作
svg動态圖制作
更新时间:2024-11-11 16:00:04
介紹

flowchart.js是在浏覽器和終端中運行的流程圖DSL和SVG渲染。節點和連接是分别定義的,因此可以重複使用節點,并可以快速更改連接。也可以在DSL中對節點和連接器樣式進行細微的更改。


svg動态圖制作(以文本的方式繪制簡單的SVG流程圖)1


Github示例

以下是一個簡單的示例(flowchart.js依賴raphael):

svg動态圖制作(以文本的方式繪制簡單的SVG流程圖)2

下面是一段帶有顔色的示例:

svg動态圖制作(以文本的方式繪制簡單的SVG流程圖)3

以下是一個完成的demo:

svg動态圖制作(以文本的方式繪制簡單的SVG流程圖)4

節點類型語法
  • start

用作流從其開始的第一個節點。默認文本為“start”

svg動态圖制作(以文本的方式繪制簡單的SVG流程圖)5

  • end

用作流結束的最後一個節點。默認文本為“end”

svg動态圖制作(以文本的方式繪制簡單的SVG流程圖)6

  • operation

表示需要在流中進行操作:

svg動态圖制作(以文本的方式繪制簡單的SVG流程圖)7

  • inputoutput

輸入輸出

svg動态圖制作(以文本的方式繪制簡單的SVG流程圖)8

  • subroutine(子程序)

指示流中的子流程,并且應該有另一個流程圖記錄該子流程

svg動态圖制作(以文本的方式繪制簡單的SVG流程圖)9

  • condition(條件)

允許條件或邏輯語句将流定向到兩個或多個路徑之一

svg動态圖制作(以文本的方式繪制簡單的SVG流程圖)10

  • parallel

允許多個流程同時出現

svg動态圖制作(以文本的方式繪制簡單的SVG流程圖)11

總結

本文簡單介紹了flowchart.js在浏覽器中的的用法,它還可以在終端使用,如果你有需要在浏覽器或者終端繪制簡單的流程圖,那麼flowchart.js将會是你可以選擇的工具,感興趣的可以直接到官網文檔在線查看編寫效果,可從Github進入!

,
Comments
Welcome to tft每日頭條 comments! Please keep conversations courteous and on-topic. To fosterproductive and respectful conversations, you may see comments from our Community Managers.
Sign up to post
Sort by
Show More Comments
推荐阅读
上海小吃排行榜前十名
上海小吃排行榜前十名
上海是各種名特小吃荟萃的地方,由于上海這個城市特有的地理位置和發展曆史,其小吃有着兼容并蓄的特點,所有的小吃幾乎都不是土生土長而來,而是将其他地方的美食吸收進來改良,然後煥發新的光彩,其發源多以江浙一帶為主,經過改良的上海小吃,既不同于粵港...
2024-11-11
二建事故等級劃分
二建事故等級劃分
2Z206040施工安全事故的應急救援與調查處理★☆☆☆☆一、生産安全事故的等級劃分标準(1)特别重大事故:30人以上死亡,或100人以上重傷;或1億元以上直接經濟損失;(2)重大事故:10人以上30人以下死亡,或50人以上100人以下重傷...
2024-11-11
高腳蜘蛛有毒嗎?
高腳蜘蛛有毒嗎?
高腳蜘蛛有毒嗎?高腳蜘蛛螫咬帶毒高腳蜘蛛帶有寄生蟲,若不慎被高腳蜘蛛咬傷,傷口有可能會因細菌感染而出現發炎、化膿等症狀,需要及時用碘酒或酒精消毒高腳蜘蛛常栖息于室内、外牆壁,不結網,移動速度很快,是家居蟑螂的主要天敵,今天小編就來聊一聊關于...
2024-11-11
玉露愛誰
玉露愛誰
感謝作者【花子青】的原創獨家授權分享編輯整理:【多肉植物百科】百科君坐标:江蘇省南京市很多肉友不怎麼養玉露,有的養也養得比較少。可能是玉露比較小巧,視覺效果不強吧。其實這是一種錯覺,玉露的觀賞性非常高,在肉肉界絕對是有顔值的寶寶。玉露晶瑩剔...
2024-11-11
蹴爾而與之與什麼意思
蹴爾而與之與什麼意思
蹴爾而與之與什麼意思?蹴爾而與之與的意思是給出自孟子《魚我所欲也》,接下來我們就來聊聊關于蹴爾而與之與什麼意思?以下内容大家不妨參考一二希望能幫到您!蹴爾而與之與什麼意思蹴爾而與之與的意思是給。出自孟子《魚我所欲也》。原文如下一箪食,一豆羹...
2024-11-11
Copyright 2023-2024 - www.tftnews.com All Rights Reserved