6.0 KB162 lines
Blame
1> **Warning**
2>
3> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
4>
5> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/kanban.md](../../packages/mermaid/src/docs/syntax/kanban.md).
6
7# Mermaid Kanban Diagram Documentation
8
9Mermaid’s Kanban diagram allows you to create visual representations of tasks moving through different stages of a workflow. This guide explains how to use the Kanban diagram syntax, based on the provided example.
10
11## Overview
12
13A Kanban diagram in Mermaid starts with the kanban keyword, followed by the definition of columns (stages) and tasks within those columns.
14
15```mermaid-example
16kanban
17 column1[Column Title]
18 task1[Task Description]
19```
20
21```mermaid
22kanban
23 column1[Column Title]
24 task1[Task Description]
25```
26
27## Defining Columns
28
29Columns represent the different stages in your workflow, such as “Todo,” “In Progress,” “Done,” etc. Each column is defined using a unique identifier and a title enclosed in square brackets.
30
31**Syntax:**
32
33```
34columnId[Column Title]
35```
36
37- columnId: A unique identifier for the column.
38- \[Column Title]: The title displayed on the column header.
39
40Like this `id1[Todo]`
41
42## Adding Tasks to Columns
43
44Tasks are listed under their respective columns with an indentation. Each task also has a unique identifier and a description enclosed in square brackets.
45
46**Syntax:**
47
48```
49taskId[Task Description]
50```
51
52```
53• taskId: A unique identifier for the task.
54• [Task Description]: The description of the task.
55```
56
57**Example:**
58
59```
60docs[Create Documentation]
61```
62
63## Adding Metadata to Tasks
64
65You can include additional metadata for each task using the @{ ... } syntax. Metadata can contain key-value pairs like assigned, ticket, priority, etc. This will be rendered added to the rendering of the node.
66
67## Supported Metadata Keys
68
69```
70• assigned: Specifies who is responsible for the task.
71• ticket: Links the task to a ticket or issue number.
72• priority: Indicates the urgency of the task. Allowed values: 'Very High', 'High', 'Low' and 'Very Low'
73```
74
75```mermaid-example
76kanban
77todo[Todo]
78 id3[Update Database Function]@{ ticket: MC-2037, assigned: 'knsv', priority: 'High' }
79```
80
81```mermaid
82kanban
83todo[Todo]
84 id3[Update Database Function]@{ ticket: MC-2037, assigned: 'knsv', priority: 'High' }
85```
86
87## Configuration Options
88
89You can customize the Kanban diagram using a configuration block at the beginning of your markdown file. This is useful for setting global settings like a base URL for tickets. Currently there is one configuration option for kanban diagrams `ticketBaseUrl`. This can be set as in the following example:
90
91```yaml
92---
93config:
94 kanban:
95 ticketBaseUrl: 'https://yourproject.atlassian.net/browse/#TICKET#'
96---
97```
98
99When the kanban item has an assigned ticket number the ticket number in the diagram will have a link to an external system where the ticket is defined. The `ticketBaseUrl` sets the base URL to the external system and #TICKET# is replaced with the ticket value from task metadata to create a valid link.
100
101## Full Example
102
103Below is the full Kanban diagram based on the provided example:
104
105```mermaid-example
106---
107config:
108 kanban:
109 ticketBaseUrl: 'https://mermaidchart.atlassian.net/browse/#TICKET#'
110---
111kanban
112 Todo
113 [Create Documentation]
114 docs[Create Blog about the new diagram]
115 [In progress]
116 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.]
117 id9[Ready for deploy]
118 id8[Design grammar]@{ assigned: 'knsv' }
119 id10[Ready for test]
120 id4[Create parsing tests]@{ ticket: MC-2038, assigned: 'K.Sveidqvist', priority: 'High' }
121 id66[last item]@{ priority: 'Very Low', assigned: 'knsv' }
122 id11[Done]
123 id5[define getData]
124 id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char]@{ ticket: MC-2036, priority: 'Very High'}
125 id3[Update DB function]@{ ticket: MC-2037, assigned: knsv, priority: 'High' }
126
127 id12[Can't reproduce]
128 id3[Weird flickering in Firefox]
129```
130
131```mermaid
132---
133config:
134 kanban:
135 ticketBaseUrl: 'https://mermaidchart.atlassian.net/browse/#TICKET#'
136---
137kanban
138 Todo
139 [Create Documentation]
140 docs[Create Blog about the new diagram]
141 [In progress]
142 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.]
143 id9[Ready for deploy]
144 id8[Design grammar]@{ assigned: 'knsv' }
145 id10[Ready for test]
146 id4[Create parsing tests]@{ ticket: MC-2038, assigned: 'K.Sveidqvist', priority: 'High' }
147 id66[last item]@{ priority: 'Very Low', assigned: 'knsv' }
148 id11[Done]
149 id5[define getData]
150 id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char]@{ ticket: MC-2036, priority: 'Very High'}
151 id3[Update DB function]@{ ticket: MC-2037, assigned: knsv, priority: 'High' }
152
153 id12[Can't reproduce]
154 id3[Weird flickering in Firefox]
155```
156
157In conclusion, creating a Kanban diagram in Mermaid is a straightforward process that effectively visualizes your workflow. Start by using the kanban keyword to initiate the diagram. Define your columns with unique identifiers and titles to represent different stages of your project. Under each column, list your tasks—also with unique identifiers—and provide detailed descriptions as needed. Remember that proper indentation is crucial; tasks must be indented under their parent columns to maintain the correct structure.
158
159You can enhance your diagram by adding optional metadata to tasks using the @{ ... } syntax, which allows you to include additional context such as assignee, ticket numbers, and priority levels. For further customization, utilize the configuration block at the top of your file to set global options like ticketBaseUrl for linking tickets directly from your diagram.
160
161By adhering to these guidelines—ensuring unique identifiers, proper indentation, and utilizing metadata and configuration options—you can create a comprehensive and customized Kanban board that effectively maps out your project’s workflow using Mermaid.
162