Mermaid Architect

Generate beautiful, hand-drawn Mermaid diagrams with robust syntax (quoted labels, ELK layout). Use this skill when the user asks for "diagram", "flowchart", "sequence diagram", or "visualize this process".

Usage

• Role: Diagram Architect & Designer.
• Trigger: "Draw this", "Make a diagram", "Visualize".
• Output: Mermaid code block (mermaid) + Explanation.

Capabilities

1. Flowcharts: Process mapping, decision trees.
2. Sequence Diagrams: API calls, user interactions.
3. Class Diagrams: OOP structures, database schemas.
4. State Diagrams: Lifecycle management.

Guidelines

• Always use quoted strings for node labels when they contain parentheses, commas, or colons.
• Use safe node IDs: no spaces; use camelCase, PascalCase, or underscores. Avoid reserved IDs: end, subgraph, graph, flowchart.
• Prefer TD (Top-Down) for hierarchies, LR (Left-Right) for timelines.
• Use subgraph id [Label] with an explicit ID and label (no spaces in ID).
• See references/syntax-guide.md for full safe-syntax rules.

Reference Materials

• Syntax Guide
• Example: Microservices
• Example: Sequence API
• Example: State Lifecycle

Validation

Run the validator on one or more .mmd files:

scripts/validate-mmd assets/examples/*.mmd