Mermaid Diagram Builder
Generate diagrams using Mermaid.js text-based syntax for comprehensive visualization needs.
Workflow
- Select diagram type - Choose from 23+ types (see below)
- Review syntax - Consult @references/diagram-types.md for that type
- Build diagram - Follow syntax patterns from @references/syntax.md
- Add configuration - Theme/styling if needed (see @references/configuration.md)
- Follow best practices - Accessibility, testing (see @references/best-practices.md)
- Generate file - Create .mmd or .md file
Diagram Types
Mermaid supports 23+ diagram types organized into categories:
- Flow & Process: Flowcharts, Sequence, State, User Journey, Gantt, Kanban, Timeline
- Software & Architecture: Class, ER, C4, Architecture (beta), Block, Packet, Git Graphs
- Data & Analysis: Pie, XY, Sankey, Quadrant, Radar (beta), Treemaps (beta)
- Conceptual: Mindmaps, Requirements, ZenUML
See @references/diagram-types.md for complete syntax, features, and use cases for each type.
Configuration & Theming
- 5 built-in themes:
default, neutral, dark, forest, base
- Custom theming via
themeVariables (only with base theme)
- Per-diagram frontmatter configuration (recommended)
- Two rendering looks:
classic, handDrawn
- Multiple layout algorithms:
dagre, elk, tidy tree
See @references/configuration.md for complete options and examples.
Syntax Fundamentals
All diagrams share common patterns:
- Declarative syntax starting with diagram type
- Direction control:
TB, LR, RL, BT
- Comments:
%%
- Styling: frontmatter config or inline styles
- Special character handling
See @references/syntax.md for detailed syntax patterns.
Best Practices
Key principles:
- Always add
accTitle and accDescr for accessibility
- Use frontmatter for configuration (not deprecated directives)
- Break complex diagrams into smaller, focused ones (<15 nodes)
- Test at https://mermaid.live before finalizing
- Quote reserved words like "end"
See @references/best-practices.md for comprehensive guidance, common pitfalls, and optimization tips.
Output Format
Save as .mmd (Mermaid) or .md (Markdown) files:
- View directly on GitHub and GitLab
- Edit at https://mermaid.live
- Render in VS Code, Confluence, Notion, GitBook, Docusaurus
- Integrate into CI/CD pipelines
Resources
References
- @references/diagram-types.md - Complete syntax for all 23+ diagram types
- @references/configuration.md - Theming, configuration, and customization
- @references/syntax.md - Fundamental syntax patterns across all types
- @references/best-practices.md - Best practices, pitfalls, and optimization
1---2name: mermaid-diagram-33description: Create diagrams using Mermaid.js markdown-inspired syntax. Supports 23+ diagram types including flowcharts, sequence diagrams, class diagrams, ER diagrams, Gantt charts, state diagrams, pie charts, git graphs, C4 architecture, mindmaps, timelines, and more. Outputs plain text (.mmd or .md) files renderable on GitHub, GitLab, and mermaid.live, and many more clients.4---56# Mermaid Diagram Builder78Generate diagrams using Mermaid.js text-based syntax for comprehensive visualization needs.910## Workflow11121. **Select diagram type** - Choose from 23+ types (see below)132. **Review syntax** - Consult **@references/diagram-types.md** for that type143. **Build diagram** - Follow syntax patterns from **@references/syntax.md**154. **Add configuration** - Theme/styling if needed (see **@references/configuration.md**)165. **Follow best practices** - Accessibility, testing (see **@references/best-practices.md**)176. **Generate file** - Create .mmd or .md file1819## Diagram Types2021Mermaid supports **23+ diagram types** organized into categories:2223- **Flow & Process**: Flowcharts, Sequence, State, User Journey, Gantt, Kanban, Timeline24- **Software & Architecture**: Class, ER, C4, Architecture (beta), Block, Packet, Git Graphs25- **Data & Analysis**: Pie, XY, Sankey, Quadrant, Radar (beta), Treemaps (beta)26- **Conceptual**: Mindmaps, Requirements, ZenUML2728**See @references/diagram-types.md** for complete syntax, features, and use cases for each type.2930## Configuration & Theming3132- 5 built-in themes: `default`, `neutral`, `dark`, `forest`, `base`33- Custom theming via `themeVariables` (only with `base` theme)34- Per-diagram frontmatter configuration (recommended)35- Two rendering looks: `classic`, `handDrawn`36- Multiple layout algorithms: `dagre`, `elk`, tidy tree3738**See @references/configuration.md** for complete options and examples.3940## Syntax Fundamentals4142All diagrams share common patterns:43- Declarative syntax starting with diagram type44- Direction control: `TB`, `LR`, `RL`, `BT`45- Comments: `%%`46- Styling: frontmatter config or inline styles47- Special character handling4849**See @references/syntax.md** for detailed syntax patterns.5051## Best Practices5253**Key principles**:54- **Always** add `accTitle` and `accDescr` for accessibility55- Use frontmatter for configuration (not deprecated directives)56- Break complex diagrams into smaller, focused ones (<15 nodes)57- Test at https://mermaid.live before finalizing58- Quote reserved words like "end"5960**See @references/best-practices.md** for comprehensive guidance, common pitfalls, and optimization tips.6162## Output Format6364Save as `.mmd` (Mermaid) or `.md` (Markdown) files:65- View directly on GitHub and GitLab66- Edit at https://mermaid.live67- Render in VS Code, Confluence, Notion, GitBook, Docusaurus68- Integrate into CI/CD pipelines6970## Resources7172- **Live Editor**: https://mermaid.live (test and export)73- **Official Docs**: https://mermaid.js.org74- **Repository**: https://github.com/mermaid-js/mermaid75- **Icons**: https://icones.js.org (for mindmaps/architecture)7677## References7879- **@references/diagram-types.md** - Complete syntax for all 23+ diagram types80- **@references/configuration.md** - Theming, configuration, and customization81- **@references/syntax.md** - Fundamental syntax patterns across all types82- **@references/best-practices.md** - Best practices, pitfalls, and optimization
gabrielmoreira