収録件数：437 件のニュース/102 個のAIツール/413 個のオープンソースプロジェクト/75 件の学習リソース
ホームニュースオープンソースモデルAIツールSkills学習リソース
ホーム / Skills / 開発効率化 / Draw.io 図と PNG 書き出し
開発効率化

Draw.io 図と PNG 書き出し

awesome-copilot communityMITSkill の言語: 英語
ライセンス確認済みスクリプトを含む外部サービスが必要中リスク
デモ実行記録 · claude-sonnet-5-5 · 2026年10月
I have a draw.io diagram at .claude/skills/drawio/sample/architecture.drawio. Export it to a PNG next to it (default name) using the skill's script, so I can paste it into a Word document. Dependencies are not installed yet: first run `npm install --prefix .claude/skills/drawio/scripts` (that exact command is allowed), then use the export command with relative paths. Afterwards open the PNG and describe what it shows, and tell me which renderer was used.
Skill: drawio
Read: sample/architecture.drawio.png

I exported the diagram to .claude/skills/drawio/sample/architecture.drawio.png. That is the script's default name, so the file ends in .drawio.png, not .png. It's 13 KB, and the diagram XML is embedded, so you can still edit it in draw.io.

What it shows: a simple left-to-right flow with three elements joined by arrows.

  1. Client is a blue rounded box.
  2. API Gateway is a green rounded box.
  3. 数据库 (Database) is a yellow cylinder, the data-store shape.

Renderer: the draw.io CLI (the desktop app's draw.io command), selected automatically. The headless-browser viewer fallback wasn't needed.

I ran npm install --prefix .claude/skills/drawio/scripts first, as you asked, and it added 80 packages.

You can paste the PNG straight into Word. If you'd rather have the name architecture.png, I can rename or re-export it.

试用方式：我在本机装有 draw.io 桌面版的前提下，让模型先执行 npm install，再用 Skill 的导出脚本把我构造的 .drawio 文件导出为 PNG，并打开 PNG 描述内容；Bash 只放行这两条命令。这次只试了导出这一半，没有让模型从零生成图表 XML（试用环境不能写文件）。我另外手动测了浏览器后备渲染、批量目录、无效文件和覆盖。

できること

モデルに draw.io の図を .drawio ファイル内の mxGraphModel XML として書かせ、Word 文書への埋め込みなどに使う画像へ書き出します。同梱の drawio-to-png.mjs には 2 つの描画方式があります。draw.io デスクトップ版が入っていればそのコマンドライン（最速でピクセル単位で一致）、なければヘッドレスの Chromium または Edge で公式の draw.io ビューアーを使います。1 ファイルでもディレクトリ全体でも書き出せ、PNG、SVG、PDF には図の XML が埋め込まれるため draw.io で編集し直せます。主要サービス、外部システム、成功・警告・エラーの経路、データストア、矢印のスタイル規約も載っています。

動き方

  1. モデルが図の XML を .drawio ファイルに書きます。
  2. scripts フォルダーで一度だけ npm install を実行します。
  3. node drawio-to-png.mjs input.drawio [output.png]、または --dir <フォルダー>、--renderer=cli|viewer|auto を使います。

向いている場面

最終的に文書内の画像になる、構成図やフロー図。

補足とリスク

中リスク：書き出しスクリプトはローカルのプログラムを実行し、フォールバックではブラウザも起動します。`DRAWIO_PATH` 変数または `which drawio` で draw.io のコマンドラインを見つけ、引数リストで（シェルを介さず）起動します。見つからない場合は、インストール済みの Chrome または Edge をサンドボックスを無効（`--no-sandbox`）にしてヘッドレス起動し、`viewer.diagrams.net` からビューアーのスクリプトを読み込むため、ネットワーク接続が必要です。`npm install`（`puppeteer-core`）が必要で、出力パスに画像ファイルを書き込み、同名のファイルは置き換えます。試用済み：draw.io デスクトップ版のあるマシンで、コマンドライン描画（中国語を含む）とブラウザのフォールバックの両方が正しく書き出され、PNG には再編集可能な図の XML が埋め込まれました。制限：描画に失敗した場合（たとえば有効な draw.io 形式でないファイル）はエラーを表示するだけで、Done と表示して終了コード 0 になります。同名の出力ファイルは置き換えられます。