draw-io
draw-io handles diagram creation and editing through direct XML manipulation of .drawio files, with built-in PNG conversion at 2x resolution and transparent backgrounds. The skill includes layout adjustment via coordinate editing, font configuration for multi-language support, and access to official AWS icons for infrastructure diagrams. Design principles cover clarity, consistency, accessibility, and progressive disclosure across diagram types.
draw-io edits and creates diagrams in XML format, converting them to PNG with AWS icon support.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-03-05
draw-io edits and creates diagrams in XML format, converting them to PNG with AWS icon support. draw-io handles diagram creation and editing through direct XML manipulation of .drawio files, with built-in PNG conversion at 2x resolution and transparent backgrounds. The skill includes layout adjustment via coordinate editing, font configuration for multi-language support, and access to official AWS icons for infrastructure diagrams. Design principles cover clarity, consistency, accessibility, and progressive disclosure across diagram types.
Use it when
- Yes.
- draw-io applies design principles covering clarity, consistency, accessibility, and progressive disclosure.
Verify before relying
Read SKILL.md below before installing (6 files). Open directory: indexed for reading, not audited.
Install
softaworks/agent-toolkit/draw-io · repository language: Python
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I edit .drawio files directly?
draw-io edits .drawio files through direct XML manipulation. You can open any .drawio file as text, modify the XML structure to adjust elements, coordinates, and properties, then save. draw-io also provides programmatic access to create and transform diagrams by editing their underlying XML representation before converting to PNG output.
Can draw-io convert drawio to png automatically?
Yes. draw-io includes built-in PNG conversion at 2x resolution with transparent backgrounds. The skill handles batch conversion of .drawio files to PNG format, making it suitable for automation workflows, pre-commit hooks, and integration into documentation pipelines like Quarto slide presentations.
What design principles does draw-io follow for diagram clarity?
draw-io applies design principles covering clarity, consistency, accessibility, and progressive disclosure. The skill emphasizes proper element positioning, layout adjustment via coordinate editing, font configuration for multi-language support, and color contrast for accessibility. These practices ensure diagrams remain readable and maintainable across different contexts and audiences.
Does draw-io support AWS icons and font customization?
Yes. draw-io provides access to official AWS icons for infrastructure diagrams and includes font configuration for multi-language support, including Japanese text width handling. This makes it suitable for technical documentation, Quarto presentations, and diagrams requiring localized content or cloud architecture visualization.
How does draw-io handle diagram layout and positioning?
draw-io adjusts diagram layout through direct coordinate editing in the XML. You can modify element positioning, arrow placement, background frame margins, and spacing by editing the underlying coordinate values. This fine-grained control enables precise alignment and professional formatting for complex diagrams.
Is draw-io licensed and suitable for production use?
draw-io is licensed under MIT, making it free and suitable for production use. The skill supports integration into automated workflows, pre-commit hooks, and continuous documentation pipelines, with built-in accessibility and visual verification capabilities to ensure diagram quality.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
draw.io Diagram Skill
1. Basic Rules
- Edit only
.drawiofiles - Do not directly edit
.drawio.pngfiles - Use auto-generated
.drawio.pngby pre-commit hook in slides
2. Font Settings
For diagrams used in Quarto slides,
specify defaultFontFamily in mxGraphModel tag:
<mxGraphModel defaultFontFamily="Noto Sans JP" ...>
Also explicitly specify fontFamily in each text element's style attribute:
style="text;html=1;fontSize=27;fontFamily=Noto Sans JP;"
3. Conversion Commands
See conversion script at scripts/convert-drawio-to-png.sh.
# Convert all .drawio files
mise exec -- pre-commit run --all-files
# Convert specific .drawio file
mise exec -- pre-commit run convert-drawio-to-png --files assets/my-diagram.drawio
# Run script directly (using skill's script)
bash ~/.claude/skills/draw-io/scripts/convert-drawio-to-png.sh assets/diagram1.drawio
Internal command used:
```sh drawio -x -f png -s 2 -t -o output.drawio.png
(truncated - see the full file via the links below)
File tree — 6 files
skills/draw-io/README.md
skills/draw-io/SKILL.md
skills/draw-io/references/aws-icons.md
skills/draw-io/references/layout-guidelines.md
skills/draw-io/scripts/convert-drawio-to-png.sh
skills/draw-io/scripts/find_aws_icon.py
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Edit and create draw.io diagrams with XML and convert to PNG”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Build logical flow diagrams, system architecture visualizations, BPMN process flows, UML diagrams, and data flow diagrams using draw.io's native XML format. The skill handles generic system representations—flowcharts, decision trees, sequence diagrams, and abstract architectures—without cloud-specific components.
This skill generates pixel-perfect AWS architecture diagrams as draw.io XML files (.drawio) using the official AWS4 shape library, ready for use in diagrams.net. It handles VPC layouts, multi-tier application designs, serverless architectures, and network topologies with proper styling, color codes, and connector conventions. Perfect for infrastructure documentation and Well-Architected reviews.
Create polished diagrams—flowcharts, organizational hierarchies, UML schematics, and network layouts—as draw.io-compatible XML files. The skill handles diagram structure, styling, and layout, then outputs files you can open directly in draw.io's desktop or web application.
This skill transforms diagram requirements into draw.io XML, then exports the result as an image. It handles flowcharts, architecture layers, UML sequences and classes, entity-relationship diagrams, mindmaps, and network topologies—each with layout rules tuned for clarity and spacing.
drawio-skill creates polished diagrams—architecture, UML, ER, flowcharts, BPMN, and more—from text descriptions or code imports. It generates .drawio XML and exports locally via the draw.io desktop CLI to PNG, SVG, PDF, or JPG, with optional embedding for editability. Use it for precise, styled diagrams with rich shape libraries and swimlanes; for casual sketches or Markdown-embedded diagrams, consider mermaid or excalidraw instead.
Build flowcharts, swimlanes, BPMN diagrams, UML models, network topologies, org charts, and project management visuals through draw.io's MCP server. The skill generates mxGraphModel XML for instant browser preview and editing, supporting extensive diagram types from basic process flows to complex PERT charts and risk matrices.
More skills Drawio (NOASSERTION) · drawio (Apache-2.0) · excalidraw-diagram-generator (MIT) · Drawio Generator (unlicensed) · Drawio To Png (unlicensed)