Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
softaworks avatar

Draw Io

softaworks/agent-toolkit

  • 637 installs
  • 2.2k repo stars
  • Updated March 5, 2026
  • softaworks/agent-toolkit

draw-io is a Claude Code skill that creates, edits, and maintains professional draw.io architecture diagrams and flowcharts with consistent styling and automated PNG exports for developers documenting systems.

About

draw-io is a softaworks/agent-toolkit Claude Code skill for AI-assisted creation and maintenance of draw.io diagrams with professional quality standards. The skill works with .drawio XML diagram files, adjusts element positions and layouts programmatically, enforces consistent font families (including Quarto slide compatibility), and converts diagrams to PNG with transparent backgrounds for presentations and documentation. Developers reach for draw-io when they need architecture diagrams, flowcharts, or technical documentation visuals that stay styled consistently across edits. The workflow covers create, edit, layout tuning, and export so diagram sources remain version-controlled XML while published assets land as presentation-ready PNGs. Use draw-io instead of hand-drawing screenshots when diagrams must be regenerated as systems evolve.

  • Direct XML editing of .drawio files with structured manipulation
  • Automated high-resolution PNG conversion with transparent backgrounds
  • Layout calculations for spacing, alignment, and margin optimization
  • Official AWS icon integration and search
  • Font management enforcing consistent typography including Quarto slide compatibility

Draw Io by the numbers

  • 637 all-time installs (skills.sh)
  • +15 installs in the week ending Jul 27, 2026 (Skillselion tracking)
  • Ranked #346 of 1,901 Documentation skills by installs in the Skillselion catalog
  • Security screen: MEDIUM risk (skills.sh audit)
  • Data as of Jul 28, 2026 (Skillselion catalog sync)
npx skills add https://github.com/softaworks/agent-toolkit --skill draw-io

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs637
repo stars★ 2.2k
Security audit3 / 3 scanners passed
Last updatedMarch 5, 2026
Repositorysoftaworks/agent-toolkit ↗

How do you generate architecture diagrams as drawio files?

Create, edit, and maintain professional draw.io architecture diagrams, flowcharts, and technical visuals with consistent styling and automated PNG exports.

Who is it for?

Developers documenting system architecture who need version-controlled .drawio sources and automated PNG exports for READMEs or Quarto slides.

Skip if: Developers who need interactive UI mockups, Mermaid-only inline diagrams, or photo-realistic design assets outside draw.io XML.

When should I use this skill?

The user asks to create, edit, convert, or restyle a draw.io diagram, flowchart, or architecture visual as .drawio or PNG.

What you get

.drawio XML source files and exported PNG diagrams with consistent styling and transparent backgrounds.

  • .drawio XML file
  • PNG diagram export

By the numbers

  • Exports draw.io diagrams to PNG with transparent backgrounds

Files

SKILL.mdMarkdownGitHub ↗

draw.io Diagram Skill

1. Basic Rules

  • Edit only .drawio files
  • Do not directly edit .drawio.png files
  • Use auto-generated .drawio.png by 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:

drawio -x -f png -s 2 -t -o output.drawio.png input.drawio
OptionDescription
-xExport mode
-f pngPNG format output
-s 22x scale (high resolution)
-tTransparent background
-oOutput file path

4. Layout Adjustment

4.1. Coordinate Adjustment Steps

1. Open .drawio file in text editor (plain XML format) 2. Find mxCell for element to adjust (search by value attribute for text) 3. Adjust coordinates in mxGeometry tag

  • x: Position from left
  • y: Position from top
  • width: Width
  • height: Height

4. Run conversion and verify

4.2. Coordinate Calculation

  • Element center coordinate = y + (height / 2)
  • To align multiple elements, calculate and match center coordinates

5. Design Principles

5.1. Basic Principles

  • Clarity: Create simple, visually clean diagrams
  • Consistency: Unify colors, fonts, icon sizes, line thickness
  • Accuracy: Do not sacrifice accuracy for simplification

5.2. Element Rules

  • Label all elements
  • Use arrows to indicate direction

(prefer 2 unidirectional arrows over bidirectional)

  • Use latest official icons
  • Add legend to explain custom symbols

5.3. Accessibility

  • Ensure sufficient color contrast
  • Use patterns in addition to colors

5.4. Progressive Disclosure

Separate complex systems into staged diagrams:

Diagram TypePurpose
Context DiagramSystem overview from external perspective
System DiagramMain components and relationships
Component DiagramTechnical details and integration points
Deployment DiagramInfrastructure configuration
Data Flow DiagramData flow and transformation
Sequence DiagramTime-series interactions

5.5. Metadata

Include title, description, last updated, author, and version in diagrams.

6. Best Practices

6.1. Background Color

  • Remove background="#ffffff"
  • Transparent background adapts to various themes

6.2. Font Size

  • Use 1.5x standard font size (around 18px) for PDF readability

6.3. Japanese Text Width

  • Allow 30-40px per character
  • Insufficient width causes unintended line breaks
<!-- For 10-character text, allow 300-400px -->
<mxGeometry x="140" y="60" width="400" height="40" />

6.4. Arrow Placement

  • Always place arrows at back (position in XML right after Title)
  • Position arrows to avoid overlapping with labels
  • Keep arrow start/end at least 20px from label bottom edge
<!-- Title -->
<mxCell id="title" value="..." .../>

<!-- Arrows (back layer) -->
<mxCell id="arrow1" style="edgeStyle=..." .../>

<!-- Other elements (front layer) -->
<mxCell id="box1" .../>

6.5. Arrow Connection to Text Labels

For text elements, exitX/exitY don't work, so use explicit coordinates:

<!-- Good: Explicit coordinates with sourcePoint/targetPoint -->
<mxCell id="arrow" style="..." edge="1" parent="1">
  <mxGeometry relative="1" as="geometry">
    <mxPoint x="1279" y="500" as="sourcePoint"/>
    <mxPoint x="119" y="500" as="targetPoint"/>
    <Array as="points">
      <mxPoint x="1279" y="560"/>
      <mxPoint x="119" y="560"/>
    </Array>
  </mxGeometry>
</mxCell>

6.6. edgeLabel Offset Adjustment

Adjust offset attribute to distance arrow labels from arrows:

<!-- Place above arrow (negative value to distance) -->
<mxPoint x="0" y="-40" as="offset"/>

<!-- Place below arrow (positive value to distance) -->
<mxPoint x="0" y="40" as="offset"/>

6.7. Remove Unnecessary Elements

  • Remove decorative icons irrelevant to context
  • Example: If ECR exists, separate Docker icon is unnecessary

6.8. Labels and Headings

  • Service name only: 1 line
  • Service name + supplementary info: 2 lines with line break
  • Redundant notation (e.g., ECR Container Registry): shorten to 1 line
  • Use &lt;br&gt; tag for line breaks

6.9. Background Frame and Internal Element Placement

When placing elements inside background frames (grouping boxes), ensure sufficient margin.

  • YOU MUST: Internal elements must have at least 30px margin from frame boundary
  • YOU MUST: Account for rounded corners (rounded=1) and stroke width
  • YOU MUST: Always visually verify PNG output for overflow

Coordinate calculation verification:

Background frame: y=20, height=400 -> range is y=20-420
Internal element top: frame y + 30 or more (e.g., y=50)
Internal element bottom: frame y + height - 30 or less (e.g., up to y=390)

Bad example (may overflow):

<!-- Background frame -->
<mxCell id="bg" style="rounded=1;strokeWidth=3;...">
  <mxGeometry x="500" y="20" width="560" height="400" />
</mxCell>
<!-- Text: y=30 is too close to frame top (y=20) -->
<mxCell id="label" value="Title" style="text;...">
  <mxGeometry x="510" y="30" width="540" height="35" />
</mxCell>

Good example (sufficient margin):

<!-- Background frame -->
<mxCell id="bg" style="rounded=1;strokeWidth=3;...">
  <mxGeometry x="500" y="20" width="560" height="430" />
</mxCell>
<!-- Text: y=50 is 30px from frame top (y=20) -->
<mxCell id="label" value="Title" style="text;...">
  <mxGeometry x="510" y="50" width="540" height="35" />
</mxCell>

7. Reference

  • Layout Guidelines
  • AWS Icons
  • AWS Icon Search Script

AWS icon search examples:

python ~/.claude/skills/draw-io/scripts/find_aws_icon.py ec2
python ~/.claude/skills/draw-io/scripts/find_aws_icon.py lambda

8. Checklist

  • [ ] No background color set (page="0")
  • [ ] Font size appropriate (larger recommended)
  • [ ] Arrows placed at back layer
  • [ ] Arrows not overlapping labels (verify in PNG)
  • [ ] Arrow start/end sufficiently distant from labels (at least 20px)
  • [ ] Arrows not penetrating boxes or icons (verify in PNG)
  • [ ] Internal elements not overflowing background frame (verify in PNG)
  • [ ] 30px+ margin between background frame and internal elements
  • [ ] AWS service names are official names/correct abbreviations
  • [ ] AWS icons are latest version (mxgraph.aws4.*)
  • [ ] No unnecessary elements remaining
  • [ ] Visually verified PNG conversion

9. Image Display in reveal.js Slides

Add auto-stretch: false to YAML header:

---
title: "Your Presentation"
format:
  revealjs:
    auto-stretch: false
---

This ensures correct image display on mobile devices.

Related skills

open.feishu.cnLark MarkdownInstantly turn any markdown file into clean, formatted Lark/Figma-compatible documents without manual reformatting.402klarksuiteLark DocCreate, read, update, summarize, rewrite and manage Feishu/Lark cloud documents directly from agent workflows.377k15.7klarksuiteLark WikiCreate, organize, query, and manage documents, spaces, and members inside Lark (Feishu) knowledge bases directly from AI agent workflows.374k15.7kxixu-meOpensource Guide CoachGet expert, attribution-safe guidance on launching and sustaining an open-source project.270k72xixu-meReadme I18nMaintain consistent, updatable language selector blocks across every README variant in a multilingual repository.270k72juliusbrusseeCavemanCompress SPEC.md files and any spec-adjacent prose into a token-efficient format that preserves precision while slashing context usage.259k1.1k

How it compares

Use draw-io for editable .drawio XML and PNG exports; use cto-advisor when the deliverable is an ADR text record instead of a visual diagram.

FAQ

What file types does the draw-io skill produce?

The draw-io skill creates and edits .drawio XML diagram sources and exports PNG images, including transparent-background PNGs suitable for documentation sites and presentation slides.

When should developers use the draw-io skill?

Developers should use the draw-io skill when creating architecture diagrams, flowcharts, or technical visuals that need consistent styling, programmatic layout tweaks, and repeatable PNG exports from draw.io XML.

Does draw-io support Quarto presentation workflows?

The draw-io skill enforces consistent font families with Quarto slide compatibility in mind, so exported PNG diagrams align with slide decks built in Quarto documentation pipelines.

Is Draw Io safe to install?

skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.

Documentationdocsintegrations
Browse by category
AI & AgentsFrontend & DesignBackend & DataDev ToolsAutomationTesting & ReviewSecurityMonitoring & CloudDocs & Planning
Design & frontend
Design systemsAnimation & motionAccessibility (a11y)CSS & TailwindUI designUXDesign to codeshadcn/uiLanding pagesBest design skills
Most searched skills
find-skillscavemanfrontend-designbrainstormingsystematic-debuggingstop-slopemil-design-engui-ux-pro-maxkarpathy-guidelinesweb-design-guidelinesreact-best-practicesgrill-meimprovemicrosoft-foundryagent-browser
Browse all listings
All agent skillsAll MCP serversAll marketplacesAll plugins

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.