draw-io-skill v0.2.0 リリース記事

draw-io-skill v0.2.0 は、draw.io 図をリポジトリ運用の中で扱うためのワークフローを、ひとつ上の完成度まで押し上げたリリースです。

今回の更新では、

shape-aware な SVG lint の強化
fixture ベースの回帰検証の拡張
英日対応の公開 docs
docs-backed な release note ミラー

がまとまって入りました。

draw-io-skill structure

まず何がうれしいのか

このリポジトリの強みは、draw.io を「図を書いて終わり」ではなく、

.drawio を編集ソースとして保つ
png / svg / pdf / jpg に export する
SVG lint をかける
docs や PR に載せる前に崩れを見つける

という流れまで含めて扱えるところです。

v0.2.0 は、その中でも特に lint 精度 と 公開導線 の両方が大きく伸びたリリースでした。

shape-aware lint が一気に実用寄りになった

今回の中心は scripts/check-drawio-svg-overlaps.mjs の拡張です。

追加・強化された主な観点は次のとおりです。

大きなフレーム枠に対する edge-rect-border
非矩形 shape に対する edge-shape-border
矩形と非矩形 shape の接触を拾う rect-shape-border
companion .drawio を使った shape-aware な text-overflow

特に面白いのは、SVG だけではなく .drawio 側のメタデータも併用していることです。
これによって document、hexagon、parallelogram、trapezoid といった shape に対して、単純な矩形ベースよりも現実に近い lint ができるようになっています。

図のレビューでは、

線がフレームや図形の縁をなぞっている
テキストが一見入っているようで実は窮屈
矩形以外の shape で当たり判定が甘い

といった問題が起きがちです。今回の release は、まさにそのへんを詰めてきた印象です。

fixture が増えて、壊れにくくなった

lint ルールが増えても、次の変更で壊れてしまっては意味がありません。

そこで v0.2.0 では、検出ルールごとの regression fixture も追加されています。

さらに、これらを検証する script も入りました。

この構成のおかげで、「本来エラーになるべき図が、ちゃんとエラーになるか」を固定化できます。
リポジトリとしての信頼性が一段上がったポイントです。

`npm run verify` で release 前チェックをまとめて回せる

今回の release では package.json の verify 導線も整理されました。

npm run verify では次をまとめて回せます。

Node スクリプトの syntax check
fixture verifier の実行
uv 経由の Python syntax check
VitePress docs build

実際の release 作業でも、このコマンドをローカルで実行してから公開しています。

bash

npm run verify

release 前に何を見ればいいのかが 1 コマンドにまとまっているのは、あとから触る人にもかなり親切です。

公開 docs と Pages がそろった

v0.2.0 では docs 面もかなり整いました。

公開サイトには次のような導線があります。

Getting Started
Showcase
Architecture
Workflow
Export And Lint
Reference Guides
Troubleshooting
Release Notes

しかも英語と日本語の両方に対応しています。

ワークフロー面でも、

が整備され、docs が GitHub Pages に公開される形まで固まりました。

今回の release notes も GitHub release 本文だけで終わらせず、docs 側に英日ミラーを持たせています。

showcase 資産が増えて、見本として使いやすくなった

今回の release では、機能だけでなく「何を見本に使えばいいか」もわかりやすくなっています。

代表的な資産は次のとおりです。

assets/draw-io-skill-structure.drawio*
assets/draw-io-skill-structure-shapes.drawio*
assets/draw-io-skill-structure-icons.drawio*
assets/draw-io-skill-structure-icons.ja.drawio*
assets/draw-io-skill-structure.ja.drawio*

特に Showcase ページは、次の 3 方向で見本が分かれているのが良いです。

リポジトリ構成を説明する図
lint レビュー用の図
アイコン入りの見栄え重視な図

「サンプルがある」だけでなく、用途ごとに見本が分かれているので導入しやすくなっています。

実物を見るとわかりやすいサンプル

1. shape-aware lint review

Shape-aware lint review sample

2. 日本語版の構成図

draw-io-skill structure ja

Source: draw-io-skill-structure.ja.drawio
SVG: draw-io-skill-structure.ja.drawio.svg
PNG: draw-io-skill-structure.ja.drawio.png

3. アイコン入りの showcase

draw-io-skill structure icons ja

どういう人に刺さるか

今回の v0.2.0 は、特に次のような人に向いています。

draw.io を source of truth として管理したい人
図の品質確認を CI に寄せたい人
Codex や Claude Code の中で図も扱いたい人
docs と release をセットで運用したい人

draw.io を単なる添付画像ではなく、再編集・再 export・再検証できる成果物として扱いたい場合に、かなり参考になる構成です。

確認した公開状態

今回の v0.2.0 公開時には、少なくとも次の点まで確認しています。

npm run verify のローカル成功
GitHub Actions CI の成功
GitHub Actions Pages の成功
英日 release notes ページの live URL が 200 を返すこと
v0.2.0 GitHub release 本文に docs ミラーへのリンクが入っていること

単に tag を打って終わりではなく、公開導線まで含めて整えた release になっています。

バージョン番号の注意点

Git tag は v0.2.0 ですが、package.json の version は 1.0.0 のままです。

しかも private: true なので、npm package の公開版バージョンではありません。
この repo では、現時点では Git tag が公開リリースの識別子 と考えるのが自然です。

まとめ

draw-io-skill v0.2.0 は、draw.io を使う repo を「実験用」から「運用可能」へ押し上げるタイプのリリースでした。

特に、

shape-aware lint の強化
fixture ベースの回帰検証
docs と release mirror の整備
GitHub Pages まで含めた公開導線

の 4 点がきれいにそろっています。

draw.io 図を、画像ではなく再編集可能な成果物として扱いたい人には、かなりいい更新だと思います。

draw-io-skill v0.2.0 リリース記事 ​

まず何がうれしいのか ​

shape-aware lint が一気に実用寄りになった ​

fixture が増えて、壊れにくくなった ​

npm run verify で release 前チェックをまとめて回せる ​

公開 docs と Pages がそろった ​

showcase 資産が増えて、見本として使いやすくなった ​

実物を見るとわかりやすいサンプル ​

1. shape-aware lint review ​

2. 日本語版の構成図 ​

3. アイコン入りの showcase ​

どういう人に刺さるか ​

確認した公開状態 ​

バージョン番号の注意点 ​

関連リンク ​

まとめ ​