Mermaid Diagramming

Create professional software diagrams using Mermaid's text-based syntax. Mermaid renders diagrams from simple text definitions, making diagrams version-controllable, easy to update, and maintainable alongside code.

Core Syntax Structure

All Mermaid diagrams follow this pattern:

diagramType
  definition content

Key principles:

• First line declares diagram type (e.g., classDiagram, sequenceDiagram, flowchart)
• Use %% for comments
• Line breaks and indentation improve readability but aren't required
• Unknown words break diagrams; parameters fail silently

Diagram Type Selection Guide

Choose the right diagram type:

1. Class Diagrams - Domain modeling, OOP design, entity relationships

- Domain-driven design documentation - Object-oriented class structures - Entity relationships and dependencies

1. Sequence Diagrams - Temporal interactions, message flows

- API request/response flows - User authentication flows - System component interactions - Method call sequences

1. Flowcharts - Processes, algorithms, decision trees

- User journeys and workflows - Business processes - Algorithm logic - Deployment pipelines

1. Entity Relationship Diagrams (ERD) - Database schemas

- Table relationships - Data modeling - Schema design

1. C4 Diagrams - Software architecture at multiple levels

- System Context (systems and users) - Container (applications, databases, services) - Component (internal structure) - Code (class/interface level)

1. State Diagrams - State machines, lifecycle states
2. Git Graphs - Version control branching strategies
3. Gantt Charts - Project timelines, scheduling
4. Pie/Bar Charts - Data visualization

Detailed References

Copy-paste starting points for the four most common types live in [references/quick-start-examples.md](references/quick-start-examples.md). For in-depth guidance on specific diagram types, see:

• [references/class-diagrams.md](references/class-diagrams.md) - Domain modeling, relationships (association, composition, aggregation, inheritance), multiplicity, methods/properties
• [references/sequence-diagrams.md](references/sequence-diagrams.md) - Actors, participants, messages (sync/async), activations, loops, alt/opt/par blocks, notes
• [references/flowcharts.md](references/flowcharts.md) - Node shapes, connections, decision logic, subgraphs, styling
• [references/erd-diagrams.md](references/erd-diagrams.md) - Entities, relationships, cardinality, keys, attributes
• [references/c4-diagrams.md](references/c4-diagrams.md) - System context, container, component diagrams, boundaries
• [references/architecture-diagrams.md](references/architecture-diagrams.md) - Cloud services, infrastructure, CI/CD deployments
• [references/advanced-features.md](references/advanced-features.md) - Themes, styling, configuration, layout options

Best Practices

1. Start Simple - Begin with core entities/components, add details incrementally
2. Use Meaningful Names - Clear labels make diagrams self-documenting
3. Comment Extensively - Use %% comments to explain complex relationships
4. Keep Focused - One diagram per concept; split large diagrams into multiple focused views
5. Version Control - Store .mmd files alongside code for easy updates
6. Add Context - Include titles and notes to explain diagram purpose
7. Iterate - Refine diagrams as understanding evolves

Configuration and Theming

Configure diagrams using frontmatter:

---
config:
  theme: base
  themeVariables:
    primaryColor: "#ff6b6b"
---
flowchart LR
    A --> B

Available themes: default, forest, dark, neutral, base

Layout options:

• layout: dagre (default) - Classic balanced layout
• layout: elk - Advanced layout for complex diagrams (requires integration)

Look options:

• look: classic - Traditional Mermaid style
• look: handDrawn - Sketch-like appearance

Exporting and Rendering

Native support in:

• GitHub/GitLab - Automatically renders in Markdown
• VS Code - With Markdown Mermaid extension
• Notion, Obsidian, Confluence - Built-in support

Export options:

• Mermaid Live Editor - Online editor with PNG/SVG export
• Mermaid CLI - npm install -g @mermaid-js/mermaid-cli then mmdc -i input.mmd -o output.png
• Docker - docker run --rm -v $(pwd):/data minlag/mermaid-cli -i /data/input.mmd -o /data/output.png

Common Pitfalls

• Breaking characters - Avoid {} in comments, use proper escape sequences for special characters
• Syntax errors - Misspellings break diagrams; validate syntax in Mermaid Live
• Overcomplexity - Split complex diagrams into multiple focused views
• Missing relationships - Document all important connections between entities