Mermaid diagram

Mindmap — free online editor

Mermaid mindmaps capture ideas around a central topic — branches grow outward by indentation alone, no UI dragging required.

▶ Open in editor

What is a Mermaid mindmap?

Indentation defines hierarchy: deeper indent = deeper level. The root shape is set with double parens like `root((Center))`. Each node can use shapes: square `[box]`, rounded `(round)`, circle `((circle))`, hexagon `{{hex}}`, or cloud `))cloud((`.

When to use it

▸Brainstorm features or ideas
▸Plan content for a blog post
▸Sketch a curriculum outline
▸Capture a meeting's key topics

Syntax in one paragraph

Always start with `mindmap`, then `root((Topic))`. Indent two spaces per level to add children. Shapes are optional; indentation alone produces a clean tree.

Example: Tools for a developer

mindmap
  root((Dev Tools))
    Editors
      VS Code
      Vim
      JetBrains
    CLI
      Git
      Docker
      kubectl
    Browsers
      Chrome DevTools
      Firefox Dev
    Diagrams
      Mermaid
        Flowchart
        Sequence
        Gantt

▶ Try this example in the editor

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.

Timeline

Mermaid timelines show events over time grouped into sections — great for histories, roadmaps, and onboarding stories.

Kanban Board

Mermaid 11 added native Kanban boards — list-based, version-controllable, and renderable straight from text.

Full Mermaid editor →

All 11+ diagram templates, live preview, themes