Agent Skills by ALSEL
汎用デザイン・クリエイティブ⭐ リポ 38品質スコア 80/100

draw-io

draw.ioの図を作成、編集、エクスポート、確認できます。ネイティブな.drawio XML生成、PNG/SVG/PDFエクスポート、SVGの重複チェック、枠線の重複検出、ラベルの侵入検出、ラベル矩形、短いターミナル、テキストオーバーフローのリント機能、レイアウト調整、AWSアイコンの使用に対応しています。

description の原文を見る

Create, edit, export, and review draw.io diagrams. Use for native .drawio XML generation, PNG/SVG/PDF export, SVG overlap, border-overlap, label-intrusion, label-rect, short-terminal, and text-overflow linting, layout adjustment, and AWS icon usage.

SKILL.md 本文

draw.io ダイアグラム スキル

1. 目的

エージェントが以下の処理を必要とする場合、このスキルを使用します:

  • ネイティブ .drawio XML として新しい draw.io ダイアグラムを作成する
  • 既存の .drawio ファイルを編集またはリファクタリングする
  • ダイアグラムを png、svg、pdf、jpg にエクスポートする
  • ルーティングされたエッジ、ボックス/フレーム境界のオーバーラップ、サポートされている非矩形図形の境界オーバーラップ、ボックス貫通、短い矢印テール、ラベル衝突、またはテキストオーバーフローをチェックする
  • AWS アイコンを使用したアーキテクチャダイアグラムを構築する

このスキルは以下を意図的に組み合わせます:

  • Claude Code スタイルのツールで使用されるネイティブ draw.io アシスタント ワークフロー
  • リポジトリ使用からの実践的な XML 編集およびレイアウト ルール
  • draw.io がフラグを立てない問題をキャッチするリポジトリ対応 SVG リント

1.1 リポジトリ構成

リポジトリ レイアウトとバンドルされたワークフロー要素は、以下のダイアグラムにまとめられています。

draw-io-skill structure

リポジトリには以下も含まれます:

  • assets/draw-io-skill-structure.drawio* の下の英語構造ソースとエクスポート
  • assets/draw-io-skill-structure-icons.drawio* の下のアイコン ブロック ショーケースと、assets/draw-io-skill-structure-icons.ja.drawio* の下の日本語ローカライズ版
  • assets/draw-io-skill-structure-shapes.drawio の下の図形フォーカス リント レビュー サンプル、およびエクスポート (assets/draw-io-skill-structure-shapes.drawio.png と assets/draw-io-skill-structure-shapes.drawio.svg)
  • assets/draw-io-skill-structure.ja.drawio* の下の日本語ローカライズ版ソースとエクスポート
  • docs/guide/showcase.md と docs/ja/guide/showcase.md の下のパブリック ショーケース ページ
  • fixtures/basic、fixtures/border-overlap、fixtures/large-frame-border-overlap、fixtures/shape-border-overlap、fixtures/label-rect-overlap、fixtures/text-cell-overflow、fixtures/shape-text-overflow の下のフィクスチャベース リント カバレッジ

1.2 リポジトリローカル コマンド

このリポジトリ内で作業する場合、以下が主なメンテナンス コマンドです:

npm install
npm run check
npm run verify
npm ci
npm run docs:build
npm run docs:dev
uv run python -m py_compile scripts/find_aws_icon.py

以下のように使用します:

  • npm run check: スクリプト構文とフィクスチャベース リント検証
  • npm run verify: リポジトリ全体のサインオフ (ドキュメント ビルドを含む)
  • npm run docs:build: ワンショット ドキュメント ビルド
  • npm run docs:dev: インタラクティブ ドキュメント プレビュー

ローカル アシスタント環境でリポジトリをスキルとしてアタッチする場合、リポジトリ ドキュメントは以下の規約を使用します:

  • Windows の Codex: ジャンクション C:\Users\YOUR_NAME\.codex\skills\draw-io -> D:\Prj\draw-io-skill
  • Claude Code: ~/.claude/skills/drawio の下にクローン

1.3 リポジトリ QA モデル

リポジトリは 3 つの QA レイヤーを使用します:

  1. JavaScript ツールの構文チェック
  2. フィクスチャベース リント検証
  3. パブリック向けドキュメントのドキュメント ビルド検証

これにより、技術的なツールと ユーザー向けドキュメントが CI で同期された状態に保たれます。

2. デフォルト ワークフロー

ユーザーが より限定的な内容を求めない限り、この順序に従います:

  1. まずネイティブ .drawio ファイルを作成または更新します。
  2. .drawio をリポジトリ作業の編集可能なソース of truth として保持します。
  3. ユーザーがエクスポート アーティファクトを求めた場合、.drawio.png、.drawio.svg、.drawio.pdf、または .drawio.jpg にエクスポートします。
  4. エッジ ルーティングまたはラベル密度が重要な場合は、SVG をエクスポートしてリント スクリプトを実行します。
  5. ユーザーが求めた最終アーティファクトを開くか表示します。
  6. リントが成功しても、結果を視覚的に確認します。

ユーザーがダイアグラムのみを求めてフォーマットをリクエストしない場合は、.drawio ファイルで停止します。

3. 基本ルール

  • .drawio ファイルのみを直接編集します。
  • 生成された .drawio.png、.drawio.svg、.drawio.pdf ファイルを手動で編集しません。
  • Mermaid または CSV 変換よりもネイティブ mxGraphModel XML を優先します。
  • エクスポート後のクリーンアップを明示的にユーザーが望まない限り、ソース ダイアグラムを保持します。
  • 説明的な小文字のファイル名にハイフンを使用します。

例:

  • login-flow.drawio
  • login-flow.drawio.png
  • er-diagram.drawio.svg
  • architecture-overview.drawio.pdf

4. 出力フォーマット

フォーマット埋め込み XML推奨用途
.drawion/a編集可能なソース ダイアグラム
pngありドキュメント、スライド、チャット添付
svgありドキュメント、スケーラブル出力、リント入力
pdfありレビュー、印刷
jpgなし最後の手段のロッシー エクスポート

リポジトリ ワークフローでは、以下を優先します:

  • 編集時は .drawio
  • リント実行時は .drawio.svg
  • ドキュメント埋め込み時は .drawio.png または .drawio.svg

5. エクスポート コマンド

5.1 推奨エクスポート ヘルパー

まずバンドルされたヘルパーを使用します:

node scripts/export-drawio.mjs architecture.drawio --format png --open
node scripts/export-drawio.mjs architecture.drawio --format svg
node scripts/export-drawio.mjs architecture.drawio --output architecture.drawio.pdf

動作内容:

  • Windows、macOS、Linux で draw.io CLI を見つけます
  • png、svg、pdf に埋め込み XML を使用します
  • デフォルトは透明な 2x PNG エクスポート
  • 自動 CLI 検出に失敗した場合、明示的な --drawio <path> をサポート
  • ユーザーが明示的にエクスポートのみを望む場合、オプションの --delete-source をサポート

draw.io CLI 検出に失敗した場合、明示的な実行可能ファイル パスで再実行します:

node scripts/export-drawio.mjs architecture.drawio --drawio "C:\\Program Files\\draw.io\\draw.io.exe" --format svg

macOS または Linux では、その環境にインストールされた実行可能ファイルを --drawio でポイントします。

5.2 手動 draw.io CLI エクスポート

必要に応じて、draw.io を直接呼び出します:

drawio -x -f png -e -s 2 -t -b 10 -o architecture.drawio.png architecture.drawio
drawio -x -f svg -e -b 10 -o architecture.drawio.svg architecture.drawio
drawio -x -f pdf -e -b 10 -o architecture.drawio.pdf architecture.drawio
drawio -x -f jpg -b 10 -o architecture.drawio.jpg architecture.drawio

主なフラグ:

  • -x: エクスポート モード
  • -f: 出力フォーマット
  • -e: png/svg/pdf にダイアグラム XML を埋め込む
  • -o: 出力ファイル パス
  • -b: 境界幅
  • -t: PNG の透明背景
  • -s: スケール係数
  • -a: PDF のすべてのページ
  • -p: ページ インデックス (1 ベース)

5.3 レガシー PNG ヘルパー

既存のシェル ワークフローの場合、元のヘルパーは引き続き利用可能です:

bash scripts/convert-drawio-to-png.sh architecture.drawio

6. SVG リント

SVG をエクスポートした後、バンドルされたリントを実行します:

node scripts/check-drawio-svg-overlaps.mjs architecture.drawio.svg
node scripts/check-drawio-svg-overlaps.mjs fixtures/border-overlap/border-overlap.drawio.svg
node scripts/check-drawio-svg-overlaps.mjs fixtures/large-frame-border-overlap/large-frame-border-overlap.drawio.svg
node scripts/check-drawio-svg-overlaps.mjs fixtures/shape-border-overlap/shape-border-overlap.drawio.svg
node scripts/check-drawio-svg-overlaps.mjs fixtures/label-rect-overlap/label-rect-overlap.drawio
node scripts/check-drawio-svg-overlaps.mjs fixtures/text-cell-overflow/text-cell-overflow.drawio

リント スクリプトは現在以下をチェックします:

  • edge-edge: エッジのクロスと一直線上のオーバーラップ
  • edge-rect-border: ボックスまたは大きなフレーム境界に沿って実行または目に見えてオーバーラップするライン
  • edge-shape-border: document、hexagon、parallelogram、trapezoid などのサポートされている非矩形図形の境界に沿って実行するライン
  • edge-rect: ボックスに貫通するライン
  • edge-terminal: 最後の曲げ後に短すぎる最終矢印実行
  • edge-label: ルーティングされたラインがラベル テキスト ボックスを横切る
  • label-rect: ラベル テキスト ボックスが別のボックスまたはカードと衝突
  • rect-shape-border: ボックスまたはフレーム境界がサポートされている非矩形図形の境界に沿って実行
  • text-overflow(width): テキストがボックスに対して幅が広すぎる可能性
  • text-overflow(height): テキストがボックスに対して高さが高すぎる可能性

注:

  • 入力は .drawio または .drawio.svg のいずれかが可能
  • 入力が .drawio の場合、チェッカーはコンパニオン draw.io ジオメトリも読み込むため、label-rect とテキスト フィット チェックは編集可能なソースと整合しています
  • テキスト オーバーフロー検出はヒューリスティックであり、ピクセル完全ではありません
  • バンドルされたフィクスチャは、シンプルなボックス境界オーバーラップ、大きなフレーム境界オーバーラップ、サポートされている非矩形図形の境界オーバーラップ、ラベルボックス衝突、テキスト セルオーバーフロー、図形認識テキスト オーバーフローをカバーします
  • edge-terminal、edge-label、label-rect はヒューリスティック チェックで、リポジトリ ダイアグラムで見られる一般的な「微小な矢印テール」、「ラインがラベルを通過」、「ノート カードがラベルを覆う」draw.io 障害をキャッチするためのものです
  • リント成功は視覚的確認に取って代わるものではありません

見つかった内容を調査する場合:

  • edge-rect-border、edge-shape-border、rect-shape-border が意図的な場合は、ルーティングを明確に保ち、出力を視覚的にレビューし、周辺のワークフローで例外を文書化します
  • edge-terminal が発火した場合は、矢印の前により長い直線セグメントを追加するか、最後の曲げをターゲットからさらに遠くに移動します
  • edge-label が発火した場合は、エッジを再ルーティングするか、ラベルを移動して、テキストがクリーンな呼吸スペースを保つようにします
  • label-rect が発火した場合は、ノート/カード/ボックスを移動するか、ラベルをシフトしてオーバーラップがなくなるようにします
  • text-overflow が誤検知に見える場合は、まずボックスを広げたり、ラベルを短くしたり、意図的な改行を追加したり、明示的なフォントを設定したりしてみます

7. XML とレイアウト ルール

7.1 必須 XML 構造

すべてのダイアグラムはネイティブ mxGraphModel XML を使用する必要があります:

<mxGraphModel>
  <root>
    <mxCell id="0"/>
    <mxCell id="1" parent="0"/>
  </root>
</mxGraphModel>

すべての通常のダイアグラム セルは、意図的にコンテナ親を使用する場合を除き、parent="1" の下に存在する必要があります。

7.2 エッジ ジオメトリは必須

すべてのエッジ セルはジオメトリを含める必要があります:

<mxCell id="e1" edge="1" parent="1" source="a" target="b" style="edgeStyle=orthogonalEdgeStyle;">
  <mxGeometry relative="1" as="geometry"/>
</mxCell>

自己終了エッジ セルを使用しないでください。

7.3 フォント設定

日本語テキストまたはスライド使用を含むダイアグラムの場合、フォント ファミリを明示的に設定します:

<mxGraphModel defaultFontFamily="Noto Sans JP" ...>

テキスト スタイルで fontFamily も設定します:

style="text;html=1;fontSize=18;fontFamily=Noto Sans JP;"

7.4 スペーシングとルーティング

  • ノードを寛容にスペースします。ルーティングされたダイアグラムでは約 200px の水平と 120px の垂直ギャップが好ましい
  • 矢印の近くに少なくとも 20px の直線セグメントを残します
  • ほとんどのテクニカル ダイアグラムでは edgeStyle=orthogonalEdgeStyle を使用します
  • 自動ルーティングがオーバーラップまたは不格好な曲げを生成する場合は、明示的なウェイポイントを追加します
  • 大きな外部フレームまたはスイムレーンを使用する場合は、ルーティングされたセグメントをフレーム ストロークから離し、フレームと子ボックスの間の溝を使用します
  • 可能な場合は粗いグリッドに配置します

ウェイポイントを使用した例:

<mxCell id="e1" style="edgeStyle=orthogonalEdgeStyle;rounded=1;jettySize=auto;" edge="1" parent="1" source="a" target="b">
  <mxGeometry relative="1" as="geometry">
    <Array as="points">
      <mxPoint x="300" y="150"/>
      <mxPoint x="300" y="250"/>
    </Array>
  </mxGeometry>
</mxCell>

7.5 コンテナーとグループ

より大きなボックスを単に上に置くことでコンテインメントを偽ることはしません。

  • 子要素に parent="containerId" を使用します
  • コンテナーが目に見えるタイトル バーを必要とする場合は swimlane を使用します
  • 非表示のコンテナーの場合は group;pointerEvents=0; を使用します
  • カスタム図形をコンテナーとして使用する場合は container=1;pointerEvents=0; を追加します

7.6 日本語テキスト幅

日本語文字あたり約 30 ～ 40px を許容します。

<mxGeometry x="140" y="60" width="400" height="40" />

テキストが日本語と英語の混在の場合は、より広い方を選択します。

7.7 背景、フレーム、マージン

  • ハードコードされた白い背景よりも透明な背景を優先します
  • 丸みを帯びたフレームまたはスイムレーンの内側では、境界から少なくとも 30px のマージンを保ちます
  • ストロック幅と丸みを帯びたコーナーを考慮します
  • タイトルとラベルがフレーム エッジに近すぎないことを確認します

7.8 ラベルと改行

  • 短いサービス名には可能な限り 1 行を使用します
  • 意図的な 2 行のラベルには &lt;br&gt; を使用します
  • 窮屈なボックスを強制する代わりに冗長な文言を短くします

7.9 メタデータと段階的な開示

必要に応じて、タイトル、説明、最後の更新、作成者、またはバージョンを含めます。

1 つのキャンバスが密になった場合は、複雑なシステムを複数のダイアグラムに分割します:

  • コンテキスト ダイアグラム
  • システム ダイアグラム
  • コンポーネント ダイアグラム
  • デプロイメント ダイアグラム
  • データ フロー ダイアグラム
  • シーケンス ダイアグラム

8. AWS アイコン ワークフロー

AWS ダイアグラムを操作する場合:

  • 可能な限り最新のオフィシャル アイコン命名を使用します
  • 現在の mxgraph.aws4.* アイコン参照を優先します
  • 意味を追加しない装飾的なアイコンを削除します

アイコンは以下で検索します:

uv run python scripts/find_aws_icon.py ec2
uv run python scripts/find_aws_icon.py lambda

9. チェックリスト

  • ダイアグラム ソースは有効な .drawio ファイル
  • エクスポート ファイル名がエクスポート時に .drawio.<format> を使用
  • エッジ セルが <mxGeometry relative="1" as="geometry"/> を含有
  • 日本語テキストが関係する場合、フォントは明示的
  • ユーザーが求めない限り、ハードコードされた白いページ背景なし
  • コンテナーに十分な内部マージンがある
  • エッジ ルーティングが視覚的に明確で、矢印のための余地がある
  • ルーティング集約なダイアグラムの SVG リント成功
  • 微小な終端実行が意図的に受け入れられない限り、edge-terminal 検出結果なし
  • edge-label または label-rect 検出結果なし
  • ボックスまたはフレーム境界オーバーラップが意図的に受け入れられない限り、edge-rect-border 検出結果なし
  • サポートされている非矩形境界接触が意図的に受け入れられない限り、edge-shape-border または rect-shape-border 検出結果なし
  • text-overflow(width) または text-overflow(height) 検出結果なし
  • 最終 PNG/SVG/PDF を視覚的にチェック

10. リポジトリ ドキュメント

リポジトリ向けドキュメントおよびオンボーディング:

ドキュメント固有リポジトリ注:

  • リポジトリ名変更後に GitHub Pages スタイルが破損した場合は、VitePress ベースがまだ /draw-io-skill/ と一致していることを確認します

11. 参照とクレジット

このローカル バージョンは意図的にブレンドされたスキルです:

  • 編集およびレイアウト ガイダンスは softaworks/agent-toolkit にインスパイアされた
  • ネイティブ アシスタント ワークフローおよびエクスポート規約は jgraph/drawio-mcp にインスパイアされた
  • SVG リントおよびリポジトリ対応 QA 拡張はこのリポジトリで追加

参照リポジトリおよびソース:

ライセンス: MIT(寛容ライセンスのため全文を引用しています) · 原本リポジトリ

詳細情報

作者
Sunwood-ai-labs
リポジトリ
Sunwood-ai-labs/draw-io-skill
ライセンス
MIT
最終更新
2026/3/20
GitHubで原本を見る →フィードバックを送る

Source: https://github.com/Sunwood-ai-labs/draw-io-skill / ライセンス: MIT

本サイトは GitHub 上で公開されているオープンソースの SKILL.md ファイルをクロール・インデックス化したものです。 各スキルの著作権は原作者に帰属します。掲載に問題がある場合は info@alsel.co.jp または /takedown フォームよりご連絡ください。
原作者: Sunwood-ai-labs · Sunwood-ai-labs/draw-io-skill · ライセンス: MIT