看板圖
Mermaid 看板圖允許你建立任務在工作流程不同階段流轉的視覺化表示,下文解釋了如何正確使用看板圖語法。
基礎
看板圖以 kanban 語法開頭,然後定義欄以及這些欄中的任務。
複製
嵌入
kanban
column1[Column Title]
task1[Task Description]
定義欄
欄代表工作流程中的不同階段,例如「待辦事項」、「進行中」、「已完成」等。每欄都使用唯一識別碼和用中括號括起來的標題來定義。
語法:
複製
嵌入
columnId[Column Title]
- columnId:欄的唯一識別碼。
- [Column Title]:顯示在欄頭部的標題。
比如 id1[Todo]
向欄新增任務
任務按各自的欄展示,並帶有縮排。每個任務包括一個唯一識別碼和用中括號括起來的描述。
語法:
複製
嵌入
taskId[Task Description]
taskId:任務的唯一識別碼。,[Task Description]: 任務的描述。
範例:
複製
嵌入
docs[Create Documentation]
向任務新增中繼資料
你可以使用 @{ ... } 語法為每個任務新增額外的中繼資料。中繼資料可以包含 assigned、ticket、priority 等鍵值對,這將在節點的渲染中顯示出來。
支援的中繼資料鍵
指派給:指定誰負責該任務。,工單:將任務連結到工單或問題編號。,優先順序:表示任務的緊急程度。允許的值:非常高、高、低 和 非常低。
複製
嵌入
kanban
todo[Todo]
id3[Update Database Function]@{ ticket: MC-2037, assigned: 'knsv', priority: 'High' }
設定選項
你可以使用 markdown 檔案開頭的設定區塊自訂看板圖。這對於設定全域設定(如票證的基礎 URL)很有用。目前,看板圖 <code>ticketBaseUrl</code> 這對於設定全域設定非常有用,例如工單的基礎 URL。目前看板圖表有一個設定選項 ticketBaseUrl。可以按以下範例進行設定:
複製
嵌入
---
config:
kanban:
ticketBaseUrl: 'https://yourproject.atlassian.net/browse/#TICKET#'
---
當看板項目有指定的工單號碼時,圖中的工單號碼將包含一個指向定義該工單的外部系統的連結。ticketBaseUrl 設定指向外部系統的基礎 URL,而 #TICKET# 會被任務中繼資料中的工單值取代,以建立有效的連結。
完整範例
以下是一個完整看板圖程式碼範例:
複製
嵌入
---
config:
kanban:
ticketBaseUrl: 'https://mermaidchart.atlassian.net/browse/#TICKET#'
---
kanban
Todo
[Create Documentation]
docs[Create Blog about the new diagram]
[In progress]
id6[Create renderer so that it works in all cases. We also add some extra text here for testing purposes. And some more just for the extra flare.]
id9[Ready for deploy]
id8[Design grammar]@{ assigned: 'knsv' }
id10[Ready for test]
id4[Create parsing tests]@{ ticket: MC-2038, assigned: 'K.Sveidqvist', priority: 'High' }
id66[last item]@{ priority: 'Very Low', assigned: 'knsv' }
id11[Done]
id5[define getData]
id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char]@{ ticket: MC-2036, priority: 'Very High'}
id3[Update DB function]@{ ticket: MC-2037, assigned: knsv, priority: 'High' }
id12[Can't reproduce]
id3[Weird flickering in Firefox]
總之,在 Mermaid 中建立看板圖是一個簡單的過程,可以有效地視覺化你的工作流程。
你可以使用 @{ ... } 語法向任務新增選用中繼資料來增強你的圖表,這個語法允許你包含額外的上下文資訊,如負責人、工單編號和優先順序。對於進一步的自訂,請使用檔案頂部的設定區塊來設定全域選項,例如 ticketBaseUrl,以便直接從圖表中連結工單。
透過遵循這些指南,確保唯一識別碼、正確縮排,並利用中繼資料和設定選項,你可以建立一個全面且客製化的看板圖,有效地對應專案的工作流程。