Agent skill

drawio

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.

View SKILL.md on GitHub Repository
Stars 5
Forks 2

Install this agent skill to your Project

npx add-skill https://github.com/akiojin/skills/tree/main/drawio

SKILL.md

Draw.io Diagram Skill

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

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）

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

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

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

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

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

矢印・コネクタ

基本の矢印

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

ラベル付き矢印

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

点線矢印

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

スタイル設定ガイド

フォント設定（必須）

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

推奨設定

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

色設定

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

よく使う色

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

配置ルール

XMLの記述順 = 描画順

  • 先に書いたものが背面に配置される
  • 矢印は図形より先（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-exportコマンド（推奨）

Dockerコンテナ環境では、xvfb経由でヘッドレス実行するdrawio-exportコマンドを使用：

bash
drawio-export -x -f png -s 2 -t -o output.png input.drawio

drawio CLIコマンド（直接実行）

ディスプレイ環境がある場合：

bash
drawio -x -f png -s 2 -t -o output.png input.drawio

オプション一覧

オプション 説明
-x エクスポートモード
-f png PNG形式（svg, pdf, vsdx等も可）
-s 2 2倍スケール（高解像度）
-t 透明背景
-o 出力ファイル指定
-p ページ番号（0から開始）
-b ボーダーサイズ

実行例

bash
# 基本的なPNG出力
drawio-export -x -f png -o diagram.png diagram.drawio

# 高解像度（2倍スケール）+ 透明背景
drawio-export -x -f png -s 2 -t -o diagram@2x.png diagram.drawio

# SVG出力
drawio-export -x -f svg -o diagram.svg diagram.drawio

# 全ページをまとめてPDF出力
drawio-export -x -f pdf -o diagram.pdf diagram.drawio

検証チェックリスト

作成後、以下を確認：

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

テンプレート

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

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

akiojin/skills

inkjs-design

Ink.js (React for CLI) design and implementation guide. Use when: (1) Creating or modifying Ink.js components (2) Implementing Ink-specific hooks (useInput, useApp, useFocus) (3) Handling emoji/icon width issues (string-width workarounds) (4) Building terminal-responsive layouts (5) Managing multi-screen navigation (6) Implementing animations (spinners, progress bars) (7) Optimizing performance (React.memo, useMemo) (8) Handling keyboard input and shortcuts (9) Testing CLI UI (ink-testing-library)

5 2
Explore
akiojin/skills

speckit-require

GitHub Spec Kit (https://github.com/github/spec-kit) を使って要件定義や仕様作成（仕様策定・仕様書作成・仕様設計を含む）を新規作成または既存仕様へ追記し、spec.md/plan.md/tasks.mdまで生成・更新する。要件定義、要件追加/変更、TDD前提の要件整理、仕様の明文化、Spec Kitのspecify/clarify/plan/tasksフロー実行が求められるときに使用。

5 2
Explore
akiojin/skills

speckit-update

GitHub Spec Kit (https://github.com/github/spec-kit) のベースバージョン更新やテンプレート/スクリプト同期を行うための手順。Spec Kitの更新、上流リリースとの差分適用、templates/commands/scriptsの取り込み、ローカル運用（日本語化・ブランチ非操作・SPEC-[UUID8桁]）の維持が必要なときに使用する。

5 2
Explore
akiojin/skills

gh-fix-ci

Backward-compatible wrapper skill. The current workflow is `gh-fix-pr`.

5 2
Explore
akiojin/skills

gh-pr-check

Check GitHub PR status with the gh CLI, including unmerged PR detection and post-merge new-commit detection for the current branch.

5 2
Explore
akiojin/skills

gh-fix-issue

Analyze a GitHub Issue to extract error context, stack traces, file references, and cross-references. Classify the issue, search the codebase for relevant files, produce a structured Issue Analysis Report, and propose a concrete fix plan. Post progress updates to the issue.

5 2
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results