# Drawio Skill > Generate draw.io diagrams — .drawio XML exported to PNG/SVG/PDF/JPG via the desktop CLI. Use when the user asks for draw.io specifically, or a requested diagram needs what Mermaid's auto-layout can't give — custom styling, swimlanes, or a rich shape vocabulary (network topology, ML/DL model figures). Default and proactive diagramming belongs to mermaid-skill. - **Type:** Skill - **Install:** `agentstack add skill-yassimba-loom-drawio-skill` - **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior - **Seller:** [Yassimba](https://agentstack.voostack.com/s/yassimba) - **Installs:** 0 - **Category:** [Content & Media](https://agentstack.voostack.com/c/content-and-media) - **Latest version:** 0.1.0 - **License:** Apache-2.0 - **Upstream author:** [Yassimba](https://github.com/Yassimba) - **Source:** https://github.com/Yassimba/loom/tree/main/skills/drawio-skill ## Install ```sh agentstack add skill-yassimba-loom-drawio-skill ``` Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent. ## About # Draw.io Diagrams ## Overview Generate `.drawio` XML files and export to PNG/SVG/PDF/JPG locally using the native draw.io desktop app CLI. **Supported formats:** PNG, SVG, PDF, JPG — no browser automation needed. PNG, SVG, and PDF exports support `--embed-diagram` (`-e`) — the exported file contains the full diagram XML, so opening it in draw.io recovers the editable diagram. Use double extensions (`name.drawio.png`) to signal embedded XML. ## When to use / when NOT to use **Use this skill for:** polished, precise diagrams (architecture, network, strict UML, ERD), anything needing solid opaque fills, 10,000+ stock/branded shapes, swimlanes, or custom geometry, exported as editable PNG/SVG/PDF. **Do NOT use it — route elsewhere — for:** - A casual hand-drawn / whiteboard look → **excalidraw** or **tldraw**. - Diagrams-as-code that live in git / render in Markdown → **mermaid** (general) or **plantuml** (UML). - Freeform infinite-canvas sketching or freehand strokes → **tldraw**. ## Bundled resources When the workflow references one of these, read it on demand — none of them need to be in context up front. | File | Read it when | | --------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `references/diagram-types.md` | The user names a specific diagram type (ERD, UML class, sequence, architecture, ML/DL, flowchart) | | `references/shapes.md` + `scripts/shapesearch.py` | The diagram needs a **specific shape** — a cloud icon (AWS/Azure/GCP), Cisco/Kubernetes/network symbol, UML/BPMN/ER/electrical/P&ID element — or any time you'd otherwise guess a `style=` string. `shapesearch.py ""` returns the exact official style for 10k+ shapes | | `scripts/aiicons.py` | The diagram involves an **AI/LLM brand** (OpenAI, Claude, Gemini, Mistral, Llama, HuggingFace, Ollama, LangChain, …) — `aiicons.py ""` returns a draw.io `image` style for the brand logo (lobe-icons via CDN; `--embed` to inline). draw.io has no built-in AI logos. See `references/shapes.md` → "AI / LLM brand logos" | | `references/style-presets.md` | The user asks to learn / save / list / set-default / delete a style preset, or you've resolved an active preset and need the application rules | | `references/style-extraction.md` | You're inside the Learn flow and need the extraction procedure (called from `style-presets.md`) | | `references/troubleshooting.md` | An export fails, vision rejects a PNG, or a rendering looks wrong | | `scripts/repair_png.py` | After every `-e` PNG export — fixes draw.io's truncated IEND chunk (issue #8) | | `scripts/encode_drawio_url.py` | The CLI is unavailable and you need a browser-fallback diagrams.net URL (`--edit` for an editable editor URL) | | `references/autolayout.md` | The diagram is large or layout-heavy (dependency/call graph, code structure, >~15 nodes) and you want Graphviz to place nodes + route edges instead of hand-placing coordinates | | `scripts/pyimports.py` · `jsimports.py` · `goimports.py` · `rustimports.py` | The user wants to visualize a **Python, JS/TS, Go, or Rust project** structure — extracts the import graph (transitive-reduced, optional `--group` containers, nested by sub-package) for autolayout | | `scripts/pyclasses.py` | The user wants a **Python class hierarchy / class diagram** — extracts classes + inheritance edges (boxed by module with `--group`) for autolayout | | `scripts/validate.py` | You generated a `.drawio` (especially via autolayout or for a large hand-placed diagram) and want a fast deterministic structural lint (dangling edges, dup/reserved ids, broken parents, overlaps) before the vision self-check | ## Prerequisites The draw.io desktop app must be installed and the CLI accessible: **macOS sandbox / sandbox isolation note (e.g., codex.app):** In some sandboxed macOS environments, invoking the draw.io desktop CLI (even `drawio --version`) can crash the draw.io process or produce no output. If that happens, treat the CLI as **unavailable in this sandbox isolation** — do not keep retrying inside the sandbox. Prefer a **non-sandboxed host environment** (outside sandbox isolation) for any CLI export work, or use the browser fallback / XML-only outputs. ```bash # macOS (Homebrew — recommended; CLI binary is `drawio`, not `draw.io`) brew install --cask drawio drawio --version # macOS (full path if not in PATH) /Applications/draw.io.app/Contents/MacOS/draw.io --version # Windows "C:\Program Files\draw.io\draw.io.exe" --version # Linux drawio --version ``` Install draw.io desktop if missing: - macOS: `brew install --cask drawio` or download from https://github.com/jgraph/drawio-desktop/releases - Windows: download installer from https://github.com/jgraph/drawio-desktop/releases - Linux: download `.deb`/`.rpm` from https://github.com/jgraph/drawio-desktop/releases — **do not use snap** (AppArmor sandbox denies secrets/keyring on servers, causes crash) ## Workflow Before starting the workflow, assess whether the user's request is specific enough. If key details are missing, ask 1-3 focused questions: - **Diagram type** — which preset? (ERD, UML, Sequence, Architecture, ML/DL, Flowchart, or general) - **Output format** — PNG (default), SVG, PDF, or JPG? - **Output location** — default is the user's working dir; honor any explicit path the user gives (e.g. "put it in `./artifacts/`"). Don't ask if they didn't mention one. - **Scope/fidelity** — how many components? Any specific technologies or labels? Skip clarification if the request already specifies these details or is clearly simple (e.g., "draw a flowchart of X"). **Step 0 — Resolve active preset.** Determine which (if any) user-defined style preset applies to this generation. - Scan the user's message for a phrase that clearly names a style preset: "use my `` style", "with my `` style", "in `` mode", "in the style of ``". A bare `with ` does **not** count — "draw a diagram with redis" names a component, not a style. If a clear match is found → active preset = ``. - Else, check `~/.drawio-skill/styles/` for any file with `"default": true`. If found → active preset = that one. - Else → no preset active; fall through to the built-in color/shape/edge conventions for the rest of the workflow. Load the preset JSON from `~/.drawio-skill/styles/.json`, falling back to `/styles/built-in/.json`. If the named preset exists in neither location, tell the user the name is unknown, list the available presets (user dir + built-in), and stop — do **not** silently fall back to defaults. When a preset loads successfully, mention it in the first line of the reply: _"Using preset `` (confidence: ``)."_ See the **Applying a preset** subsection below for how the preset changes color/shape/edge/font decisions. 1. **Check deps** — **resolve which name the binary has on this system** and use that name verbatim in every subsequent command in this workflow. Try in order: (a) `drawio --version` (the canonical name for Homebrew cask, jgraph `.deb`/`.rpm`, Arch AUR), (b) `draw.io --version` (older builds, some custom symlinks, some distro packages), (c) macOS `.app` direct: `/Applications/draw.io.app/Contents/MacOS/draw.io --version`, (d) Windows: `"C:\Program Files\draw.io\draw.io.exe" --version`. The first one that prints a version is your binary; remember the exact path/name and substitute it for `drawio` in every export command below. **Do not copy the example commands verbatim if your binary is named differently** — the examples use `drawio` only because it's the most common. On macOS-Homebrew, `drawio` is just a thin wrapper script that execs `/Applications/draw.io.app/Contents/MacOS/draw.io` — they run the same engine, so candidate (c) is only needed when the `drawio` wrapper is absent (e.g. the app was installed by drag-and-drop without the cask). 2. **Plan** — identify shapes, relationships, layout (LR or TB), group by tier/layer 3. **Generate** — write `.drawio` XML file to disk. Hand-place coordinates for small/styled diagrams. **For large or layout-heavy diagrams (dependency/call graphs, code structure, >~15 nodes), don't hand-place** — describe the graph as JSON and run `python3 /scripts/autolayout.py graph.json -o .drawio` to compute node positions + orthogonal edge routing via Graphviz (see `references/autolayout.md`). For a **Python / JS-TS / Go / Rust project**, the matching importer (`scripts/pyimports.py`, `jsimports.py`, `goimports.py`, or `rustimports.py`) extracts the import graph (transitive-reduced; add `--group` to box modules by sub-package, nested for deep trees) ready for autolayout; for a **Python class hierarchy**, `scripts/pyclasses.py` extracts classes + inheritance instead. After generating any `.drawio`, run `python3 /scripts/validate.py .drawio` for a fast structural lint (dangling edges, dup ids, overlaps) before exporting. Default output dir is the user's working dir; if the user specified an output path or directory (e.g. `./artifacts/`, `ai-docs/images/`), use that instead — `mkdir -p` the target dir first. Apply the same dir choice to PNG/SVG/PDF exports in steps 4 and 7. 4. **Export draft** — run CLI to produce a preview PNG. **Do NOT pass `-e`** at this step — the embedded `zTXt mxGraphModel` chunk it adds causes vision APIs (Claude included) to return 400 "Could not process image" in step 5. **Cap the preview width with `--width 2000` (not `-s 2`)** — Claude's vision API rejects images larger than 2576×2576px with "Unable to resize image — dimensions exceed the 2576x2576px limit", and `-s 2` on a medium-or-larger diagram easily overshoots that ceiling. Save the clean preview as `.png` (single extension). Embedding and full-resolution scale are for the final export only (step 7). 5. **Self-check** — use the agent's built-in vision capability to read the exported PNG, catch obvious issues, auto-fix before showing user (requires a vision-enabled model such as Claude Sonnet/Opus). If reading the PNG returns a 400 / "Could not process image" error, you almost certainly exported with `-e` by mistake — re-export without `-e` and retry once. If it still fails, skip self-check and continue to step 6. 6. **Review loop** — show image to user, collect feedback, apply targeted XML edits, re-export, repeat until approved 7. **Final export** — re-export the approved version to all requested formats. Use `-e` here (PNG/SVG/PDF) so the deliverable stays editable in draw.io; save as `.drawio.png` to signal embedded XML. **For PNG with `-e`, run `python3 /scripts/repair_png.py .drawio.png` immediately after** — draw.io's CLI truncates the IEND chunk in `-e` PNG output (8 bytes missing), producing a corrupt file that vision APIs and strict PNG decoders reject (issue #8). Report file paths. **If `drawio --version` crashes or prints nothing (common in restricted macOS sandbox isolation like codex.app):** - Do not keep retrying CLI invocations inside the sandbox. - Skip steps 4, 5, 6, and 7 (CLI export + PNG-based review) and use **Browser fallback** (`scripts/encode_drawio_url.py`) or deliver the `.drawio` XML only. - If the user needs PNG/SVG/PDF outputs, ask them to run the export commands in a **non-sandboxed host environment** (outside sandbox isolation) and share the resulting files. Escalation rule: - If the binary exists on PATH (or known app path exists) but execution fails with abnormal exit, empty output, Electron startup failure, display/session error, or likely sandbox restriction, prefer one escalated retry before falling back. - If the binary is missing entirely, do not escalate just to search more aggressively; go to install guidance or fallback. ### Step 5: Self-Check After exporting the draft PNG, use the agent's vision capability (e.g., Claude's image input) to read the image and check for these issues before showing the user. If the agent does not support vision, skip self-check and show the PNG directly. **Important:** the draft PNG read here must have been exported **without** `-e`. Draw.io's `-e` flag emits a PNG with a truncated IEND chunk (8 bytes of type+CRC missing) that the Anthropic vision API rejects with 400 "Could not process image" (issue #8). The simplest fix for the preview step is to skip `-e` entirely; the final export in step 7 keeps `-e` and runs the repair snippet. If you see the 400 error here, re-export without `-e` and retry once; if it still fails (any other reason), skip self-check and proceed to step 6. | Check | What to look for | Auto-fix action | | ------------------- | --------------------------------------------------------- | --------------------------------------------------------------------------------------------------- | | Overlapping shapes | Two or more shapes stacked on top of each other … ## Source & license This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code. - **Author:** [Yassimba](https://github.com/Yassimba) - **Source:** [Yassimba/loom](https://github.com/Yassimba/loom) - **License:** Apache-2.0 Install and usage instructions live in the source repository linked above. ## Pricing - **Free** — Free ## Security capabilities Automated source analysis of v0.1.0 — what this tool can access: - **Network access:** no - **Filesystem access:** no - **Shell / process execution:** no - **Environment & secrets:** no - **Dynamic code execution:** no *"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.* ## Versions - **0.1.0** — security scan: passed — Imported from the upstream source. ## Links - Listing page: https://agentstack.voostack.com/l/skill-yassimba-loom-drawio-skill - Seller: https://agentstack.voostack.com/s/yassimba - Browse the marketplace: https://agentstack.voostack.com/browse --- Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.