Mermaid Kanban Boards

calendarDec 12, 2024 · 2 min read · mermaid kanban project-management agile diagram diagrams  ·
Share on: linkedincopy

Kanban boards visualize work items across different stages. Perfect for project management, task tracking, and workflow visualization.

Use Case

Use Kanban boards when you need to:

  • Track project tasks
  • Visualize workflow stages
  • Manage agile sprints
  • Show work in progress
  • Document process stages

Code (Basic)

 1```mermaid
 2kanban
 3    title Kanban Board
 4    section To Do
 5        Task 1
 6        Task 2
 7    section In Progress
 8        Task 3
 9    section Done
10        Task 4
11```

Result:

Examples

Example 1: Development Workflow

 1```mermaid
 2kanban
 3    title Development Pipeline
 4    section Backlog
 5        Design API
 6        Write Tests
 7    section In Progress
 8        Implement Feature
 9        Code Review
10    section Testing
11        Unit Tests
12    section Done
13        Deploy to Prod
14        Documentation
15```

Result:

Example 2: Bug Tracking (with IDs and metadata)

 1```mermaid
 2kanban
 3    title Bug Tracking
 4    section Todo
 5        id1[Create Documentation]
 6        docs[Create Blog about the new diagram]
 7    section In progress
 8        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.]
 9    section Ready for deploy
10        id8[Design grammar]@{ assigned: 'knsv' }
11    section Ready for test
12        id4[Create parsing tests]@{ ticket: 2038, assigned: 'K.Sveidqvist', priority: 'High' }
13        id66[last item]@{ priority: 'Very Low', assigned: 'knsv' }
14    section Done
15        id5[define getData]
16        id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char]@{ ticket: 2036, priority: 'Very High'}
17    section Can't reproduce
18        id3[Weird flickering in Firefox]
19```

Result:

Notes

  • title - Optional board title
  • section - Defines a column/stage
  • Tasks can be plain text or id[Label] with optional @{ ... } metadata
  • Keep task names concise

Gotchas/Warnings

  • ⚠️ Indentation: Tasks must be indented under their section
  • ⚠️ Sections: Must define sections before tasks
  • ⚠️ IDs: Use unique IDs when you add metadata (@{ ... })
  • ⚠️ Complexity: Too many tasks can clutter the board

Related Snippets