Draw.io

by softaworks

Draw.io is a Frontend skill for Claude Code, published by softaworks in agent-toolkit.

2.4K stars219 forkson softaworks/agent-toolkitAdded 2026/08/18+1% in starsRepository updated 2026/03/05

View source on GitHub Download repo ZIP

agent-skillsaiautomationclaudeclaude-codecoding-agentdevelopment

Install in seconds

Install Draw.io

Copy Draw.io into your Claude Code skills folder. Run the command in your terminal, or review the source on GitHub before installing.

terminal

npx degit https://github.com/softaworks/agent-toolkit/tree/main/skills/draw-io ~/.claude/skills/draw-io

Requires Node.js. Downloads this skill only — not the rest of the repository — into your Claude Code skills folder.

Without Node.js

git clone https://github.com/softaworks/agent-toolkit.git

Clones the whole repository, then copy the skill’s own directory into your skills folder yourself.

In this catalog

Source file: skills/draw-io/SKILL.md in softaworks/agent-toolkit
Installs to: ~/.claude/skills/draw-io
Collection: One of 25 skills cataloged from this repository
Category: Frontend — 567 skills

What Draw.io does

Draw.io creates, edits, and reviews diagrams in .drawio XML format, handling PNG conversion, layout adjustment, and AWS icon usage for technical documentation and presentations.

Draw.io is cataloged under Frontend on DirSkills. Draw.io comes from a repository tagged agent-skills, ai, automation, claude and claude-code.

Documentation

README

Excerpt

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.

This is the opening of the README. Read the full README on GitHub.

Frequently asked about Draw.io

What else does softaworks publish alongside Draw.io?
Draw.io is one of 25 skills that DirSkills catalogs from softaworks/agent-toolkit, the repository it ships in. Its siblings there include 10x Mode, Add Skill and Agent MD Refactor. Each one is a separate skill with its own page in this directory, installs the same way Draw.io does, and is maintained by softaworks in that same repository. The rest of the collection is listed on the softaworks/agent-toolkit page.
How does Draw.io compare to other Frontend skills?
Draw.io ranks #228 by stars among the 567 Frontend skills in this catalog. The most-starred ones next to it are Angular Developer, Android Clean Architecture and Accessibility. DirSkills ranks by the star count of the repository each skill ships in, so that order reflects how popular those repositories are rather than any review of Draw.io against them. Open each page to compare what they document and how they install.