Kanban diagram
Mermaid kanban diagrams allow you to create a visual representation of tasks moving through different stages of a workflow; the following explains how to use kanban diagram syntax correctly.
Basic
A kanban diagram begins with the kanban syntax, then defines the columns and the tasks in those columns.
Copy
Embed
kanban
column1[Column Title]
task1[Task Description]
Defining columns
Columns represent different stages in the workflow, such as "To Do", "In Progress", "Done", etc. Each column is defined using a unique identifier and a title enclosed in square brackets.
Syntax:
Copy
Embed
columnId[Column Title]
- columnId: the unique identifier of the column.
- [Column Title]: the title displayed at the head of the column.
比如 id1[Todo]
Adding tasks to a column
Tasks are displayed in their respective columns with indentation. Each task includes a unique identifier and a description enclosed in square brackets.
Syntax:
Copy
Embed
taskId[Task Description]
taskId: the unique identifier of the task.,[Task Description]: the description of the task.
Example:
Copy
Embed
docs[Create Documentation]
Adding metadata to a task
You can use the @{ ... } syntax to add extra metadata to each task. Metadata can include key-value pairs such as assigned, ticket, and priority, which will be displayed in the rendering of the node.
Supported metadata keys
assigned to: specifies who is responsible for the task.,ticket: links the task to a ticket or issue number.,priority: indicates the urgency of the task. Allowed values: Very High, High, Low, and Very Low.
Copy
Embed
kanban
todo[Todo]
id3[Update Database Function]@{ ticket: MC-2037, assigned: 'knsv', priority: 'High' }
Configuration options
You can customize a kanban diagram using a configuration block at the beginning of the markdown file. This is useful for setting global settings (such as the base URL for tickets). Currently, the kanban diagram <code>ticketBaseUrl</code> this is very useful for setting global settings, such as the base URL for tickets. Currently the kanban diagram has one configuration option, ticketBaseUrl. It can be set as in the following example:
Copy
Embed
---
config:
kanban:
ticketBaseUrl: 'https://yourproject.atlassian.net/browse/#TICKET#'
---
When a kanban item has a specified ticket number, the ticket number in the diagram will include a link pointing to the external system that defines that ticket. ticketBaseUrl sets the base URL pointing to the external system, and #TICKET# is replaced with the ticket value in the task metadata to create a valid link.
Full example
The following is a complete kanban diagram code example:
Copy
Embed
---
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]
In short, creating a kanban diagram in Mermaid is a simple process that effectively visualizes your workflow.
You can use the @{ ... } syntax to add optional metadata to tasks to enhance your diagram; this syntax allows you to include additional contextual information, such as the assignee, ticket number, and priority. For further customization, use the configuration block at the top of the file to set global options, such as ticketBaseUrl, so that tickets can be linked directly from the diagram.
By following these guidelines - ensuring unique identifiers, correct indentation, and making use of metadata and configuration options - you can create a comprehensive and customized kanban diagram that effectively maps the project's workflow.
