Mermaid diagram
Kanban Board — free online editor
Mermaid 11 added native Kanban boards — list-based, version-controllable, and renderable straight from text.
What is a Mermaid kanban board?
Kanban boards in Mermaid use indentation: the first indent level defines a column, and the second creates cards in that column. Each card supports inline metadata like priority, assignee, and ticket id, making them perfect for engineering-team workflows.
When to use it
- ▸Track team work directly in a README
- ▸Plan a sprint in a markdown document
- ▸Visualise process states for a workflow
- ▸Generate Kanban boards from CI scripts
Syntax in one paragraph
Indent rules: column names are indented once, cards twice. Metadata blocks like `@{ priority: 'High', assigned: 'jane' }` follow the card text.
Example: Sprint board with metadata
kanban
Backlog
[Research mobile auth flow]
[Spike: Stripe webhook retries]
Todo
[Add dark-mode toggle]@{ priority: 'High' }
[Write E2E tests for checkout]
In Progress
[Refactor payment service]@{ assigned: 'jane' }
[Migrate to React 19]@{ priority: 'Very High' }
Review
[PR #142 — settings page]
Done
[Setup CI pipeline]
[Deploy v1.0 to production]@{ priority: 'High' }More Mermaid diagrams
Flowchart
A Mermaid flowchart visualizes a process as connected nodes and arrows — perfect for documenting algorithms, decision trees, and user journeys.
Sequence Diagram
Mermaid sequence diagrams show how participants exchange messages over time — ideal for API flows, auth handshakes, and protocol design.
Class Diagram
Mermaid class diagrams model UML classes — their members, methods, and the relationships between them.
ER Diagram
Mermaid ER diagrams model database schemas — tables, columns, and the relationships between them using crow's-foot cardinality.
State Diagram
Mermaid state diagrams visualize finite-state machines — perfect for UI states, workflow engines, and protocol design.
Gantt Chart
Mermaid Gantt charts plan projects across time — tasks, durations, dependencies, and milestones.
Pie Chart
Mermaid pie charts visualize a single dataset as proportional slices — the easiest Mermaid diagram to start with.
Git Graph
Mermaid Git graphs visualize branching workflows — commits, branches, merges, and tags — in a clean SVG diagram.
Mindmap
Mermaid mindmaps capture ideas around a central topic — branches grow outward by indentation alone, no UI dragging required.
Timeline
Mermaid timelines show events over time grouped into sections — great for histories, roadmaps, and onboarding stories.
Full Mermaid editor →
All 11+ diagram templates, live preview, themes