小帅 Draw.io 架构图 Skill

npx degit xstongxue/best-skills/skills/drawio-diagram ~/.claude/skills/drawio-diagram

drawio-diagram 是 excalidraw-diagram 的正式版本。输出标准 .drawio XML ——能在 app.diagrams.net、VS Code 扩展、或 Confluence 的 Draw.io 集成里打开。可编辑，不是扁平图。

两种模式

模式	触发
从零生成	”画个架构图”、“可视化这个模型”
风格迁移	提供参考图 + 内容；按参考图的布局、配色、风格生成新图

它对的几件事

• 严格的 XML：标签正确闭合、特殊字符转义、ID 顺序递增
• 标准 mxfile 结构：含 mxGraphModel、root、vertex/edge cells
• 懂机器学习的形状：会画 attention head、conv 层、残差连接、归一化

适合什么场景

• 需要正式架构图的学术论文
• 需要跨文章保持视觉一致性的技术博客
• 反正都要用 Draw.io 的文档需求

风格迁移技巧

如果团队有”内部风格”（特定配色、特定形状词汇），把一张现有图截图丢给 skill + 新内容，它会匹配那个风格。对论文或长报告里多张图保持一致很有用。

搭配使用

• excalidraw-diagram：要手绘感时用那个
• pptgen-drawio：把这些图嵌入演讲稿
• Confluence / Notion：都原生渲染 Draw.io

→ GitHub 安装

用 drawio-diagram 可视化一个 Transformer encoder block：
Input → Embedding → Multi-Head Attention → FFN → LayerNorm → Output。
残差连接用虚线。自上而下分层布局。