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

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

Presentation-first / draw-io-skill v0.1.0

AI が図を自分で直せる

draw-io-skill を発表向けに短く整理した 3D deck

  • 作る
  • 検知する
  • 自分で直す

Takeaway

今日の要点は 3 つだけ

01

AI が draw.io を扱える

  • .drawio を作成
  • 出力も自動化
  • 人手の図修正を減らす
02

リンターが目になる

  • 重なりを検知
  • 文字はみ出しを検知
  • 結果をそのまま返せる
03

自己修正ループが回る

  • 生成する
  • ダメ出しを受ける
  • 自分で直して再挑戦

Why It Matters

図作成のつらさを AI に肩代わりさせる

Before
  • draw.io を毎回手で開く
  • 配置調整が地味に重い
  • 仕上がり確認も目視頼み
After
  • AI が図を生成
  • AI が自分で検査
  • AI が修正まで回す
一言でいうと draw.io を使うための「取扱説明書 + ツールセット」

Point 1

土台は Skill の仕組み

Skill = 指示書

  • SKILL.md を読む
  • 正しい手順を共有する
  • 同じ作業を再利用できる

draw-io-skill の中身

  • 指示書
  • エクスポート用スクリプト
  • 品質チェック用スクリプト
  • サンプル fixture

Point 2

2 つの流儀を統合して実用化

参照元 A

jgraph/drawio-mcp

  • ネイティブ操作
  • エクスポートの慣習
+
参照元 B

agent-toolkit

  • XML レイアウト指針
  • 構造化された編集フロー
→
結果

実用的な AI 図解フロー

  • 生成
  • 出力
  • 検査

Point 3

export-drawio.mjs は出力の共通窓口

  • Windows / macOS / Linux で共通
  • --output の拡張子で形式判定
  • PNG / SVG / PDF / JPG に対応
  • PNG は透過背景 + 2 倍解像度が既定

発表で刺さるポイント

  • 画像化しても再編集しやすい
  • 元 XML を埋め込める
  • 「書き出したら終わり」になりにくい

Point 4

リンターは何を見ているか

edge-edge

矢印の交差

  • 線同士の見づらさを検知
edge-rect

ボックス貫通

  • 線が箱を突き抜ける崩れを検知
edge-rect-border

枠線重なり

  • 境界が読みにくい状態を検知
text-overflow

文字はみ出し

  • 横幅
  • 高さ
  • 日本語を含む推定に対応

Core

価値の本体は自己修正ループ

1 生成
  • AI が図を作る
→
2 検知
  • リンターが崩れを拾う
→
3 返す
  • 結果を文章で返す
→
4 修正
  • AI が自分で直す
↺
5 再実行
  • 問題が消えるまで回す
TDD に近い 図でも「テストして直す」を回せる

Use Cases

使いどころはこの 3 パターン

01

設計図の自動生成

  • 要件から図を起こす
  • たたき台づくりを高速化
02

AWS 図の生成

  • find_aws_icon.py を利用
  • アイコン流用を楽にする
03

CI 連携

  • コード変更で図も再生成
  • ドキュメント更新を追従

Limits

注意点は先に共有しておく

制限

  • v0.1.0 は初期リリース
  • API や仕様は今後変わりうる
  • 判定は一部ヒューリスティック
  • 文字幅推定は近似計算

前提環境

  • draw.io デスクトップアプリが必要
  • ローカルで export を実行
  • 誤検知ゼロではない

How To Start

まずは小さく試すのがおすすめ

導入先

  • Claude Code に登録
  • OpenAI Codex に登録
  • README の手順を参照

最初の 3 ステップ

  1. リポジトリを clone
  2. npm run check を実行
  3. fixtures/basic/ を触る

Closing

AI に「図も任せる」ための実践パッケージ

ポイント

  • 生成できる
  • 検知できる
  • 自分で直せる

価値

  • 図をコードのように扱える
  • レビュー負荷を下げやすい
  • CI にも載せやすい

発表向けに情報量を圧縮した bullet-first 版です。