MCPInstall

draw-io

by softaworksFrontend & Design

draw.io diagram creation, editing, and review. Use for .drawio XML editing, PNG conversion, layout adjustment, and AWS icon usage.

Installs
816
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/softaworks/agent-toolkit --skill draw-io
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads draw-io automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

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.

FAQ

What does the draw-io skill do?

draw.io diagram creation, editing, and review. Use for .drawio XML editing, PNG conversion, layout adjustment, and AWS icon usage.

How do I install draw-io?

Run npx skills add https://github.com/softaworks/agent-toolkit --skill draw-io in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/draw-io/ (personal) or .claude/skills/draw-io/ (project).

Which AI agents can use draw-io?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is draw-io safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains draw-io?

It is published by softaworks in softaworks/agent-toolkit. It has 816 recorded installs.

More from softaworks/agent-toolkit

View all →

mermaid-diagrams

softaworks/agent-toolkit

Comprehensive guide for creating software diagrams using Mermaid syntax. Use when users need to create, visualize, or document software through diagrams including class diagrams (domain modeling, object-oriented design), sequence diagrams (application flows, API interactions, code execution), flowcharts (processes, algorithms, user journeys), entity relationship diagrams (database schemas), C4 architecture diagrams (system context, containers, components), state diagrams, git graphs, pie charts, gantt charts, or any other diagram type. Triggers include requests to "diagram", "visualize", "model", "map out", "show the flow", or when explaining system architecture, database design, code structure, or user/application flows.

Docs & Writing5.1K installs

humanizer

softaworks/agent-toolkit

Remove signs of AI-generated writing from text. Use when editing or reviewing text to make it sound more natural and human-written. Based on Wikipedia's comprehensive "Signs of AI writing" guide. Detects and fixes patterns including: inflated symbolism, promotional language, superficial -ing analyses, vague attributions, em dash overuse, rule of three, AI vocabulary words, negative parallelisms, and excessive conjunctive phrases. Credits: Original skill by @blader - https://github.com/blader/humanizer

Docs & Writing4.4K installs

database-schema-designer

softaworks/agent-toolkit

Design robust, scalable database schemas for SQL and NoSQL databases. Provides normalization guidelines, indexing strategies, migration patterns, constraint design, and performance optimization. Ensures data integrity, query performance, and maintainable data models.

Data & Databases4.3K installs

qa-test-planner

softaworks/agent-toolkit

Generate comprehensive test plans, manual test cases, regression test suites, and bug reports for QA engineers. Includes Figma MCP integration for design validation.

Testing & QA4.3K installs

writing-clearly-and-concisely

softaworks/agent-toolkit

Use when writing prose humans will read—documentation, commit messages, error messages, explanations, reports, or UI text. Applies Strunk's timeless rules for clearer, stronger, more professional writing.

Docs & Writing4.3K installs

skill-judge

softaworks/agent-toolkit

Evaluate Agent Skill design quality against official specifications and best practices. Use when reviewing, auditing, or improving SKILL.md files and skill packages. Provides multi-dimensional scoring and actionable improvement suggestions.

Code Quality & Workflow4.2K installs

Popular frontend & design skills

View category →

setup-matt-pocock-skills

mattpocock/skills

Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.

Frontend & Design1.1M installs

frontend-design

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

OfficialFrontend & Design1M installs

hyperframes-animation

heygen-com/hyperframes

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

Frontend & Design1M installs

prototype

mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

Frontend & Design999.2K installs

hyperframes-core

heygen-com/hyperframes

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Frontend & Design930.5K installs

vercel-react-best-practices

vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

OfficialFrontend & Design843.1K installs