← All diagram types
MERMAID DIAGRAM GUIDE

Mermaid Kanban board online editor

Organize work into visual columns such as backlog, active, and done. Create the diagram in Mermaid Studio, preview it instantly, and export it when it is ready to share.

Open the Kanban editor See an example

WHAT IT IS FOR

Make the important relationships clear

Organize work into visual columns so a team can discuss backlog, active work, blocked items, and completed outcomes.

  • Plan team work
  • Visualize a delivery workflow
  • Discuss work in progress limits
Why use Mermaid Studio?
  • Write the source as versionable Mermaid code.
  • Preview changes immediately in the browser.
  • Export the finished diagram as SVG or PNG.
  • Start from a related template when you need a head start.

MERMAID EXAMPLE

Start with a working example

Copy the structure, replace the labels with your own domain, and continue in the full editor.

kanban
  todo[Todo]
    research[Requirements research]
  doing[In Progress]
    build[Build feature]
  done[Done]
    release[Prepare release]

HOW TO START

Create your diagram in four steps

  1. 1Name columns after real workflow states.
  2. 2Add cards with clear outcomes.
  3. 3Move work through the board as state changes.
  4. 4Review blocked and active work before adding more items.

WRITING TIPS

Keep the diagram useful

Limit work in progress to keep the board useful.

Use short cards with clear outcomes.

FAQ

Frequently asked questions

What is a Kanban diagram?+

It is a visual workflow with columns that represent states such as backlog, in progress, review, and done.

Can Mermaid Kanban boards be kept in a repository?+

Yes. The board is written as Mermaid code, so teams can review and version it with the rest of their documentation.

TEMPLATES

Start from a related template

Sprint Kanban board

Organize sprint work into todo, in progress, and done columns.

Open template

RELATED DIAGRAMS

Explore another Mermaid diagram

Mermaid flowchart

Visualize processes, decisions, and system flows with connected nodes.

Read the guide

Mermaid sequence diagram

Map requests, responses, and asynchronous events between services.

Read the guide

Mermaid class diagram

Design domain objects, properties, methods, inheritance, and relationships.

Read the guide

Mermaid ER diagram

Document database entities, fields, relationships, and cardinality.

Read the guide

Mermaid state diagram

Show how an object or workflow changes state in response to events.

Read the guide

Mermaid mindmap

Organize ideas and subtopics hierarchically around a central theme.

Read the guide

Ready to make a Kanban?

Open the editor with a working example and adapt it to your project.

Start in Mermaid Studio