国产高清在线免费观看-国产高清在线免费无码-国产高清在线男人的天堂-国产高清在线视频-国产高清在线视频精品视频-国产高清在线视频伊甸园

今天簡(jiǎn)單總結(jié)一下 mermaid 的甘特圖(gantt chart)語(yǔ)法, 因?yàn)樽蛱旄杏X(jué)mermaid 官網(wǎng)的 gantt 文檔^[1] 只給了幾個(gè)例子 不太適合上手.

mermaid.js

mermaid.js^[2]是一個(gè)用來(lái)在網(wǎng)頁(yè)中生成圖表的庫(kù). 使用簡(jiǎn)單的語(yǔ)法來(lái)描述圖表, 通過(guò) Javascript 渲染.

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

“

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

”

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

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

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

有幾個(gè)方式可以使用 mermaid:

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

甘特圖

“

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

”

=> 用來(lái)做時(shí)間線圖表剛剛好

mermaid 甘特圖語(yǔ)法

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

關(guān)鍵字有:

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

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

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

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

“

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

”

描述任務(wù)的開(kāi)始和截止時(shí)間, 既可以都用實(shí)際的時(shí)間(start_time, end_time), 也可以用開(kāi)始時(shí)間+進(jìn)行長(zhǎng)度(start_time, duration).
如果不給出開(kāi)始時(shí)間, 默認(rèn)從上一個(gè)任務(wù)結(jié)束開(kāi)始算起.

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

修飾符(modifier)

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

任務(wù)修飾符:

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

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

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

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

完整示例代碼

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


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


  section 修飾符
    task1-無(wú)修飾 : 2022-01-01, 7d
    task2-已完成('done') : done, 2022-01-02, 10d
    task3-關(guān)鍵任務(wù)('crit') : crit, 2022-01-10, 10d
    task4-進(jìn)行中('active) : active, 2022-01-20, 10d
    %% 里程碑 -- 注意里程碑也需要提供結(jié)束時(shí)間(可以設(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ù)起一個(gè)代號(hào)("nd"), 方便依賴時(shí)引用
    拿地: nd, 2022-01-05, 8d
    設(shè)計(jì): sj, 2022-01-01, 14d
    %% 依賴多個(gè)任務(wù)時(shí), 空格分開(kāi)
    施工: sg, after nd sj, 30d
    裝修: zx, after sg, 10d
    宣傳: xc, after nd, 20d
    銷售: after xc, 30d

參考資料