カンバンボード
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 という 1 つの構成オプションがあります。以下の例のように設定できます:
コピー
埋め込み
---
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 などのグローバルオプションを設定し、図から直接チケットにリンクできます。
これらのガイドラインに従い、一意の識別子と正しいインデントを確保し、メタデータと構成オプションを活用することで、プロジェクトのワークフローを効果的にマッピングする、包括的でカスタマイズされたかんばん図を作成できます。
