このスライドは impress.js 対応ブラウザ向けです。

最新版の Chrome / Edge / Safari で開いてください。

impress.js deck / draw-io-skill v0.1.0

AIエージェントが
「図のダメ出し」を受けて
自分で直す！

`draw-io-skill` v0.1.0 解説

Quick Summary

ざっくり言うと

01

AI が draw.io を扱える

Claude Code や OpenAI Codex のような AI コーディングエージェントが、 図の作成・編集・出力まで自律的にこなせます。

02

最大の特徴は自己修正ループ

リンターが「ここがおかしい」と検知し、その結果を読んだエージェントが 自分で図を直すところまでつながっています。

03

見落としがちな崩れも拾える

日本語テキストのはみ出し、矢印の交差や枠線重なりなど、 人間でも見落としやすい問題を自動で検知できます。

What Is It?

draw-io-skill ってなに？

背景にある悩み

  • 設計書に図がほしい
  • でも draw.io を毎回手で描くのは面倒
  • AI に任せても品質が不安

そこで登場するのが、AI コーディングエージェントに draw.io を使わせるための 「取扱説明書＋ツールセット」です。

たとえるなら

draw.io を毎回手で操作するのは、
「コードを毎回テキストエディタだけで書く」ようなもの。

draw-io-skill は、AI に 「draw.io の正しい使い方のルールブック」を渡す仕組みです。

Point 1

まず「Skill」の仕組みが土台

Skill とは

Claude Code や OpenAI Codex では、作業前に SKILL.md を読み込ませることで、 「この作業ではこう動いてね」という指示を共有できます。

つまり Skill は、AI に正しい作業手順を覚えさせる 再利用可能なワークフローです。

draw-io-skill の中身

SKILL.md 図をどう作るかの指示書
scripts/ エクスポートや品質チェックの実行ツール
fixtures/ 動作確認に使えるサンプル群

Point 2

2つの先行アプローチを統合したワークフロー

参照元

jgraph/drawio-mcp

draw.io のネイティブ操作とエクスポートの慣習を取り込む。

+
参照元

softaworks/agent-toolkit

XML レイアウト設計の指針を取り込む。

→
統合結果

draw-io-skill

どちらか一方ではなく、「いいとこどり」で実用的な図作成フローをつくる。

作成 .drawio を生成・編集
出力 PNG / SVG / PDF / JPG
検査 重なり・はみ出しを自動チェック

Point 3

export-drawio.mjs の役割

scripts/export-drawio.mjs は、draw.io のエクスポート機能を Windows / macOS / Linux で共通的に扱うためのラッパーです。

  • --output の拡張子で形式を自動判定
  • PNG は透過背景・2倍解像度・10px ボーダーが既定
  • PNG / SVG / PDF / JPG を一貫した手順で出力

地味に大きいポイント

エクスポートした画像に元の XML を埋め込むので、
画像にしたあとでも draw.io で再編集しやすい。

つまり「PNG にしたら元に戻せない」をかなり減らせます。

Point 4

check-drawio-svg-overlaps.mjs が核心

検出できる問題

チェック項目 内容
edge-edge 矢印同士が交差していないか
edge-rect 矢印がボックスを貫通していないか
edge-rect-border 矢印が枠線に重なっていないか
text-overflow(width) 横幅オーバー
text-overflow(height) 縦方向オーバー

特に重要

日本語を含む多言語テキストの折り返し幅を推定して、 テキストはみ出しを検査できます。

draw.io でありがちな「見た目では入っていそうなのに、開くとはみ出る」を 機械的に拾えるのが強いところです。

Core Value

「作る → 検知 → 直す」のループが回る

① 生成

AI エージェントが .drawio を作る

→
② 検知

リンターが重なりや文字はみ出しを自動チェック

→
③ フィードバック

検知結果をそのまま文章で返す

⑤ 繰り返す

問題がなくなるまでループを回す

←
TDD-like

図の世界でも「テストして直す」を実現

←
④ 修正

エージェントが結果を読んで図を修正

これは図版版の TDD に近い発想です。
AI が自分で描いた図を、自分でダメ出しして、自分で直す。

Use Cases

どんな場面で使えるの？

01

システム設計図の自動生成

要件を AI に渡すと、.drawio を作るところまで自動化しやすい。

02

AWS アーキテクチャ図

find_aws_icon.py を使えば、AWS アイコンのスタイル文字列も取り込みやすい。

03

ドキュメント自動更新

コード変更に追従して、図の再生成・再エクスポートを CI に組み込みやすい。

Limitations

注意点・制限事項

初期リリース

v0.1.0 は最初の公開版です。今後 API や仕様が変わる可能性があります。

ローカル要件

エクスポートには draw.io デスクトップアプリのインストールが必要です。

リンター判定はヒューリスティック

経験則ベースの判定も含まれるため、誤検知がゼロとは限りません。

文字幅推定は近似

フォント差分次第で、実際の表示と完全一致しないケースがあります。

How To Start

じゃあ、どうすればいいの？

導入の入口

  • Claude Code ならグローバルスキルまたはプロジェクトスキルとして配置
  • OpenAI Codex ならスキルリンクの仕組みで登録
  • 具体的な手順は README を参照

GitHub: Sunwood-ai-labs/draw-io-skill

まず試すなら

  1. リポジトリをクローンする
  2. npm run check を実行する
  3. fixtures/basic/ でエクスポートとリントを確認する

Closing

draw-io-skill は、
AI に「図も任せる」ための実践パッケージ

エクスポート自動化、クロスプラットフォーム対応、SVG 品質チェック、 そして 自己修正フィードバックループまで揃っている。

キーメッセージ

「図をコードのように管理する」世界観に、AI エージェントがちゃんと乗れるようになる。

この記事ベースの情報は 2026年3月14日時点のものです。