mcpField
D
drawio

drawio

github.com/githubドキュメント40.6k320 回インストール1 日前に更新
リポジトリ

drawio について

drawio は、ネイティブの .drawio 図を生成し、画像や文書形式に書き出すスキルです。編集可能な図や Word 文書に埋め込む画像の作成に向いており、draw.io CLI またはヘッドレスブラウザーで動く書き出しスクリプトを備えています。

主な機能

  1. 01mxGraphModel XML の図を生成
  2. 02ネイティブの .drawio ファイルを作成
  3. 03PNG、SVG、PDF に書き出し
  4. 04CLI またはブラウザーでレンダリング

活用シーン

  1. 01文書用の編集可能な図を作成
  2. 02図を PNG にして Word に埋め込み
  3. 03ディレクトリ内の図を一括書き出し

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/github/awesome-copilot --skill drawio

インストール後、Claude Code で/drawioを入力して読み込まれたか確認します。

同梱ファイルscripts/package.jsonscripts/drawio-to-png.mjs

詳細

Draw.io 図表スキル

ネイティブの .drawio ファイルとして draw.io 図表を生成し、Word 文書に埋め込める PNG 画像にエクスポートします。

図表の作成方法

  1. リクエストされた図表の mxGraphModel 形式で draw.io XML を生成します
  2. ファイル作成／編集ツールを使って、XML を .drawio ファイルに書き込みます
  3. 同梱のエクスポートスクリプトを使って PNG にエクスポートします

同梱のエクスポートスクリプト

このスキルには drawio-to-png.mjs が含まれています。これは、次の 2 つのレンダリングバックエンドを備えた Node.js エクスポートスクリプトです。

  1. draw.io CLI（ピクセル単位で正確、最速）— draw.io デスクトップ版がインストールされている場合、自動的に使用されます
  2. ヘッドレスブラウザー上の公式 draw.io ビューアー（ピクセル単位で正確、Chromium／Edge が必要）— CLI を利用できない場合のフォールバックです
使用方法
# Install dependencies (one-time, from the scripts folder)
cd skills/drawio/scripts && npm install

# Export a single diagram
node skills/drawio/scripts/drawio-to-png.mjs <input.drawio> [output.png]

# Export all .drawio files in a directory
node skills/drawio/scripts/drawio-to-png.mjs --dir <directory>

# Force a specific renderer
node skills/drawio/scripts/drawio-to-png.mjs --renderer=cli|viewer|auto <input.drawio>
スキルフォルダーの内容
ファイル用途
SKILL.mdこの手順書
scripts/drawio-to-png.mjsNode.js エクスポートスクリプト（CLI + ブラウザのフォールバック）
scripts/package.json依存関係（puppeteer-core）

対応しているエクスポート形式

形式XML を埋め込み備考
pngはいどこでも表示でき、draw.io で編集可能です
svgはい拡大縮小可能で、draw.io で編集可能です
pdfはい印刷可能で、draw.io で編集可能です

Draw.io XML のスタイル規約

一貫性のあるプロフェッショナルな図表にするため、次のスタイルを使用してください。


<mxCell style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;strokeWidth=2;arcSize=12;shadow=1;" />


<mxCell style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;" />


<mxCell style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" />


<mxCell style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" />


<mxCell style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;" />


<mxCell style="shape=cylinder3;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" />


<mxCell style="edgeStyle=orthogonalEdgeStyle;rounded=1;strokeColor=#6c8ebf;strokeWidth=2;" />

draw.io CLI の場所を確認する

まず drawio を試し（PATH 上にあれば動作します）、次に以下を使用します。

  • Windows: "C:\Program Files\draw.io\draw.io.exe"
  • macOS: /Applications/draw.io.app/Contents/MacOS/draw.io
  • Linux: drawio（snap／apt／flatpak 経由）
CLI のエクスポートコマンド
drawio -x -f png -e -b 10 -o <output.png> <input.drawio>

フラグ：-x（エクスポート）、-f（形式）、-e（図表 XML を埋め込み）、-b（境界線）、-o（出力先パス）。

コメント

Markdown 対応