欧美成人精品手机在线观看_69视频国产_动漫精品第一页_日韩中文字幕网 - 日本欧美一区二区

LOGO OA教程 ERP教程 模切知識交流 PMS教程 CRM教程 開發文檔 其他文檔  
 
網站管理員

[點晴永久免費OA]WEB瀏覽器中用mermaid.js純JS畫甘特圖

admin
2023年4月15日 10:45 本文熱度 1931

今天簡單總結一下 mermaid 的甘特圖(gantt chart)語法, 因為昨天感覺mermaid 官網的 gantt 文檔[1] 只給了幾個例子 不太適合上手.

mermaid.js

mermaid.js[2]是一個用來在網頁中生成圖表的庫. 使用簡單的語法來描述圖表, 通過 Javascript 渲染.

支持生成多種類型的圖表, 例如流程圖/時序圖/甘特圖等等.

Mermaid.js 的目標是讓生成圖表變得簡單而且易于使用, 讓用戶能夠更專注于圖表的內容和信息的傳遞而不是圖表的排版.

它的理念和 markdown/graphviz 一樣, 用代碼代替富文本(word/powerpoint/畫圖工具), 這樣做的好處有:

  • 文件超小(只是文本文件), 打開和修改很方便
  • 生成的圖片是 SVG, 不但美觀還可以無損縮放
  • 方便版本管理(git)

之前我試過 mermaid 的流程圖(flow chart), 感覺不如 graphviz 靈活(雖然語法更簡潔). 但是 mermaid 被許多 markdown 編輯器支持, 而且覆蓋了很多類型的圖表, 所以相當值得一試.

有幾個方式可以使用 mermaid:

  • mermaid.js 官方在線編輯器[3]
  • 筆記軟件obsidian[4]默認支持 mermaid 語法的代碼塊嵌入 markdown 文件中
  • 使用VSCode 編輯器[5], 只需要安裝mermaid VSCode 插件[6]就可以使用了

甘特圖

Gantt chart (甘特圖) 是一種用來展示項目進度和任務分配的圖表.
它常常被用來展示在一個時間范圍內任務的開始時間, 持續時間以及前置任務之間的關系.
Gantt chart 可以幫助團隊成員更好地理解項目進度.并有效地協調任務之間的依賴關系.

=> 用來做時間線圖表剛剛好

mermaid 甘特圖語法

Mermaid.js 使用類似于 markdown 的語法來生成 Gantt 圖. 可以劃分不同章節, 每個章節包含若干任務信息.

關鍵字有:

  • title: 圖表標題
  • section: 章節
    • 章節下包含若干任務, 每行一個任務信息
  • excludes: 排除若干日期, 可以是特定的日期(yyyy-mm-dd 格式), 也可以是星期幾或"weekends"
    • 排除的日期會顯示為灰色

描述任務起止時間

"任務" 在這里指一項事件或者工程, 表現為甘特圖中的一條.

mermaid 每一行內容作為一個任務(或者事件)的描述, 大概語法為:

<task_name> : [<id>,] [<modifier(s)>,], <start_time>, <end_time|duration>

描述任務的開始和截止時間, 既可以都用實際的時間(start_time, end_time), 也可以用開始時間+進行長度(start_time, duration).
如果不給出開始時間, 默認從上一個任務結束開始算起.

雖然下面的例子都是以日期為單位, 其實它也支持小時/分鐘的時間段, 比如可以用甘特圖畫一天的工作日志.

修飾符(modifier)

描述任務除了給出開始/結束的時間外, 還可以進行修飾修改其顯示效果.

任務修飾符:

  • milestone: 里程碑
  • crit: 關鍵 -- 任務顏色變為紅色
  • done: 已完成任務 -- 任務變為灰色
  • active: 進行中的任務
  • 另外這些關鍵字可以進行組合, 用逗號分隔.

任務依賴關系

由于甘特圖用于展示項目進度和任務分配, 對任務之間的依賴關系也有支持.
可以在冒號后面給任務起一個 id, 然后用after關鍵字描述任務之間的依賴關系.

以房地產開發為例, 幾個環節(拿地/設計/施工/裝修/宣傳/銷售)的依賴關系可以這樣搞定:

完整示例代碼

gantt
 dateFormat  YYYY-MM-DD
 axisFormat %m/%d
 tickInterval 1week
 title       Mermaid甘特圖實例
 excludes    weekends


 section 任務描述
   %% 開始/結束時間
   task1: 2022-01-01, 2022-01-09
   %% 開始時間+長度
   task2: 2022-01-11, 30d
   %% 只提供長度 默認開始時間為上一行任務的結束時間
   task3: 30d


 section 修飾符
   task1-無修飾 : 2022-01-01, 7d
   task2-已完成('done') : done, 2022-01-02, 10d
   task3-關鍵任務('crit') : crit, 2022-01-10, 10d
   task4-進行中('active) : active, 2022-01-20, 10d
   %% 里程碑 -- 注意里程碑也需要提供結束時間(可以設置duration=0d)
   task5-里程碑 : milestone, 2022-01-30, 0d
   %% 修飾符可以組合使用
   task6-組合(done+crit) : done, crit, 2022-01-15, 7d
   task6-組合(active+crit) : active, crit, 7d


 section 任務依賴
   %% 給任務起一個代號("nd"), 方便依賴時引用
   拿地: nd, 2022-01-05, 8d
   設計: sj, 2022-01-01, 14d
   %% 依賴多個任務時, 空格分開
   施工: sg, after nd sj, 30d
   裝修: zx, after sg, 10d
   宣傳: xc, after nd, 20d
   銷售: after xc, 30d

參考資料

[1]

mermaid官網的gantt文檔: https://mermaid.js.org/syntax/gantt.html

[2]

mermaid.js: https://mermaid.js.org/

[3]

mermaid.js官方在線編輯器: https://mermaid.live/

[4]

obsidian: https://obsidian.md/

[5]

VSCode編輯器: https://code.visualstudio.com/

[6]

mermaid VSCode插件: https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid


該文章在 2023/4/15 10:45:24 編輯過
關鍵字查詢
相關文章
正在查詢...
點晴ERP是一款針對中小制造業的專業生產管理軟件系統,系統成熟度和易用性得到了國內大量中小企業的青睞。
點晴PMS碼頭管理系統主要針對港口碼頭集裝箱與散貨日常運作、調度、堆場、車隊、財務費用、相關報表等業務管理,結合碼頭的業務特點,圍繞調度、堆場作業而開發的。集技術的先進性、管理的有效性于一體,是物流碼頭及其他港口類企業的高效ERP管理信息系統。
點晴WMS倉儲管理系統提供了貨物產品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質期管理,貨位管理,庫位管理,生產管理,WMS管理系統,標簽打印,條形碼,二維碼管理,批號管理軟件。
點晴免費OA是一款軟件和通用服務都免費,不限功能、不限時間、不限用戶的免費OA協同辦公管理系統。
Copyright 2010-2025 ClickSun All Rights Reserved