mcpField
D
drawio

drawio

github.com/ilteooodデザイン・UI2530 回インストール4 日前に更新
リポジトリ

drawio について

ネイティブの draw.io 図ファイルを作成し、文書で使える形式に書き出すスキルです。付属の Node.js スクリプトは draw.io CLI を使い、利用できない場合はヘッドレスブラウザーに切り替えます。

主な機能

  1. 01`.drawio` XML形式で図を作成
  2. 02PNG、SVG、PDFへの書き出し
  3. 03draw.io CLIまたはブラウザーで出力
  4. 04単一ファイルまたはディレクトリを出力

活用シーン

  1. 01Word文書用の図を作成
  2. 02編集可能な図ファイルを画像形式に出力

インストール

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

$npx skills add https://github.com/ilteoood/harness --skill drawio

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

同梱ファイルscripts/drawio-to-png.mjsscripts/package.json

詳細

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 対応