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

v1.0.0
GitHub

이 스킬 정보

적합한 상황: Perfect for AI Coding Agents needing advanced diagram creation and editing capabilities in XML format. 현지화된 요약: Create and edit draw.io diagrams in XML format. This AI agent skill supports Claude Code, Cursor, and Windsurf workflows.

기능

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" /

# 핵심 주제

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

Skill Overview

Start with fit, limitations, and setup before diving into the repository.

적합한 상황: Perfect for AI Coding Agents needing advanced diagram creation and editing capabilities in XML format. 현지화된 요약: Create and edit draw.io diagrams in XML format. This AI agent skill supports Claude Code, Cursor, and Windsurf workflows.

이 스킬을 사용하는 이유

추천 설명: 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.

최적의 용도

적합한 상황: Perfect for AI Coding Agents needing advanced diagram creation and editing capabilities in XML format.

↓ 실행 가능한 사용 사례 for drawio

사용 사례: Creating flowcharts with rectangles and rounded rectangles
사용 사례: Generating diagrams with ellipses and diamonds
사용 사례: Editing existing draw.io files for efficient workflow management

! 보안 및 제한 사항

  • 제한 사항: Requires XML parsing capabilities
  • 제한 사항: Limited to draw.io file format (.drawio)

About The Source

The section below is adapted from the upstream repository. Use it as supporting material alongside the fit, use-case, and installation summary on this page.

Labs 데모

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 및 설치 단계

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

? 자주 묻는 질문

drawio은 무엇인가요?

적합한 상황: Perfect for AI Coding Agents needing advanced diagram creation and editing capabilities in XML format. 현지화된 요약: Create and edit draw.io diagrams in XML format. This AI agent skill supports Claude Code, Cursor, and Windsurf workflows.

drawio은 어떻게 설치하나요?

다음 명령을 실행하세요: npx killer-skills add akiojin/llmlb/drawio. Cursor, Windsurf, VS Code, Claude Code와 19개 이상의 다른 IDE에서 동작합니다.

drawio은 어디에 쓰이나요?

주요 활용 사례는 다음과 같습니다: 사용 사례: Creating flowcharts with rectangles and rounded rectangles, 사용 사례: Generating diagrams with ellipses and diamonds, 사용 사례: Editing existing draw.io files for efficient workflow management.

drawio 와 호환되는 IDE는 무엇인가요?

이 스킬은 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 와 호환됩니다. 통합 설치에는 Killer-Skills CLI를 사용하세요.

drawio에 제한 사항이 있나요?

제한 사항: Requires XML parsing capabilities. 제한 사항: Limited to draw.io file format (.drawio).

↓ 이 스킬 설치 방법

  1. 1. 터미널 열기

    프로젝트 디렉터리에서 터미널 또는 명령줄을 여세요.

  2. 2. 설치 명령 실행

    npx killer-skills add akiojin/llmlb/drawio 를 실행하세요. CLI가 IDE 또는 에이전트를 자동으로 감지하고 스킬을 설정합니다.

  3. 3. 스킬 사용 시작

    스킬이 이제 활성화되었습니다. 현재 프로젝트에서 drawio을 바로 사용할 수 있습니다.

! Source Notes

This page is still useful for installation and source reference. Before using it, compare the fit, limitations, and upstream repository notes above.

Upstream Repository Material

The section below is adapted from the upstream repository. Use it as supporting material alongside the fit, use-case, and installation summary on this page.

Upstream Source

drawio

현지화된 요약: 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 adapted from the upstream repository. Use it as supporting material alongside the fit, use-case, and installation summary on this page.
Upstream Source

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 を参照。

관련 스킬

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

모두 보기

openclaw-release-maintainer

Logo of openclaw
openclaw

현지화된 요약: 🦞 # 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
인공지능

widget-generator

Logo of f
f

현지화된 요약: 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 Windsurf

★ 149.6k
⑂ 0
인공지능

flags

Logo of vercel
vercel

현지화된 요약: 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
브라우저

pr-review

Logo of pytorch
pytorch

현지화된 요약: 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
개발자