mcpField
D
drawio-generator

drawio-generator

github.com/thincher设计与 UI135 次安装31 周前更新
代码仓库

关于 drawio-generator

drawio-generator 是用于生成可在浏览器中打开和编辑的 draw.io 图表的技能。它帮助用户选择 Mermaid、CSV 或 XML 格式，并生成图表的 Markdown 链接。

主要功能

  1. 01指导选择 Mermaid、CSV 或 XML
  2. 02支持常见、软件、基础设施和业务图表
  3. 03通过 Python 脚本生成 draw.io 链接
  4. 04提供 XML 格式规范提示

适用场景

  1. 01用 Mermaid 代码创建流程图
  2. 02将层级数据导入为组织结构图
  3. 03制作需要精确布局和自定义形状的图表

安装

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

$npx skills add https://github.com/thincher/awsome_skills --skill drawio-generator

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

附带文件scripts/generate_drawio_url.py

详细介绍

Draw.io 图表生成器

生成交互式 draw.io 图表，供用户在浏览器中打开和编辑。

支持的图表类型

Draw.io 支持几乎所有图表类型：

  • 标准图表：流程图、组织结构图、思维导图、时间线、维恩图
  • 软件：UML（类图、时序图、活动图、用例图）、ERD、架构图
  • 云/基础设施：AWS、Azure、GCP、Kubernetes、网络拓扑图
  • 工程：电路图、数字逻辑图、P&ID、平面图
  • 业务：BPMN、价值流、客户旅程、SWOT
  • UI/UX：线框图、模型图、站点地图
  • 以及更多：信息图、数据流图、决策树等

格式选择指南

格式最适合
Mermaid流程图、时序图、ERD、甘特图、状态图、类图
CSV层级数据（组织结构图）、从电子表格批量导入
XML复杂布局、精确定位、自定义样式、图标、形状

使用方法

步骤 1：确定图表的最佳格式
  • 大多数标准图表（流程图、时序图、ERD）使用 Mermaid
  • 组织结构图等层级数据使用 CSV
  • 需要精确控制位置或使用自定义形状时使用 XML
步骤 2：生成图表代码

使用选定的格式编写图表代码（参见下方示例）。

步骤 3：执行 Python 脚本

运行脚本 scripts/generate_drawio_url.py（相对于此 SKILL.md 文件的路径），以创建 Markdown 链接。

格式模板

Mermaid
graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Action]
    B -->|No| D[End]
XML（draw.io 原生格式）
<mxGraphModel>
  <root>
    <mxCell id="0"/>
    <mxCell id="1" parent="0"/>
    <mxCell id="2" value="Box" style="rounded=1;fillColor=#d5e8d4;" vertex="1" parent="1">
      <mxGeometry x="100" y="100" width="120" height="60" as="geometry"/>
    </mxCell>
  </root>
</mxGraphModel>
CSV（层级数据）
# label: %name%
# style: rounded=1;whiteSpace=wrap;html=1;
# connect: {"from":"manager","to":"name","invert":true}
# layout: auto
name,manager
CEO,
CTO,CEO
CFO,CEO

重要提示：确保 XML 格式良好

生成 draw.io XML 时，输出必须是格式良好的 XML：

  • 切勿在 XML 注释中使用双连字符（--）。 请使用单连字符或改写（例如，而非）
  • 转义属性值中的特殊字符（&amp;、&lt;、&gt;、&quot;）

脚本用法

脚本 generate_drawio_url.py 位于相对于此 SKILL.md 文件的 scripts/ 子目录中。使用命令行参数执行：

python scripts/generate_drawio_url.py -t mermaid -c "graph TD\n    A --> B"
python scripts/generate_drawio_url.py --type xml --code "<mxGraphModel>...</mxGraphModel>"
python scripts/generate_drawio_url.py -t csv -c "name,manager\nCEO,\nCTO,CEO"

参数：

  • -t, --type：图表类型（必需），可选值：mermaid、xml、csv
  • -c, --code：图表代码内容（必需）

脚本会输出一个 Markdown 链接：[点击查看图表](<URL>)

直接将此 Markdown 链接呈现给用户。

评论

支持 Markdown