mcpField
D
drawio-diagram

drawio-diagram

github.com/xstongxue设计与 UI3.1k243 次安装7 周前更新
代码仓库

关于 drawio-diagram

指导 Agent 创建标准 Draw.io 图表的 Skill，支持从零绘制，也支持参考图片的风格迁移，并提供 XML 与输出规范。

主要功能

  1. 01从零创建图表
  2. 02迁移参考图风格
  3. 03生成 Draw.io XML
  4. 04应用统一格式规范
  5. 05提供导出与使用说明

适用场景

  1. 01绘制深度学习模型架构
  2. 02创建算法或数据流图
  3. 03按参考图风格重绘内容

安装

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

$npx skills add https://github.com/xstongxue/best-skills --skill drawio-diagram

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

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

reference/
edu-biology.md
edu-chemistry.md
edu-chinese.md
edu-geography.md
edu-history.md
edu-math.md
edu-physics.md
generation.md
style-migration.md
tech-diagram.md
uml-diagram.md

详细介绍

来自项目 README

Draw.io 图表

本 Skill 指导 Agent 生成标准的 Draw.io 格式图表（.drawio 文件），支持两种模式：从零生成（模型架构、算法流程等）与风格迁移（参考图 + 内容 → 按参考图风格生成新图）。

Step 0：任务识别

条件执行
用户提供参考图，且希望「按这张图的风格」画新图执行 reference/style-migration.md
其他情况（从零生成）执行 reference/generation.md

使用时机

从零生成：

  • 用户需要为深度学习模型（如 Transformer、CNN、RNN 等）生成架构图
  • 用户需要绘制算法流程图、数据流图、系统架构图
  • 用户需要可视化特定概念（如感受野、注意力机制、特征提取过程等）
  • 用户提到「画个图」「生成架构图」「可视化模型结构」「绘制流程图」等需求

风格迁移：

  • 用户提供参考图，希望「按这个风格画」「照着这个排版/配色画」

通用规范（两种模式共用）

1. XML 格式严格性
  • ✅ 所有标签必须正确闭合：<mxCell> 对应 </mxCell>，绝不能写成 </mCell>
  • ✅ 使用 vertex="1" 标记节点，edge="1" 标记连线
  • ✅ 每个元素必须有唯一 id，从 0 开始递增
  • ✅ 特殊字符必须转义：& → &amp;，< → &lt;，> → &gt;
2. 标准文件结构
<mxfile host="app.diagrams.net">
  <diagram name="图表名称" id="图表id">
    <mxGraphModel dx="1200" dy="800" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="宽度" pageHeight="高度" background="#F5F5DC">
      <root>
        <mxCell id="0"/>
        <mxCell id="1" parent="0"/>
        <!-- 所有图形元素从 id="2" 开始 -->
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>
3. 常用样式
  • 2D 节点：rounded=1;whiteSpace=wrap;html=1;fillColor=#颜色;strokeColor=#333333;strokeWidth=1;fontSize=11
  • 3D 节点（推荐用于神经网络层）：shape=cube;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;darkOpacity=0.05;darkOpacity2=0.1;size=20;fillColor=#颜色;strokeColor=#333333;strokeWidth=1.5
  • 连线：edgeStyle=orthogonalEdgeStyle;rounded=0;html=1;strokeColor=#000000;strokeWidth=2;endArrow=classic
  • 虚线（残差）：dashed=1
4. 输出要求
  1. 图表说明（2-3 行）
  2. 使用指南：Draw.io 打开、导出 PNG/SVG/PDF、图题与论文引用示例

参考资源

评论

支持 Markdown