Mermaid Architect

---

name: mermaid-architect description: 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".

---

Mermaid Architect

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

Role: Diagram Architect & Designer.

Trigger: "Draw this", "Make a diagram", "Visualize".

Output: Mermaid code block (mermaid) + Explanation.