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

mermaid.js

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

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

“

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

”

它的理念和 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 (甘特圖) 是一種用來展示項目進度和任務(wù)分配的圖表.
它常常被用來展示在一個時間范圍內(nèi)任務(wù)的開始時間, 持續(xù)時間以及前置任務(wù)之間的關(guān)系.
Gantt chart 可以幫助團隊成員更好地理解項目進度.并有效地協(xié)調(diào)任務(wù)之間的依賴關(guān)系.

”

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

mermaid 甘特圖語法

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

關(guān)鍵字有:

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

描述任務(wù)起止時間

"任務(wù)" 在這里指一項事件或者工程, 表現(xiàn)為甘特圖中的一條.

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

“

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

”

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

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

修飾符(modifier)

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

任務(wù)修飾符:

• milestone: 里程碑
• crit: 關(guān)鍵 -- 任務(wù)顏色變?yōu)榧t色
• done: 已完成任務(wù) -- 任務(wù)變?yōu)榛疑?/section>
• active: 進行中的任務(wù)
• 另外這些關(guān)鍵字可以進行組合, 用逗號分隔.

任務(wù)依賴關(guān)系

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

以房地產(chǎn)開發(fā)為例, 幾個環(huán)節(jié)(拿地/設(shè)計/施工/裝修/宣傳/銷售)的依賴關(guān)系可以這樣搞定:

完整示例代碼

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


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


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


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

參考資料