mermaid

Mermaid Diagram Generator

Note: check current Mermaid version first and ask to upgrade if outdated.

Generate high-quality Mermaid diagram code based on user requirements.

Workflow

1. Understand Requirements: Analyze user description to determine the most suitable diagram type.
2. Read Documentation: Read the corresponding syntax reference for the diagram type.
3. Generate Code: Generate Mermaid code following the specification.
4. Apply Styling: Apply appropriate themes and style configurations.
5. Lint Before Presenting: Run mermaid-lint on every generated diagram before presenting it as ready. If linting fails, fix Mermaid syntax errors when possible and rerun linting. If mmdc is unavailable, do not present the diagram as validated; report the missing dependency and the install command from mermaid-lint.

Diagram Type Reference

Select the appropriate diagram type and read the corresponding documentation. If a requested diagram type is not listed here, inspect references/ before declaring it unsupported.

Type	Documentation	Use Cases
Flowchart	flowchart.md	Flowcharts are composed of nodes (geometric shapes) and edges (arrows or lines).
Sequence Diagram	sequenceDiagram.md	A Sequence diagram is an interaction diagram that shows how processes operate with one another and in what order.
Class Diagram	classDiagram.md	"In software engineering, a class diagram in the Unified Modeling Language (UML) is a type of static structure diagram that describes the structure of a system by showing the system's classes, their attributes, operat...
State Diagram	stateDiagram.md	"A state diagram is a type of diagram used in computer science and related fields to describe the behavior of systems.
User Journey	userJourney.md	User journeys describe at a high level of detail exactly what steps different users take to complete a specific task within a system, application or website.
Gantt	gantt.md	A Gantt chart is a type of bar chart, first developed by Karol Adamiecki in 1896, and independently by Henry Gantt in the 1910s, that illustrates a project schedule and the amount of time it would take for any one pro...
Pie Chart	pie.md	A pie chart (or a circle chart) is a circular statistical graphic, which is divided into slices to illustrate numerical proportion.
Quadrant Chart	quadrantChart.md	A quadrant chart is a visual representation of data that is divided into four quadrants.
Requirement Diagram	requirementDiagram.md	A Requirement diagram provides a visualization for requirements and their connections, to each other and other documented elements.
GitGraph (Git) Diagram	gitgraph.md	A Git Graph is a pictorial representation of git commits and git actions(commands) on various branches.
C4 Diagram	c4.md	C4 Diagram: This is an experimental diagram for now.
Mindmaps	mindmap.md	Mindmap: This is an experimental diagram for now.
Timeline	timeline.md	Timeline: This is an experimental diagram for now.
ZenUML	zenuml.md	A Sequence diagram is an interaction diagram that shows how processes operate with one another and in what order.
Sankey	sankey.md	A sankey diagram is a visualization used to depict a flow from one set of values to another.
XY Chart	xyChart.md	In the context of mermaid-js, the XY chart is a comprehensive charting module that encompasses various types of charts that utilize both x-axis and y-axis for data representation.
Block Diagram	block.md	Block diagrams are an intuitive and efficient way to represent complex systems, processes, or architectures visually.
Packet	packet.md	A packet diagram is a visual representation used to illustrate the structure and contents of a network packet.
Kanban	kanban.md	Mermaid’s Kanban diagram allows you to create visual representations of tasks moving through different stages of a workflow.
Architecture	architecture.md	In the context of mermaid-js, the architecture diagram is used to show the relationship between services and resources commonly found within the Cloud or CI/CD deployments.
Radar	radar.md	A radar diagram is a simple way to plot low-dimensional data in a circular format.
Event Modeling	eventmodeling.md	Event Modeling (EM) is a method of describing systems using an example of how information has changed within them over time.
Treemap	treemap.md	A treemap diagram displays hierarchical data as a set of nested rectangles.
Venn	venn.md	Venn diagrams show relationships between sets using overlapping circles.
Ishikawa	ishikawa.md	Ishikawa diagrams are used to represent causes of a specific event (or a problem).
Wardley	wardley.md	Wardley Maps are visual representations of business strategy that map value chains and component evolution.
Cynefin	cynefin.md	The Cynefin framework is a sense-making framework created by Dave Snowden that categorizes problems into five complexity domains.
TreeView	treeView.md	A TreeView diagram is used to represent hierarchical data in the form of a directory-like structure, with file-type icons, connector lines, and optional annotations.
Entity Relationship Diagrams	entityRelationshipDiagram.md	An entity–relationship model (or ER model) describes interrelated things of interest in a specific domain of knowledge.
Railroad Diagrams	railroad.md	Railroad diagrams (also known as syntax diagrams or grammar diagrams) are a visual representation of context-free grammars using EBNF (Extended Backus-Naur Form) notation.

Configuration & Themes

• Theming - Custom colors and styles
• Directives - Diagram-level configuration
• Layouts - Layout direction and spacing
• Configuration - Global settings
• Math - LaTeX math support

Linting

Run mermaid-lint before declaring generated Mermaid ready. Pass each generated diagram to the linter, inspect the result, fix Mermaid syntax errors when possible, and rerun linting until it passes. If mmdc is not installed, stop before final presentation and report the missing dependency instead of silently skipping validation.

Choice Reports

When producing a multi-block choice report, use assets/choice_report_template.html as the base HTML. Populate its choice-report-data JSON with source text blocks and one or more Mermaid options per block. Multiple options may be approved for the same source block, so do not force a single approved option. Lint every Mermaid option with mermaid-lint before presenting the report.

Output Specification

Generated Mermaid code should:

1. Be wrapped in ```mermaid code blocks
2. Have correct syntax that renders directly
3. Have clear structure with proper line breaks and indentation
4. Use semantic node naming
5. Include styling when needed to improve visual appearance

Example Output

flowchart TD
    A[Start] --> B{Condition}
    B -->|Yes| C[Execute]
    B -->|No| D[End]
    C --> D