drawing-diagramslisted

Use when asked to draw, render, or visualize any diagram on a hand-drawn Excalidraw canvas — architecture diagrams, dependency maps (Node.js package.json AND Python pyproject.toml/requirements.txt), file tree / directory structure, sequence diagrams, state machines, flowcharts, process flows, system topologies, data-flow diagrams, ER diagrams, or "draw this on a whiteboard". Triggers include "draw the architecture", "visualize this", "make a diagram", "deps diagram", "Python deps", "show the file tree", "draw the directory structure", "sequence for the login flow", "flowchart for X", "state machine", "draw the data flow", "whiteboard this", or any "render onto the canvas / Excalidraw" intent. Skip for PDFs, screenshots of existing images, UI mockups, or non-visual outputs.
must-mohsin1/drawing-diagrams · ★ 0 · Data & Documents · score 70

Install: claude install-skill must-mohsin1/drawing-diagrams

# Drawing Diagrams on Excalidraw Render any diagram type onto a live Excalidraw canvas at `http://127.0.0.1:3030`, then export a canonicalized JSON snapshot. Two paths: - **Deterministic generators** for fact-based diagrams: dependency map (from `package.json`), file tree (planned). - **LLM-driven canvas-primitive composition** for synthesis diagrams: architecture, sequence, state machine, flowchart, data flow, ER/schema, custom. The skill teaches the LLM the canvas API, the layout disciplines, and how to verify before declaring done. ## Type detection — figure out what kind of diagram | User said something like… | Diagram type | Path | |---|---|---| | "draw the deps", "dep map", "visualize package.json" (Node) | **Node.js dep map** | Deterministic — `scripts/gen_deps_diagram.py` against a `package.json` | | "Python deps", "visualize pyproject.toml", "deps from requirements.txt" | **Python dep map** | Deterministic — `scripts/gen_deps_diagram.py` against `pyproject.toml` or `requirements.txt`. Auto-detects ecosystem from filename. | | "file tree", "directory structure", "show me the repo layout", "draw the codebase" | **File tree** | Deterministic — `scripts/gen_file_tree_diagram.py` walks the directory | | "architecture diagram", "system diagram", "modules + relationships", "draw the components" | **Architecture** | LLM-driven (read code, pick layout, place primitives) | | "sequence diagram", "request flow", "swimlanes", "how X talks to Y over time" | **Sequence** | LLM