> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/mermaid-js/mermaid/llms.txt
> Use this file to discover all available pages before exploring further.

# Kanban diagrams

> Create visual representations of tasks moving through different stages of a workflow

Kanban diagrams allow you to create visual representations of tasks moving through different stages of a workflow. They help visualize work in progress and manage project workflows effectively.

## Basic Kanban board

This example shows a simple Kanban board with tasks in different columns:

```mermaid theme={null}
kanban
  column1[Column Title]
    task1[Task Description]
```

## Syntax overview

### Defining columns

Columns represent different stages in your workflow (e.g., "Todo", "In Progress", "Done"):

```
columnId[Column Title]
```

* `columnId`: A unique identifier for the column
* `[Column Title]`: The title displayed on the column header

**Example:**

```mermaid theme={null}
kanban
  id1[Todo]
  id2[In Progress]
  id3[Done]
```

### Adding tasks

Tasks are listed under their respective columns with indentation:

```
taskId[Task Description]
```

**Example:**

```mermaid theme={null}
kanban
  Todo
    docs[Create Documentation]
  [In progress]
    design[Design new feature]
```

## Task metadata

Enhance tasks with additional information using the `@{ ... }` syntax:

### Supported metadata keys

* **assigned**: Specifies who is responsible for the task
* **ticket**: Links the task to a ticket or issue number
* **priority**: Indicates urgency (`Very High`, `High`, `Low`, `Very Low`)

```mermaid theme={null}
kanban
todo[Todo]
  id3[Update Database Function]@{ ticket: MC-2037, assigned: 'knsv', priority: 'High' }
```

## Configuration options

<Accordion title="Ticket base URL configuration">
  You can set a base URL for ticket links using frontmatter configuration:

  ```yaml theme={null}
  ---
  config:
    kanban:
      ticketBaseUrl: 'https://yourproject.atlassian.net/browse/#TICKET#'
  ---
  ```

  When a task has a ticket number, it will be linked to your external ticket system. The `#TICKET#` placeholder is replaced with the actual ticket value.
</Accordion>

## Complete example

Here's a full Kanban board with multiple columns and metadata:

```mermaid theme={null}
---
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]
```

## Best practices

<Tip>
  Ensure proper indentation when adding tasks to columns. Tasks must be indented under their parent columns to maintain the correct structure.
</Tip>

### Key guidelines

1. **Unique identifiers**: Use unique IDs for both columns and tasks
2. **Proper indentation**: Tasks must be indented under their columns
3. **Meaningful titles**: Use descriptive column and task titles
4. **Metadata usage**: Add assignees and priorities to improve task tracking
5. **Ticket linking**: Configure `ticketBaseUrl` to enable external ticket links

## Example: Software development workflow

```mermaid theme={null}
kanban
  Backlog
    [Add user authentication]
    [Implement search feature]
  In Progress
    [Fix login bug]@{ assigned: 'Alice', priority: 'High' }
  Code Review
    [Update API endpoints]@{ assigned: 'Bob' }
  Testing
    [Performance improvements]@{ ticket: PROJ-123, assigned: 'Charlie' }
  Done
    [Setup CI/CD pipeline]
```

## Example: Content creation pipeline

```mermaid theme={null}
kanban
  Ideas
    [Blog post about Mermaid diagrams]
    [Video tutorial series]
  Writing
    [Getting started guide]@{ assigned: 'Content Team', priority: 'High' }
  Review
    [API documentation]@{ assigned: 'Tech Writer' }
  Published
    [Installation guide]
    [Configuration reference]
```

<Note>
  Kanban diagrams are excellent for visualizing workflow stages. Customize columns to match your team's specific process.
</Note>