mcpField
D
drawio

drawio

github.com/ilteoood设计与 UI2530 次安装3 天前更新
代码仓库

关于 drawio

用于生成原生 draw.io 图表文件，并导出为可用于文档的图像格式。随附的 Node.js 脚本可使用 draw.io CLI，或在其不可用时使用无头浏览器。

主要功能

  1. 01以 `.drawio` XML 生成图表
  2. 02导出为 PNG、SVG 和 PDF
  3. 03使用 draw.io CLI 或浏览器回退
  4. 04导出单个文件或整个目录

适用场景

  1. 01为 Word 文档制作图表
  2. 02将可编辑图表导出为图像

安装

复制下面的命令，在终端中运行。

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

安装后在 Claude Code 中输入/drawio确认已加载。

附带文件scripts/drawio-to-png.mjsscripts/package.json

详细介绍

Draw.io 图表 Skill

生成 draw.io 图表并保存为原生 .drawio 文件，然后将其导出为可嵌入 Word 文档的 PNG 图片。

如何创建图表

  1. 以 mxGraphModel 格式为所需图表生成 draw.io XML
  2. 使用创建/编辑文件工具将 XML 写入 .drawio 文件
  3. 使用捆绑的导出脚本导出为 PNG

捆绑的导出脚本

此 Skill 包含 drawio-to-png.mjs，这是一个 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 文件夹内容
文件用途
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