Erfasst:437 News/102 KI-Tools/413 Open-Source-Projekte/75 Lernressourcen
StartNewsOpen SourceModelleKI-ToolsSkillsLernen
Start / Skills / Entwickler-Produktivität / Draw.io-Diagramme und PNG-Export
Entwickler-Produktivität

Draw.io-Diagramme und PNG-Export

awesome-copilot communityMITSprache des Skills: Englisch
Lizenz geprüftEnthält SkripteExterner Dienst nötigMittleres Risiko
DemoEchter Lauf · claude-sonnet-5-5 · Oktober 2026
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（试用环境不能写文件）。我另外手动测了浏览器后备渲染、批量目录、无效文件和覆盖。

Was es macht

Lässt das Modell draw.io-Diagramme als mxGraphModel-XML in .drawio-Dateien schreiben und als Bilder exportieren, etwa zum Einbetten in Word-Dokumente. Das mitgelieferte drawio-to-png.mjs hat zwei Render-Backends: die draw.io-Desktop-CLI, wenn installiert (am schnellsten, pixelgenau), oder als Ausweichlösung den offiziellen draw.io-Viewer in einem Headless-Chromium oder -Edge. Es exportiert eine Datei oder ein ganzes Verzeichnis, und PNG-, SVG- und PDF-Exporte betten das Diagramm-XML ein, sodass sie in draw.io bearbeitbar bleiben. Der Skill nennt auch Stilkonventionen für Hauptdienste, externe Systeme, Erfolgs-, Warn- und Fehlerpfade, Datenspeicher und Pfeile.

So funktioniert es

  1. Das Modell schreibt das Diagramm-XML in eine .drawio-Datei.
  2. Sie führen einmalig npm install im Ordner scripts aus.
  3. node drawio-to-png.mjs input.drawio [output.png], oder --dir <Ordner>, oder --renderer=cli|viewer|auto.

Geeignet für

Architektur- und Ablaufdiagramme, die am Ende als Bilder in Dokumenten landen sollen.

Hinweise & Risiken

Mittleres Risiko: Das Exportskript startet ein lokales Programm und als Ausweichlösung einen Browser. Es findet die draw.io-CLI über die Variable `DRAWIO_PATH` oder `which drawio` und startet sie mit einer Argumentliste (nicht über eine Shell); andernfalls startet es Ihren installierten Chrome oder Edge headless mit deaktivierter Sandbox (`--no-sandbox`) und lädt das Viewer-Skript von `viewer.diagrams.net`, braucht also Netzwerkzugriff. Es braucht `npm install` (`puppeteer-core`) und schreibt Bilddateien an den Ausgabepfad, gleichnamige Dateien werden ersetzt. Getestet: Auf einem Rechner mit der draw.io-Desktop-App exportierten sowohl der Kommandozeilen-Renderer (auch mit chinesischem Text) als auch der Browser-Fallback korrekt, und das PNG enthält das bearbeitbare Diagramm-XML. Einschränkungen: Schlägt das Rendern fehl (z. B. keine gültige draw.io-Datei), wird nur ein Fehler ausgegeben, dennoch erscheint Done und der Exit-Code ist 0; eine gleichnamige Ausgabedatei wird ersetzt.