excalidrawlisted

# Excalidraw Diagram Generator Generate hand-drawn style diagrams rendered as SVG + PNG. ## Configuration Set your preferred output directory below. Defaults to `~/Downloads/Excalidraw/`. ``` OUTPUT_DIR: ~/Downloads/Excalidraw/ ``` To customize, edit the `OUTPUT_DIR` line above to any absolute path (e.g., `~/Documents/Diagrams/`, `~/Desktop/Sketches/`). | Key | Value | |-----|-------| | Formats | `.svg` + `.png` (2x resolution) | | Fonts | Virgil (handwritten) + Cascadia (monospace) | | Renderer | `scripts/render.mjs` (roughjs + xmldom + resvg) | | Reference | `references/element-format.md` | ## Workflow ### Step 1: Analyze the request Identify the components, relationships, and flow direction from the user's prompt. Decide on: - Shape types (rectangles for services, ellipses for actors, diamonds for decisions) - Connections (arrows between components) - Layout direction (top-to-bottom, left-to-right) - Appropriate canvas size ### Step 2: Read the element format reference Read `references/element-format.md` (relative to this skill's directory) for the full JSON format specification, color palette, and layout rules. ### Step 3: Generate diagram JSON Create a JSON object following the element format. Key rules: **IDs and references:** - Give every shape that receives/sends arrows a unique `id` - Arrow `from`/`to` reference shape IDs **Text and labels (CRITICAL for clean output):** - Use the `subtitle` property on title