Generate Excalidraw diagram JSON files and render them to PNG for visual validation.
npx skills add https://github.com/Dawaad/skills --skill draw-dawaad
Please help me install this Agent Skill. Skill: draw Source: https://github.com/Dawaad/skills/tree/main/draw Command: npx skills add https://github.com/Dawaad/skills --skill draw-dawaad
.excalidraw JSON using a visual pattern library (fan-out, timeline, tree, cycle, side-by-side) with semantic shapes, colours, and evidence artifacts like real code snippets and event names. - Headless PNG rendering: A Playwright-based renderer exports any .excalidraw file to PNG so the output can be visually audited and fixed in a render-fix loop. - Customisable brand palette: All colours live in a single color-palette.md reference file, so re-skinning every diagram requires editing one file. - Use Case: Ask for a diagram of a streaming protocol integration and receive a multi-zoom Excalidraw file showing the summary flow, section boundaries, real event names, and a code snippet, rendered to PNG for review. ## Quick Start Ask the assistant to create an Excalidraw diagram of your system architecture or workflow and render it to a PNG for review.High-intent search queries and answers about installing and using this skill.
Generate a JSON file with top-level type "excalidraw", an elements array of rectangles, ellipses, text, and arrows, plus an appState object. Copy element templates from the references and bind text to shapes via containerId and boundElements.
Run uv run python render_excalidraw.py path/to/file.excalidraw from the references directory. The script loads the Excalidraw library in headless Chromium via Playwright and writes a PNG next to the input file, with an optional scale argument.
The renderer requires Python 3.10+, the playwright package installed via uv sync, and a Chromium browser binary installed with uv run playwright install chromium. It also needs network access to esm.sh to load the Excalidraw library at render time.
The script pins @excalidraw/[email protected] loaded from the esm.sh CDN. If your network blocks esm.sh or that version is unreachable, the render fails; edit EXCALIDRAW_VERSION at the top of render_excalidraw.py to pin a reachable version.
A blank export means the scene is invalid: the file must have top-level "type": "excalidraw" and a non-empty elements array. Check that coordinates do not overlap unintentionally and that the JSON parses before rendering.
Edit references/color-palette.md, which is the single source of truth for every colour the skill uses, organised by semantic role such as fills, strokes, text, and evidence artifacts. The skill reads this file before generating any diagram.
JongDeugGenerate Excalidraw JSON diagrams in a clean draw.io style from natural language descriptions.
odylithRender Atlas diagrams from Yardl or other sources into Minecraft's Yak? No, Yak is not involved. Actually, reprocess the request: convert Mermaid catalog data to Atlas diagrams and export them as SVG or PNG files for use in documentation and presentations.
fjrevoredoEdit and regenerate Mermaid and D2 diagram sources with SVG verification.
neverpreparedConvert visual diagrams from images into Mermaid or Graphviz code.