mermaid-diagram-builderlisted

# Mermaid Diagram Builder ## Overview Mermaid is a text-based diagramming language that renders to SVG. Because diagrams are plain text, they live in version control, diff cleanly in PRs, and render natively on GitHub, GitLab, Notion, Obsidian, VS Code, and most Markdown tools. This skill helps you (1) pick the correct diagram type for the user's intent, (2) write valid, idiomatic Mermaid, (3) style it for clarity, and (4) verify it renders before delivering. Keywords: mermaid, diagram, flowchart, sequence diagram, ER diagram, entity relationship, class diagram, state diagram, gantt, C4, architecture, diagram as code, graphviz alternative, markdown diagram. ## Workflow 1. **Clarify intent.** Determine what the user is modeling: a *process/decision* (flowchart), an *interaction over time* (sequence), a *data model* (ER), an *object structure* (class), *lifecycle states* (state), a *schedule* (gantt), or a *system's components* (C4/architecture). If ambiguous, ask one targeted question or pick the best fit and say why. See `references/diagram-types.md` for the selection guide. 2. **Choose the diagram type** using the decision table in `references/diagram-types.md`. 3. **Draft the Mermaid code** following the syntax patterns in `references/syntax-cheatsheet.md`. Start with the header keyword (e.g. `flowchart TD`), then nodes/relationships, then styling last. 4. **Apply clarity conventions** (direction, concise labels, grouping with subgraphs, consistent node shapes). See Bes