raphi011/mermaid

Mermaid Diagram Generator

ALWAYS use <br/> for line breaks in node labels — NEVER \n. \n renders as the literal characters \n in every diagram type. This applies to flowchart nodes, sequence diagram notes, and all other shapes.

Generate Mermaid diagram code from user requirements. Always read the reference doc for the chosen diagram type before generating — don't rely on memory.

Diagram Type Selection

Read the corresponding reference before generating. Each file contains the full syntax spec with examples.

| Type | Reference | When to use | | ---- | --------- | ----------- | | Flowchart | flowchart.md | Processes, decisions, workflows, algorithms | | Sequence | sequenceDiagram.md | API calls, service interactions, message flows | | Class | classDiagram.md | OOP structure, inheritance, interfaces | | State | stateDiagram.md | State machines, lifecycle transitions | | ER | entityRelationshipDiagram.md | Database schema, entity relationships | | C4 | c4.md | System architecture (context, container, component) | | Architecture | architecture.md | System components with icons and groups | | Gantt | gantt.md | Project timelines, task scheduling | | Mindmap | mindmap.md | Hierarchical brainstorming, knowledge graphs | | Timeline | timeline.md | Historical events, milestones | | Git Graph | gitgraph.md | Branch strategies, merge flows | | User Journey | userJourney.md | UX flows with satisfaction scores | | Kanban | kanban.md | Task boards, workflow stages | | Block | block.md | System component diagrams, modules | | Sankey | sankey.md | Flow quantities, conversions | | XY Chart | xyChart.md | Line/bar charts with data | | Pie | pie.md | Proportions, distributions | | Quadrant | quadrantChart.md | 2x2 analysis matrices | | Radar | radar.md | Multi-dimensional comparison | | Treemap | treemap.md | Hierarchical data visualization | | Packet | packet.md | Network protocols, binary structures | | Requirement | requirementDiagram.md | Requirements traceability | | ZenUML | zenuml.md | Sequence diagrams (code-style syntax) |

Configuration references

• Theming — custom colors and styles
• Directives — per-diagram %%{init: ...}%% config
• Layouts — direction and spacing
• Configuration — global settings
• Math — LaTeX math in labels

Common Mistakes

Newlines: use <br>, NOT \n

\n renders as literal text in most shapes. Always use <br> and wrap the label in quotes:

A["Line one<br>Line two"]       %% ✅ works
B("Line one\nLine two")         %% ❌ literal \n

Reserved word "end"

The word end in lowercase breaks flowcharts and sequence diagrams. Use End, END, or wrap in quotes/brackets.

Edge labels with special chars

Wrap edge labels containing special characters in quotes:

A -->|"yes (confirmed)"| B      %% ✅ quoted
A -->|yes (confirmed)| B        %% ❌ breaks on parens

Flowchart node IDs starting with "o" or "x"

A---oB creates a circle edge, A---xB a cross edge. Add a space or capitalize: A--- oB or A---OB.

Subgraph direction + cross-subgraph arrows = overlap

Mixing direction TB/LR inside subgraphs with cross-subgraph arrows causes subgraph boxes to overlap. Use a plain graph TD or graph LR without inner direction directives when arrows cross subgraph boundaries:

%% ❌ causes overlap
flowchart LR
    subgraph A
        direction TB
        X --> Y
    end
    subgraph B
        direction TB
        P --> Q
    end
    Y --> P   %% cross-subgraph arrow breaks layout

%% ✅ use graph TD without inner direction
graph TD
    subgraph A
        X --> Y
    end
    subgraph B
        P --> Q
    end
    Y --> P

Output Rules

1. Wrap in ```mermaid code blocks
2. Use semantic node IDs (userService, authCheck, not A, B, C)
3. Keep diagrams focused — split complex systems into multiple diagrams rather than one giant one
4. Apply %%{init: {'theme': 'neutral'}}%% when the default theme is too colorful

---

User requirements: $ARGUMENTS