mermaid-11-15-0

name

mermaid-11-15-0

description

Complete toolkit for Mermaid 11.15.0 providing 29 diagram types including flowcharts, sequence diagrams, Gantt charts, class diagrams, state diagrams, ER diagrams, C4 diagrams, mindmaps, git graphs, pie charts, and more. Supports frontmatter configuration, theming, accessibility (accTitle/accDescr), multiple layout engines (dagre, elk, tidy-tree, cose-bilkent), icons, math (KaTeX), animations, and interactivity. Use when creating diagrams from text definitions, generating visualizations for documentation, or integrating Mermaid into web pages, markdown files, or APIs.

Mermaid 11.15.0

Overview

Mermaid is a JavaScript-based diagramming and charting tool that renders Markdown-inspired text definitions into SVG diagrams. It supports 29 diagram types covering flowcharts, UML diagrams, data visualizations, architecture diagrams, and more. Diagrams are defined as plain text, making them version-controllable, easily editable, and embeddable in any markdown-based documentation.

When to Use

• Creating diagrams inline in Markdown files (GitHub, GitLab, Obsidian, Notion)
• Generating flowcharts, sequence diagrams, ER diagrams, Gantt charts, class diagrams, or state diagrams from text
• Embedding diagrams in web pages via CDN or npm package
• Producing visualizations for documentation that must stay in sync with code
• Building interactive diagrams with click events and tooltips
• Creating architecture diagrams (C4, block, wardley, event modeling)
• Visualizing git branching strategies

Core Concepts

Diagram Declaration

Every diagram begins with a keyword declaring its type:

flowchart LR
    A --> B

The keyword (flowchart, sequenceDiagram, gantt, etc.) tells the parser which renderer to use. Use graph as an alias for flowchart.