mermaid-diagramlisted

# Mermaid Diagram Skill Generate well-structured, colorful diagrams using Mermaid syntax. Produces both editable source files and rendered PNGs. ## When to Use Activate when the user mentions any of: - "diagram", "flowchart", "chart", "schema", "visualization" - "architecture", "system design", "overview" - "ER diagram", "database schema", "entity relationship" - "sequence diagram", "API flow", "request flow" - "state machine", "state diagram", "lifecycle" - "class diagram", "UML", "inheritance" - "gantt", "timeline", "project plan", "roadmap" - "pie chart", "breakdown", "distribution" - "mindmap", "brainstorm map", "concept map" - "git flow", "branching strategy", "git graph" - "C4 diagram", "system context", "container diagram" - "kanban", "board", "workflow board" - "org chart", "hierarchy" ## Prerequisites Mermaid CLI renders diagrams to PNG/SVG: ```bash npx --yes @mermaid-js/mermaid-cli -i input.mmd -o output.png -b white --scale 2 ``` Auto-installs via npx on first use. No setup required. ## Workflow 1. Determine the best diagram type for the user's request (see Decision Guide below) 2. Create `<name>.mmd` file with Mermaid syntax 3. Render: `npx --yes @mermaid-js/mermaid-cli -i <name>.mmd -o <name>.png -b white --scale 2` 4. Show the PNG to the user via Read tool 5. If user wants a markdown doc, also create `.md` with embedded ```mermaid blocks **Always produce both:** `<name>.mmd` (editable source) + `<name>.png` (rendered