已收錄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 有兩種算繪方式：已安裝 draw.io 桌面版時使用其命令列（最快、像素級一致），否則回退到在無頭 Chromium 或 Edge 中執行官方 draw.io 檢視器。可以匯出單一檔案或整個目錄，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 命令列，並以參數清單（不經過 shell）啟動它；否則會以關閉沙箱（`--no-sandbox`）的方式無頭啟動你安裝的 Chrome 或 Edge，並從 `viewer.diagrams.net` 載入檢視器腳本，所以需要連網。它需要 `npm install`（`puppeteer-core`），並在輸出路徑寫入圖片檔，同名檔案會被取代。已試用：在裝有 draw.io 桌面版的本機上，命令列渲染（含中文）與瀏覽器備援渲染都能正確匯出，PNG 內嵌了可再編輯的圖表 XML。限制：渲染失敗（例如檔案不是有效的 draw.io 格式）時只會印出錯誤，仍顯示 Done 且結束碼為 0；同名輸出檔會被直接取代。