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".
$ git log --oneline --stat
stars:1,933
forks:367
updated:March 4, 2026
SKILL.mdreadonly
SKILL.md Frontmatter
namemermaid-architect
descriptionGenerate 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
- Flowcharts: Process mapping, decision trees.
- Sequence Diagrams: API calls, user interactions.
- Class Diagrams: OOP structures, database schemas.
- 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
Validation
Run the validator on one or more .mmd files:
scripts/validate-mmd assets/examples/*.mmd