draw-io-skill

English · 日本語

Codex、Claude Code、リポジトリ運用でそのまま使える、native .drawio 中心の draw.io スキルです。

✨ 概要

`draw-io-skill` は、diagram 作成の実務で必要になりやすい 3 つを 1 つにまとめたリポジトリです。

undefined

作る、整える、書き出す、崩れを見つける、までをリポジトリの中で一続きに扱えるようにしています。

🚀 クイックスタート

まずは同梱 fixture を使ってローカル確認できます。

npm ci
npm run verify
node scripts/export-drawio.mjs fixtures/basic/basic.drawio --format svg
node scripts/check-drawio-svg-overlaps.mjs fixtures/basic/basic.drawio.svg
uv run python scripts/find_aws_icon.py lambda

`npm run verify` は、構文チェック、同梱されている lint 回帰 fixture 一式、docs build までまとめて実行します。`edge-terminal`、`edge-label`、`label-rect`、`text-overflow` まで含めて一気に確認したいときの最短ルートです。

ドキュメントサイトだけを build したい場合:

npm ci
npm run docs:build

🧭 基本フロー

undefined

日本語向けの編集用ソースと書き出し済みアセットは `assets/draw-io-skill-structure.ja.drawio`、 `assets/draw-io-skill-structure.ja.drawio.png`、 `assets/draw-io-skill-structure.ja.drawio.svg` にあります。英語版は従来どおり `assets/draw-io-skill-structure.drawio` 系を参照してください。

🖼️ ショーケース用サンプル

ショーケース寄りに見せたいときは、次の同梱サンプルを起点にするのがおすすめです。

undefined

ガイド付きの紹介は [`docs/ja/guide/showcase.md`](./docs/ja/guide/showcase.md) にまとめています。

🛠️ 含まれるもの

native draw.io ワークフロー

undefined

export helper

node scripts/export-drawio.mjs architecture.drawio --format png --open
node scripts/export-drawio.mjs architecture.drawio --fo