Install
mkdir -p .claude/skills/drawio-akiojin && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/16525" && unzip -o skill.zip -d .claude/skills/drawio-akiojin && rm skill.zipInstalls to .claude/skills/drawio-akiojin
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Create and edit draw.io diagrams in XML format. Use when the user wants to create flowcharts, architecture diagrams, sequence diagrams, or any visual diagrams. Handles XML structure, styling, fonts (Noto Sans JP), arrows, connectors, and PNG export.Key capabilities
- →Create draw.io XML files
- →Edit existing draw.io XML diagrams
- →Generate various shapes like rectangles, ellipses, and diamonds
- →Add arrows and connectors with or without labels
- →Apply specific styling, including font settings and colors
- →Export diagrams to PNG format using the `drawio` CLI
How it works
The skill generates and modifies draw.io XML based on user requests, applying specific styles, fonts, and structural rules. It ensures proper XML element ordering for correct rendering and can export the final diagram to PNG.
Inputs & outputs
When to use drawio
- →Generate an architecture flowchart
- →Create a sequence diagram
- →Edit a draw.io diagram file
About this skill
Draw.io Diagram Skill
draw.ioファイル（.drawio）をXML形式で直接作成・編集するためのスキル。
XML基本構造
<mxfile host="app.diagrams.net" modified="2024-01-01T00:00:00.000Z" agent="Claude" version="21.0.0">
<diagram name="Page-1" id="page-1">
<mxGraphModel dx="1000" dy="600" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0" defaultFontFamily="Noto Sans JP">
<root>
<mxCell id="0" />
<mxCell id="1" parent="0" />
<!-- 図形要素をここに追加 -->
</root>
</mxGraphModel>
</diagram>
</mxfile>
mxCell要素
矩形（Rectangle）
<mxCell id="rect-1" value="ラベル" style="rounded=0;whiteSpace=wrap;html=1;fontFamily=Noto Sans JP;fontSize=18;" vertex="1" parent="1">
<mxGeometry x="100" y="100" width="120" height="60" as="geometry" />
</mxCell>
角丸矩形（Rounded Rectangle）
<mxCell id="rounded-1" value="ラベル" style="rounded=1;whiteSpace=wrap;html=1;fontFamily=Noto Sans JP;fontSize=18;arcSize=20;" vertex="1" parent="1">
<mxGeometry x="100" y="100" width="120" height="60" as="geometry" />
</mxCell>
楕円（Ellipse）
<mxCell id="ellipse-1" value="ラベル" style="ellipse;whiteSpace=wrap;html=1;fontFamily=Noto Sans JP;fontSize=18;" vertex="1" parent="1">
<mxGeometry x="100" y="100" width="120" height="80" as="geometry" />
</mxCell>
ひし形（Diamond）
<mxCell id="diamond-1" value="条件" style="rhombus;whiteSpace=wrap;html=1;fontFamily=Noto Sans JP;fontSize=18;" vertex="1" parent="1">
<mxGeometry x="100" y="100" width="100" height="100" as="geometry" />
</mxCell>
テキスト（Text Only）
<mxCell id="text-1" value="テキスト" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontFamily=Noto Sans JP;fontSize=18;" vertex="1" parent="1">
<mxGeometry x="100" y="100" width="120" height="30" as="geometry" />
</mxCell>
矢印・コネクタ
基本の矢印
<mxCell id="arrow-1" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontFamily=Noto Sans JP;fontSize=14;" edge="1" parent="1" source="rect-1" target="rect-2">
<mxGeometry relative="1" as="geometry" />
</mxCell>
ラベル付き矢印
<mxCell id="arrow-2" value="ラベル" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontFamily=Noto Sans JP;fontSize=14;" edge="1" parent="1" source="rect-1" target="rect-2">
<mxGeometry relative="1" as="geometry" />
</mxCell>
点線矢印
<mxCell id="arrow-3" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;fontFamily=Noto Sans JP;fontSize=14;" edge="1" parent="1" source="rect-1" target="rect-2">
<mxGeometry relative="1" as="geometry" />
</mxCell>
スタイル設定ガイド
フォント設定（必須）
mxGraphModelにdefaultFontFamily="Noto Sans JP"を設定- すべてのテキスト要素に
fontFamily=Noto Sans JP;を明示的に追加
推奨設定
| 項目 | 推奨値 | 説明 |
|---|---|---|
| fontSize | 18 | 標準の1.5倍、視認性向上 |
| 日本語テキスト幅 | 30-40px/文字 | レイアウト計算用 |
| 矢印とラベル間隔 | 20px以上 | 重なり防止 |
色設定
fillColor=#ffffff; # 塗りつぶし色
strokeColor=#000000; # 枠線色
fontColor=#333333; # 文字色
よく使う色
| 用途 | 色コード |
|---|---|
| 白背景 | #ffffff |
| 薄い青 | #dae8fc |
| 薄い緑 | #d5e8d4 |
| 薄い黄 | #fff2cc |
| 薄い赤 | #f8cecc |
| 薄いグレー | #f5f5f5 |
配置ルール
XMLの記述順 = 描画順
- 先に書いたものが背面に配置される
- 矢印は図形より先（XMLの先頭側）に記述して最背面に配置
推奨構造
<root>
<mxCell id="0" />
<mxCell id="1" parent="0" />
<!-- 1. 矢印・コネクタ（最背面） -->
<mxCell id="arrow-1" ... edge="1" ... />
<mxCell id="arrow-2" ... edge="1" ... />
<!-- 2. 図形（中間） -->
<mxCell id="rect-1" ... vertex="1" ... />
<mxCell id="rect-2" ... vertex="1" ... />
<!-- 3. テキストラベル（最前面） -->
<mxCell id="text-1" ... vertex="1" ... />
</root>
PNG変換
drawio CLIコマンド
drawio -x -f png -s 2 -t -o output.png input.drawio
| オプション | 説明 |
|---|---|
| -x | エクスポートモード |
| -f png | PNG形式 |
| -s 2 | 2倍スケール（高解像度） |
| -t | 透明背景 |
| -o | 出力ファイル指定 |
検証チェックリスト
作成後、以下を確認：
- mxGraphModelにdefaultFontFamilyが設定されているか
- 全テキスト要素にfontFamilyが明示的に設定されているか
- fontSizeは18px程度か（視認性）
- 矢印がXMLの先頭側に配置されているか（最背面）
- 矢印とラベルの間隔は20px以上か
- 日本語テキストの幅は十分か（30-40px/文字）
- PNG出力で視覚確認したか
テンプレート
基本テンプレートは templates/basic.drawio を参照。
When not to use it
- →When the user wants to create diagrams in a format other than draw.io XML
- →When the user wants to use a font other than Noto Sans JP for text elements
- →When the user wants to place arrows or connectors after shapes in the XML structure
Limitations
- →All text elements must explicitly include `fontFamily=Noto Sans JP;`
- →XML writing order dictates drawing order, with arrows needing to be placed first
- →Japanese text width should be calculated at 30-40px per character for layout
How it compares
This skill directly manipulates draw.io XML for precise diagram control and styling, unlike a visual diagram editor that abstracts the underlying XML structure.
Compared to similar skills
drawio side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| drawio (this skill) | 0 | 8mo | Review | Intermediate |
| svg-precision | 527 | 4mo | Review | Intermediate |
| draw-io | 41 | 6mo | Review | Intermediate |
| legacy-circuit-mockups | 7 | 7mo | No flags | Beginner |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by akiojin
View all by akiojin →You might also like
svg-precision
dkyazzentwatwa
Deterministic SVG generation, validation, and rendering. Use for icons, diagrams, charts, UI mockups, or technical drawings requiring structural correctness and cross-viewer compatibility.
draw-io
davila7
draw.io diagram creation, editing, and review. Use for .drawio XML editing, PNG conversion, layout adjustment, and AWS icon usage.
legacy-circuit-mockups
github
Generate breadboard circuit mockups and visual diagrams using HTML5 Canvas drawing techniques. Use when asked to create circuit layouts, visualize electronic component placements, draw breadboard diagrams, mockup 6502 builds, generate retro computer schematics, or design vintage electronics projects. Supports 555 timers, W65C02S microprocessors, 28C256 EEPROMs, W65C22 VIA chips, 7400-series logic gates, LEDs, resistors, capacitors, switches, buttons, crystals, and wires.
excalidraw-diagram
axtonliu
Generate Excalidraw diagrams from text content. Supports three output modes - Obsidian (.md), Standard (.excalidraw), and Animated (.excalidraw with animation order). Triggers on "Excalidraw", "画图", "流程图", "思维导图", "可视化", "diagram", "标准Excalidraw", "standard excalidraw", "Excalidraw动画", "动画图", "animate".
svg-professional
paulasilvatech
>
art
aplaceforallmystuff
Complete visual content system for Claude Code. Default aesthetic - light backgrounds, teal/burnt orange accents, hand-drawn sketch style.