{"skill":{"slug":"excalidraw-creator","displayName":"Excalidraw Creator","summary":"Create hand-drawn style Excalidraw diagrams, flowcharts, and architecture visuals as PNG images","description":"---\nname: excalidraw-creator\ndescription: Create hand-drawn style Excalidraw diagrams, flowcharts, and architecture visuals as PNG images\n---\n\n# Excalidraw Creator\n\nGenerate beautiful hand-drawn style diagrams rendered as PNG images.\n\n## Workflow\n\n1. **Generate JSON** — Write Excalidraw element array based on what the user wants\n2. **Save to file** — Write JSON to `/tmp/<name>.excalidraw`\n3. **Render** — `node <skill_dir>/scripts/render.js /tmp/<name>.excalidraw /tmp/<name>.png`\n4. **Send** — Send the PNG via message tool with `filePath`\n\n## Quick Reference\n\n```bash\nnode <skill_dir>/scripts/render.js input.excalidraw output.png\n```\n\n## Element Types\n\n| Type | Shape | Key Props |\n|------|-------|-----------|\n| `rectangle` | Box | x, y, width, height |\n| `ellipse` | Oval | x, y, width, height |\n| `diamond` | Decision | x, y, width, height |\n| `arrow` | Arrow | connects shapes (see Arrow Binding below) |\n| `line` | Line | x, y, points: [[0,0],[dx,dy]] |\n| `text` | Label | x, y, text, fontSize, fontFamily (1=hand, 2=sans, 3=code) |\n\n### Styling (all shapes)\n\n```json\n{\n  \"strokeColor\": \"#1e1e1e\",\n  \"backgroundColor\": \"#a5d8ff\",\n  \"fillStyle\": \"hachure\",\n  \"strokeWidth\": 2,\n  \"roughness\": 1,\n  \"strokeStyle\": \"solid\"\n}\n```\n\n**fillStyle**: `hachure` (diagonal lines), `cross-hatch`, `solid`\n**roughness**: 0=clean, 1=hand-drawn (default), 2=very sketchy\n\n## Arrow Binding (IMPORTANT)\n\n**Always use `from`/`to` bindings for arrows.** The renderer auto-calculates edge intersection points — no manual coordinate math needed.\n\n### Simple arrow (straight, between two shapes)\n```json\n{\"type\":\"arrow\",\"id\":\"a1\",\"from\":\"box1\",\"to\":\"box2\",\"strokeColor\":\"#1e1e1e\",\"strokeWidth\":2,\"roughness\":1}\n```\nThat's it. No x, y, or points needed. The renderer computes start/end at shape edges.\n\n### Multi-segment arrow (routed path with waypoints)\nFor arrows that need to go around obstacles, use `absolutePoints` with intermediate waypoints:\n```json\n{\n  \"type\":\"arrow\",\"id\":\"a2\",\"from\":\"box3\",\"to\":\"box1\",\n  \"absolutePoints\": true,\n  \"points\": [[375,500],[30,500],[30,127],[60,127]],\n  \"strokeColor\":\"#1e1e1e\",\"strokeWidth\":2,\"roughness\":1\n}\n```\n- First point = near source shape edge (will snap to actual edge)\n- Last point = near target shape edge (will snap to actual edge)\n- Middle points = absolute waypoint coordinates for routing\n\n### Arrow labels\nPlace a separate text element near the arrow midpoint:\n```json\n{\"type\":\"text\",\"id\":\"label\",\"x\":215,\"y\":98,\"width\":85,\"height\":16,\"text\":\"sends data\",\"fontSize\":10,\"fontFamily\":1,\"strokeColor\":\"#868e96\"}\n```\n\n### Arrow styles\n- `\"strokeStyle\":\"dashed\"` — dashed line\n- `\"startArrowhead\": true` — bidirectional arrow\n\n## Template: Flowchart with Bindings\n\n```json\n{\n  \"type\": \"excalidraw\",\n  \"version\": 2,\n  \"elements\": [\n    {\"type\":\"rectangle\",\"id\":\"start\",\"x\":150,\"y\":50,\"width\":180,\"height\":60,\"strokeColor\":\"#1e1e1e\",\"backgroundColor\":\"#b2f2bb\",\"fillStyle\":\"hachure\",\"strokeWidth\":2,\"roughness\":1},\n    {\"type\":\"text\",\"id\":\"t1\",\"x\":200,\"y\":65,\"width\":80,\"height\":30,\"text\":\"Start\",\"fontSize\":20,\"fontFamily\":1,\"strokeColor\":\"#1e1e1e\"},\n\n    {\"type\":\"arrow\",\"id\":\"a1\",\"from\":\"start\",\"to\":\"decision\",\"strokeColor\":\"#1e1e1e\",\"strokeWidth\":2,\"roughness\":1},\n\n    {\"type\":\"diamond\",\"id\":\"decision\",\"x\":140,\"y\":170,\"width\":200,\"height\":120,\"strokeColor\":\"#1e1e1e\",\"backgroundColor\":\"#ffec99\",\"fillStyle\":\"hachure\",\"strokeWidth\":2,\"roughness\":1},\n    {\"type\":\"text\",\"id\":\"t2\",\"x\":185,\"y\":215,\"width\":110,\"height\":30,\"text\":\"Condition?\",\"fontSize\":18,\"fontFamily\":1,\"strokeColor\":\"#1e1e1e\",\"textAlign\":\"center\"},\n\n    {\"type\":\"arrow\",\"id\":\"a2\",\"from\":\"decision\",\"to\":\"process\",\"strokeColor\":\"#1e1e1e\",\"strokeWidth\":2,\"roughness\":1},\n\n    {\"type\":\"rectangle\",\"id\":\"process\",\"x\":150,\"y\":350,\"width\":180,\"height\":60,\"strokeColor\":\"#1e1e1e\",\"backgroundColor\":\"#a5d8ff\",\"fillStyle\":\"hachure\",\"strokeWidth\":2,\"roughness\":1},\n    {\"type\":\"text\",\"id\":\"t3\",\"x\":190,\"y\":365,\"width\":100,\"height\":30,\"text\":\"Process\",\"fontSize\":20,\"fontFamily\":1,\"strokeColor\":\"#1e1e1e\"}\n  ]\n}\n```\n\n## Layout Guidelines\n\n- **Node size**: 140-200 × 50-70 px\n- **Diamond**: 180-200 × 100-120 px (taller for text)\n- **Vertical spacing**: 60-100 px between nodes\n- **Horizontal spacing**: 80-120 px between nodes\n- **Text**: Position inside shape manually (offset ~15-30px from top-left of shape)\n- **Arrow labels**: Place as separate text elements near midpoint of arrow path\n\n## Color Palette\n\n**Fills**: `#a5d8ff` (blue), `#b2f2bb` (green), `#ffec99` (yellow), `#ffc9c9` (red), `#d0bfff` (purple), `#f3d9fa` (pink), `#fff4e6` (cream)\n**Strokes**: `#1e1e1e` (dark), `#1971c2` (blue), `#2f9e44` (green), `#e8590c` (orange), `#862e9c` (purple)\n**Labels**: `#868e96` (gray, for annotations)\n\n## Tips\n\n- Every element needs a unique `id` (required for binding!)\n- Use `from`/`to` on arrows — don't calculate coordinates manually\n- `roughness:0` for clean diagrams, `1` for sketchy feel\n- Text `fontFamily:1` for hand-drawn, `3` for code\n- Group related elements spatially, color-code by type\n- For nested layouts, use a large background rectangle as a container\n","tags":{"latest":"1.0.0"},"stats":{"comments":0,"downloads":1260,"installsAllTime":3,"installsCurrent":3,"stars":0,"versions":1},"createdAt":1771420562079,"updatedAt":1778991440178},"latestVersion":{"version":"1.0.0","createdAt":1771420562079,"changelog":"Initial release of Excalidraw Creator.  \nCreate hand-drawn style diagrams, flowcharts, and architecture visuals as PNG images via JSON element arrays and bindings.\n\n- Generate Excalidraw diagrams by writing element arrays in JSON.\n- Save, render, and send diagrams as PNG images using a simple workflow.\n- Supports key shapes: rectangles, ellipses, diamonds, arrows (with `from`/`to` bindings), lines, and text.\n- Allows customizing styles (color, fill, roughness, dashed lines, etc.).\n- Includes workflow/reference, arrow routing, and layout/color guidelines for easy diagram creation.","license":null},"metadata":null,"owner":{"handle":"plgonzalezrx8","userId":"s173vecwjc09yssmz81twxs1qh884hns","displayName":"Pedro Gonzalez","image":"https://avatars.githubusercontent.com/u/19900049?v=4"},"moderation":null}