Skip to main content
Generaldvcrn

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\".

Stars
15
Source
dvcrn/openclaw-skills-marketplace
Updated
2026-05-29
Slug
dvcrn--openclaw-skills-marketplace--mermaid-architect
View on GitHubRaw SKILL.md

// install — copy + paste into any project

mkdir -p .claude/skills && curl -fsSL https://raw.githubusercontent.com/dvcrn/openclaw-skills-marketplace/HEAD/plugins/1999azzar--mermaid-architect/skills/mermaid-architect/SKILL.md -o .claude/skills/mermaid-architect.md

Drops the SKILL.md into .claude/skills/mermaid-architect.md. Works with Claude Code, Cursor, and any agent that loads SKILL.md files from .claude/skills/.

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

Validation

Run the validator on one or more .mmd files:

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