elefcode

Mermaid diagram

Git Graph — free online editor

Mermaid Git graphs visualize branching workflows — commits, branches, merges, and tags — in a clean SVG diagram.

▶ Open in editor

What is a Mermaid git graph?

Git graphs are perfect for explaining branching strategies in onboarding docs, blog posts, and code reviews. Mermaid renders commits as nodes along their branch line and arcs merges between branches automatically.

When to use it

  • ▸Explain Gitflow, trunk-based, or feature-branch workflows
  • ▸Document release branching for a team
  • ▸Illustrate rebase vs merge in a blog post
  • ▸Show a real branching history visually

Syntax in one paragraph

Commands run in order: `commit`, `branch name`, `checkout name`, `merge target`. Add `id: "label"` or `tag: "v1.0"` to a commit for clarity.

Example: Feature branch + release

gitGraph
    commit id: "init"
    commit id: "add README"

    branch develop
    checkout develop
    commit id: "feat: auth"
    commit id: "feat: dashboard"

    branch feature/dark-mode
    checkout feature/dark-mode
    commit id: "add dark theme"

    checkout develop
    merge feature/dark-mode

    checkout main
    merge develop id: "v1.0.0" tag: "v1.0.0"
▶ 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.

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.

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