drawio-skill
drawio skill
What it does
- 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.
- 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>
- Diagram type — which preset? (ERD, UML, Sequence, Architecture, ML/DL, Flowchart, SysML, BPMN, Network, Swimlane, or general)
- Output format — PNG (default), SVG, PDF, or JPG?
Requirements & configuration
- When the workflow references one of these, read it on demand — none of them need to be in context up front.
- | 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) |
- | scripts/encodedrawiourl.py | The CLI is unavailable and you need a browser-fallback diagrams.net URL (--edit for an editable editor URL) |
- 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.
Configuration: CREATEIEND
Derived from the skill's own SKILL.md documentation · extracted 2026-07-23
drawio-skill FAQ
What does the drawio-skill skill do?
Use when the user requests diagrams, flowcharts, architecture diagrams, ER diagrams, UML / sequence / class diagrams, SysML / MBSE diagrams (block definition, internal block, requirement, parametric), BPMN business process diagrams, swimlane / cross-functional flowcharts, network topology, cloud architecture from Terraform or Kubernetes manifests, ML/DL model figures (Transformer/CNN/LSTM), mind maps, or any visualization. Also use proactively when explaining systems with 3+ components, complex data flows, or relationships that benefit from visual representation. Best suited when the diagram needs custom styling, rich shape vocabulary, swimlanes, or exportable images (PNG/SVG/PDF/JPG). Generates .drawio XML and exports locally via the native draw.io desktop CLI. A casual hand-drawn / whiteboard look → excalidraw or tldraw. Diagrams-as-code that live in git / render in Markdown → mermaid (general) or plantuml (UML).
What does drawio-skill require?
When the workflow references one of these, read it on demand — none of them need to be in context up front. | 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) | | scripts/encodedrawiourl.py | The CLI is unavailable and you need a browser-fallback diagrams.net URL (--edit for an editable editor URL) | 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. Configuration keys: CREATE, IEND.
How do I install drawio-skill?
Run: npx -y skills add https://github.com/agents365-ai/365-skills --skill drawio-skill --agent claude-code — the source lives at github.com/agents365-ai/365-skills.
Maintain drawio-skill?
Let people know it's listed here — add the badge (live metrics, light/dark aware) or a plain link to your README or docs.
[](https://getagentictools.com/skills/agents365-ai-365-skills-drawio-skill?ref=badge) npx agentictools info skills/agents365-ai-365-skills-drawio-skill The second line is the CLI lookup for this page — handy in READMEs and docs.