drawio — for Claude Code drawio, community, for Claude Code, ide skills, ## mxCell要素 ### 矩形（Rectangle）, ### 角丸矩形（Rounded Rectangle）, ### 楕円（Ellipse）, ### ひし形（Diamond）, ### テキスト（Text Only）, ## 矢印・コネクタ ### 基本の矢印

v1.0.0
GitHub

À propos de ce Skill

Scenario recommande : Perfect for AI Coding Agents needing advanced diagram creation and editing capabilities in XML format. Resume localise : Create and edit draw.io diagrams in XML format. This AI agent skill supports Claude Code, Cursor, and Windsurf workflows.

Fonctionnalités

Draw.io Diagram Skill
draw.ioファイル（.drawio）を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"
<mxCell id="1" parent="0" /

# Core Topics

for Claude Code ## mxCell要素 ### 矩形（Rectangle） ### 角丸矩形（Rounded Rectangle） ### 楕円（Ellipse） ### ひし形（Diamond） ### テキスト（Text Only）
akiojin akiojin
[5]
[0]
Updated: 4/6/2026

Killer-Skills Review

Decision support comes first. Repository text comes second.

Reference-Only Page Review Score: 8/11

This page remains useful for teams, but Killer-Skills treats it as reference material instead of a primary organic landing page.

Original recommendation layer Concrete use-case guidance Explicit limitations and caution
Review Score
8/11
Quality Score
34
Canonical Locale
ja
Detected Body Locale
ja

Scenario recommande : Perfect for AI Coding Agents needing advanced diagram creation and editing capabilities in XML format. Resume localise : Create and edit draw.io diagrams in XML format. This AI agent skill supports Claude Code, Cursor, and Windsurf workflows.

Pourquoi utiliser cette compétence

Recommandation : Empowers agents to generate and edit diagrams in XML format, supporting load balancing and automatic model distribution, using draw.io files (.drawio) with features like mxCell elements for shapes and connectors, and mxGeometry for layout control.

Meilleur pour

Scenario recommande : Perfect for AI Coding Agents needing advanced diagram creation and editing capabilities in XML format.

↓ Cas d'utilisation exploitables for drawio

Cas d'usage : Creating flowcharts with rectangles and rounded rectangles
Cas d'usage : Generating diagrams with ellipses and diamonds
Cas d'usage : Editing existing draw.io files for efficient workflow management

! Sécurité et Limitations

  • Limitation : Requires XML parsing capabilities
  • Limitation : Limited to draw.io file format (.drawio)

Why this page is reference-only

  • - Current locale does not satisfy the locale-governance contract.
  • - The underlying skill quality score is below the review floor.

Source Boundary

The section below is imported from the upstream repository and should be treated as secondary evidence. Use the Killer-Skills review above as the primary layer for fit, risk, and installation decisions.

After The Review

Decide The Next Action Before You Keep Reading Repository Material

Killer-Skills should not stop at opening repository instructions. It should help you decide whether to install this skill, when to cross-check against trusted collections, and when to move into workflow rollout.

Install Path

Start With Installation And Validation

If this skill is worth continuing with, the next step is to confirm the install command, CLI write path, and environment validation.
Trusted Recheck

Cross-Check Against Trusted Picks

If you are still comparing multiple skills or vendors, go back to the trusted collection before amplifying repository noise.
Workflow

Move To Workflow Collections For Team Rollout

When the goal shifts from a single skill to team workflows, approvals, and repeatable execution, move into workflow collections.
Labs Demo

Browser Sandbox Environment

⚡️ Ready to unleash?

Experience this Agent in a zero-setup browser environment powered by WebContainers. No installation required.

Boot Container Sandbox

FAQ & Installation Steps

These questions and steps mirror the structured data on this page for better search understanding.

? Frequently Asked Questions

What is drawio?

Scenario recommande : Perfect for AI Coding Agents needing advanced diagram creation and editing capabilities in XML format. Resume localise : Create and edit draw.io diagrams in XML format. This AI agent skill supports Claude Code, Cursor, and Windsurf workflows.

How do I install drawio?

Run the command: npx killer-skills add akiojin/llmlb/drawio. It works with Cursor, Windsurf, VS Code, Claude Code, and 19+ other IDEs.

What are the use cases for drawio?

Key use cases include: Cas d'usage : Creating flowcharts with rectangles and rounded rectangles, Cas d'usage : Generating diagrams with ellipses and diamonds, Cas d'usage : Editing existing draw.io files for efficient workflow management.

Which IDEs are compatible with drawio?

This skill is compatible with Cursor, Windsurf, VS Code, Trae, Claude Code, OpenClaw, Aider, Codex, OpenCode, Goose, Cline, Roo Code, Kiro, Augment Code, Continue, GitHub Copilot, Sourcegraph Cody, and Amazon Q Developer. Use the Killer-Skills CLI for universal one-command installation.

Are there any limitations for drawio?

Limitation : Requires XML parsing capabilities. Limitation : Limited to draw.io file format (.drawio).

↓ How To Install

  1. 1. Open your terminal

    Open the terminal or command line in your project directory.

  2. 2. Run the install command

    Run: npx killer-skills add akiojin/llmlb/drawio. The CLI will automatically detect your IDE or AI agent and configure the skill.

  3. 3. Start using the skill

    The skill is now active. Your AI agent can use drawio immediately in the current project.

! Reference-Only Mode

This page remains useful for installation and reference, but Killer-Skills no longer treats it as a primary indexable landing page. Read the review above before relying on the upstream repository instructions.

Upstream Repository Material

The section below is imported from the upstream repository and should be treated as secondary evidence. Use the Killer-Skills review above as the primary layer for fit, risk, and installation decisions.

Upstream Source

drawio

Resume localise : Create and edit draw.io diagrams in XML format. This AI agent skill supports Claude Code, Cursor, and Windsurf workflows.

SKILL.md
Readonly
Upstream Repository Material
The section below is imported from the upstream repository and should be treated as secondary evidence. Use the Killer-Skills review above as the primary layer for fit, risk, and installation decisions.
Supporting Evidence

Draw.io Diagram Skill

draw.ioファイル（.drawio）をXML形式で直接作成・編集するためのスキル。

XML基本構造

xml
1<mxfile host="app.diagrams.net" modified="2024-01-01T00:00:00.000Z" agent="Claude" version="21.0.0">
2  <diagram name="Page-1" id="page-1">
3    <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">
4      <root>
5        <mxCell id="0" />
6        <mxCell id="1" parent="0" />
7        <!-- 図形要素をここに追加 -->
8      </root>
9    </mxGraphModel>
10  </diagram>
11</mxfile>

mxCell要素

矩形（Rectangle）

xml
1<mxCell id="rect-1" value="ラベル" style="rounded=0;whiteSpace=wrap;html=1;fontFamily=Noto Sans JP;fontSize=18;" vertex="1" parent="1">
2  <mxGeometry x="100" y="100" width="120" height="60" as="geometry" />
3</mxCell>

角丸矩形（Rounded Rectangle）

xml
1<mxCell id="rounded-1" value="ラベル" style="rounded=1;whiteSpace=wrap;html=1;fontFamily=Noto Sans JP;fontSize=18;arcSize=20;" vertex="1" parent="1">
2  <mxGeometry x="100" y="100" width="120" height="60" as="geometry" />
3</mxCell>

楕円（Ellipse）

xml
1<mxCell id="ellipse-1" value="ラベル" style="ellipse;whiteSpace=wrap;html=1;fontFamily=Noto Sans JP;fontSize=18;" vertex="1" parent="1">
2  <mxGeometry x="100" y="100" width="120" height="80" as="geometry" />
3</mxCell>

ひし形（Diamond）

xml
1<mxCell id="diamond-1" value="条件" style="rhombus;whiteSpace=wrap;html=1;fontFamily=Noto Sans JP;fontSize=18;" vertex="1" parent="1">
2  <mxGeometry x="100" y="100" width="100" height="100" as="geometry" />
3</mxCell>

テキスト（Text Only）

xml
1<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">
2  <mxGeometry x="100" y="100" width="120" height="30" as="geometry" />
3</mxCell>

矢印・コネクタ

基本の矢印

xml
1<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">
2  <mxGeometry relative="1" as="geometry" />
3</mxCell>

ラベル付き矢印

xml
1<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">
2  <mxGeometry relative="1" as="geometry" />
3</mxCell>

点線矢印

xml
1<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">
2  <mxGeometry relative="1" as="geometry" />
3</mxCell>

スタイル設定ガイド

フォント設定（必須）

  1. mxGraphModelにdefaultFontFamily="Noto Sans JP"を設定
  2. すべてのテキスト要素にfontFamily=Noto Sans JP;を明示的に追加

推奨設定

項目推奨値説明
fontSize18標準の1.5倍、視認性向上
日本語テキスト幅30-40px/文字レイアウト計算用
矢印とラベル間隔20px以上重なり防止

色設定

fillColor=#ffffff;      # 塗りつぶし色
strokeColor=#000000;    # 枠線色
fontColor=#333333;      # 文字色

よく使う色

用途色コード
白背景#ffffff
薄い青#dae8fc
薄い緑#d5e8d4
薄い黄#fff2cc
薄い赤#f8cecc
薄いグレー#f5f5f5

配置ルール

XMLの記述順 = 描画順

  • 先に書いたものが背面に配置される
  • 矢印は図形より先（XMLの先頭側）に記述して最背面に配置

推奨構造

xml
1<root>
2  <mxCell id="0" />
3  <mxCell id="1" parent="0" />
4
5  <!-- 1. 矢印・コネクタ（最背面） -->
6  <mxCell id="arrow-1" ... edge="1" ... />
7  <mxCell id="arrow-2" ... edge="1" ... />
8
9  <!-- 2. 図形（中間） -->
10  <mxCell id="rect-1" ... vertex="1" ... />
11  <mxCell id="rect-2" ... vertex="1" ... />
12
13  <!-- 3. テキストラベル（最前面） -->
14  <mxCell id="text-1" ... vertex="1" ... />
15</root>

PNG変換

drawio CLIコマンド

bash
1drawio -x -f png -s 2 -t -o output.png input.drawio
オプション説明
-xエクスポートモード
-f pngPNG形式
-s 22倍スケール（高解像度）
-t透明背景
-o出力ファイル指定

検証チェックリスト

作成後、以下を確認：

  • mxGraphModelにdefaultFontFamilyが設定されているか
  • 全テキスト要素にfontFamilyが明示的に設定されているか
  • fontSizeは18px程度か（視認性）
  • 矢印がXMLの先頭側に配置されているか（最背面）
  • 矢印とラベルの間隔は20px以上か
  • 日本語テキストの幅は十分か（30-40px/文字）
  • PNG出力で視覚確認したか

テンプレート

基本テンプレートは templates/basic.drawio を参照。

Compétences associées

Looking for an alternative to drawio or another community skill for your workflow? Explore these related open-source skills.

Voir tout

openclaw-release-maintainer

Logo of openclaw
openclaw

Resume localise : 🦞 # OpenClaw Release Maintainer Use this skill for release and publish-time workflow. It covers ai, assistant, crustacean workflows. This AI agent skill supports Claude Code, Cursor, and Windsurf workflows.

★ 333.8k
⑂ 0
Intelligence artificielle

widget-generator

Logo of f
f

Resume localise : Generate customizable widget plugins for the prompts.chat feed system # Widget Generator Skill This skill guides creation of widget plugins for prompts.chat . It covers ai, artificial-intelligence, awesome-list workflows. This AI agent skill supports Claude Code, Cursor, and

★ 149.6k
⑂ 0
Intelligence artificielle

flags

Logo of vercel
vercel

Resume localise : The React Framework # Feature Flags Use this skill when adding or changing framework feature flags in Next.js internals. It covers blog, browser, compiler workflows. This AI agent skill supports Claude Code, Cursor, and Windsurf workflows.

★ 138.4k
⑂ 0
Navigateur

pr-review

Logo of pytorch
pytorch

Resume localise : Usage Modes No Argument If the user invokes /pr-review with no arguments, do not perform a review . It covers autograd, deep-learning, gpu workflows. This AI agent skill supports Claude Code, Cursor, and Windsurf workflows.

★ 98.6k
⑂ 0
Développeur