Agent skill

Draw Io

by davila7 in davila7/claude-code-templates

draw.io diagram creation, editing, and review. An agent skill from davila7/claude-code-templates.

MITAuto-check passedDevelopment

Install Draw Io

skills CLI
$ npx skills add davila7/claude-code-templates --skill draw-io -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install davila7/claude-code-templates draw-io --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/davila7/claude-code-templates.git skills-src && mkdir -p .claude/skills && cp -r skills-src/cli-tool/components/skills/creative-design/draw-io .claude/skills/draw-io && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
draw-io
GitHub stars
32k
Used in
1 other repo
Token cost
~1.9k tokens
SKILL.md length
607 words
Files
6 (incl. scripts, references)
Skills in repo
478
Repo updated
First seen
Licence
MIT

At a glance

draw.io diagram creation, editing, and review. An agent skill from davila7/claude-code-templates.

  • Works in 9 steps: Basic Rules → Font Settings → Conversion Commands → …
  • .drawio XML editing
  • SKILL.md covers 1. Basic Rules, 2. Font Settings, 3. Conversion Commands and 4. Layout Adjustment, plus 5 more sections
  • Runs Shell and Python scripts from its folder; calls mise, python and bash

What it does

Draw Io is an agent skill from davila7/claude-code-templates. draw.io diagram creation, editing, and review. Use for .drawio XML editing, PNG conversion, layout adjustment, and AWS icon usage.

Its SKILL.md is about 1.9k tokens, which your agent loads only when the skill is triggered. The skill folder holds 7 other files, including scripts and reference files (for example `README.md`, `references/aws-icons.md` and `references/layout-guidelines.md`).

It sits in Development, covering Diagrams. It works with draw.io and Amazon Web Services. The repository describes itself as: CLI tool for configuring and monitoring Claude Code. The licence is MIT.

When your agent uses it

  • .drawio XML editing
  • Layout adjustment

Example prompts

  • “/draw-io”

Requirements

  • Python 3
  • A Bash shell
  • Docker

Workflow steps

9 steps, taken from the step headings in SKILL.md.

  1. Basic Rules
  2. Font Settings
  3. Conversion Commands
  4. Layout Adjustment
  5. Design Principles
  6. Best Practices
  7. Reference
  8. Checklist
  9. Image Display in reveal.js Slides

What it can do on your machine

Read from SKILL.md and the folder at commit 46b4d8b. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 2 files in scripts/ (Shell and Python), which the agent can run.

    Shell commands in SKILL.md call:

    • mise
    • python
    • bash

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Draw Io loads about 1.9k tokens when it runs, and up to ~9.4k if it reads all its reference files. Until then it costs about 35 tokens; SKILL.md has 607 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~35
When it runs · the whole SKILL.md, loaded when a task matches
~1.9k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~9.4k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from davila7/claude-code-templates at commit 46b4d8b, republished under its MIT licence (© davila7). 607 words, ~1,903 tokens.

Download SKILL.mdSave it as .claude/skills/draw-io/SKILL.md (or your agent's skills folder). This skill also uses 5 other files; get the full folder from GitHub.
name
draw-io
description
draw.io diagram creation, editing, and review. Use for .drawio XML editing, PNG conversion, layout adjustment, and AWS icon usage.

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:

xml
<mxGraphModel defaultFontFamily="Noto Sans JP" ...>

Also explicitly specify fontFamily in each text element's style attribute:

xml
style="text;html=1;fontSize=27;fontFamily=Noto Sans JP;"

3. Conversion Commands

See conversion script at scripts/convert-drawio-to-png.sh.

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 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
xml
<!-- 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
xml
<!-- 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:

xml
<!-- 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>
Show full SKILL.md (241 more words)Show less
6.6. edgeLabel Offset Adjustment

Adjust offset attribute to distance arrow labels from arrows:

xml
<!-- 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:

text
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):

xml
<!-- 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):

xml
<!-- 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

AWS icon search examples:

sh
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:

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

This ensures correct image display on mobile devices.

© davila7, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 5 other files (scripts, references) in cli-tool/components/skills/creative-design/draw-io of davila7/claude-code-templates.

  • SKILL.md
  • README.md
  • references/aws-icons.md
  • references/layout-guidelines.md
  • scripts/convert-drawio-to-png.sh
  • scripts/find_aws_icon.py

Open the folder on GitHubat commit 46b4d8b

Used in 1 other repository

We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in davila7/claude-code-templates, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Draw Io next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Draw Io compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Draw Io this skilldavila7/claude-code-templates32k1 repos~1.9kAutomated safety check: PassMIT
AWS DrawIO Diagram Generatora5c-ai/babysitter1.8k—~4.2kAutomated safety check: PassMIT
Drawio MCP Diagrammingthomast1906/github-copilot-agent-skills202—~6.6kAutomated safety check: PassNone
Architecture DiagramMathews-Tom/armory328—~4.8kAutomated safety check: PassMIT
AWS Drawio Architecture Diagramsgiuseppe-trisciuoglio/developer-kit356—~3.1kAutomated safety check: NotesMIT
Drawio Logical Diagramsgiuseppe-trisciuoglio/developer-kit356—~3.9kAutomated safety check: NotesMIT

Similar skills

  • Creates and edits AWS architecture diagrams as DrawIO XML, converting a text description or an image and reading existing files back into shapes.

    1.8k GitHub stars~4.2k tokensUpdated 22 days ago
    DevelopmentAuto-check passed
  • Drawio MCP Diagramming

    thomast1906/github-copilot-agent-skills

    Create and edit diagrams using the Draw.io MCP server — any shape, any vendor.

    202 GitHub stars~6.6k tokensUpdated yesterday
    DevelopmentAuto-check passed
  • Architecture Diagram

    Mathews-Tom/armory

    Generate architecture diagrams as fully editable SVG with native AWS, Azure, and GCP icons for cloud diagrams, or hand-drawn generic icons for everything else.

    328 GitHub stars~4.8k tokensUpdated 3 days ago
    DevelopmentAuto-check passed
  • AWS Drawio Architecture Diagrams

    giuseppe-trisciuoglio/developer-kit

    Creates professional AWS architecture diagrams in draw.io XML format (.drawio files) using official AWS Architecture Icons (aws4 library).

    356 GitHub stars~3.1k tokensUpdated 29 days ago
    DevelopmentAuto-check: notes
  • Drawio Logical Diagrams

    giuseppe-trisciuoglio/developer-kit

    Creates professional logical flow diagrams and logical system architecture diagrams using draw.io XML format (.drawio files).

    356 GitHub stars~3.9k tokensUpdated 29 days ago
    DevelopmentAuto-check: notes
  • Drawio AWS

    sparklabx/drawio-ai-kit

    A skill your agent uses when the user asks for an AWS architecture diagram — VPC/networking, event-driven, landing zone, multi-AZ, serverless pipeline, or any diagram built with AWS service icons.

    654 GitHub stars~1.6k tokensUpdated today
    Backend & APIsAuto-check passed

More from davila7/claude-code-templates

All 478 skills in this repo
  • Perplexity Web Search

    davila7/claude-code-templates

    Runs web-grounded searches through Perplexity's Sonar models over OpenRouter for current events, recent literature and cited facts beyond the model's training cutoff.

    32k GitHub starsUsed in 11 repos~3.5k tokens
    Auto-check: notes
  • Neuropixels Data Analysis

    davila7/claude-code-templates

    Analyzes Neuropixels recordings from SpikeGLX or Open Ephys through preprocessing, drift correction, Kilosort4 spike sorting, quality metrics and curation.

    32k GitHub starsUsed in 9 repos~2.8k tokens
    Auto-check passed
  • Scientific Venue Templates

    davila7/claude-code-templates

    Supplies LaTeX templates and formatting rules for journals, conferences, posters, and grant proposals, then can check a draft against them.

    32k GitHub starsUsed in 9 repos~5.1k tokens
    Auto-check: notes
  • Brand Voice Content Creator

    davila7/claude-code-templates

    Analyzes a brand's existing writing to lock in a consistent voice, then builds SEO blog posts and platform-specific social content around it.

    32k GitHub starsUsed in 3 repos~1.9k tokens
    Auto-check passed
  • CAPA Officer

    davila7/claude-code-templates

    Guides corrective and preventive action (CAPA) work in a quality management system, from initiation and root cause analysis through effectiveness verification.

    32k GitHub starsUsed in 1 repo~2k tokens
    Auto-check passed
  • Fda Consultant Specialist

    davila7/claude-code-templates

    Senior FDA consultant and specialist for medical device companies including HIPAA compliance and requirement management.

    32k GitHub starsUsed in 1 repo~2.7k tokens
    Auto-check passed

Categories

Questions about Draw Io

What does Draw Io do?

draw.io diagram creation, editing, and review. An agent skill from davila7/claude-code-templates. Draw Io is an agent skill from davila7/claude-code-templates.io diagram creation, editing, and review.

When should I use Draw Io?

Draw Io fits situations like: .drawio XML editing; layout adjustment.

How do I install Draw Io in Claude Code?

Run `npx skills add davila7/claude-code-templates --skill draw-io -a claude-code`. Or copy the skill folder (cli-tool/components/skills/creative-design/draw-io in davila7/claude-code-templates) into .claude/skills/draw-io in your project. Claude Code loads it when a task matches its description.

How do I install Draw Io in Codex?

Run `npx skills add davila7/claude-code-templates --skill draw-io -a codex`. Or copy the skill folder (cli-tool/components/skills/creative-design/draw-io in davila7/claude-code-templates) into .agents/skills/draw-io in your project. Codex loads it when a task matches its description.

Can I use Draw Io in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add davila7/claude-code-templates --skill draw-io -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/draw-io, .gemini/skills/draw-io, .github/skills/draw-io and .opencode/skills/draw-io in your project.

What does Draw Io need to run?

Going by SKILL.md and its folder, Draw Io needs a shell and Python for the scripts in its folder and the command-line tools its instructions call (mise, python and bash). Our summary lists: Python 3; A Bash shell; Docker.

Does Draw Io access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Draw Io safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Draw Io use?

Draw Io is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Draw Io use?

About 1.9k tokens (SKILL.md is roughly 7.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 7.5k tokens, read only when the agent opens those files.

What are the alternatives to Draw Io?

Skills that share tags, products or a category with Draw Io: AWS DrawIO Diagram Generator (a5c-ai/babysitter, 1.8k stars), Drawio MCP Diagramming (thomast1906/github-copilot-agent-skills, 202 stars), Architecture Diagram (Mathews-Tom/armory, 328 stars) and AWS Drawio Architecture Diagrams (giuseppe-trisciuoglio/developer-kit, 356 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Draw Io?

davila7 (a GitHub user) maintains it in davila7/claude-code-templates, which has 32,483 GitHub stars. The repository holds 478 skills in this directory. The repository was last updated on October 9, 2026.

Source: davila7/claude-code-templates on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.