2026 AI 图表 skill：mermaid / drawio / excalidraw 三选一指南

架构图、ML 模型可视化、业务流程图——以前在 Visio 里要花几小时， Figma 里 30 分钟。Claude skill 生态有三个 skill 从不同角度切同一个问题：把自然语言或结构化输入变成可继续编辑的真图文件。

这篇横评对比它们，告诉你什么场景选哪个。

三个候选

Skill	输出格式	调性	在哪里编辑	安装
mermaid-tools	`.png`	整齐、技术感	GitHub / 博客	`npx degit daymade/claude-code-skills/mermaid-tools`
drawio-diagram	`.drawio` XML	正式、懂 ML	app.diagrams.net	`npx degit xstongxue/best-skills/skills/drawio-diagram`
excalidraw-diagram	`.excalidraw` JSON	手绘风	Excalidraw / Obsidian / VSCode	`npx degit xstongxue/best-skills/skills/excalidraw-diagram`

mermaid-tools — Markdown 优先工作流

mermaid-tools 是三者里最小的一个。它从 Markdown 里抽 ```mermaid 块，每个渲染成高分辨率 PNG，文件名沿用图标题。

为什么需要单独渲染？GitHub 原生渲染 Mermaid，但其他平台（Medium、Substack、微信公众号、导出的 PDF）都不渲染。内容要发到 GitHub 之外的地方，就需要 PNG。

什么时候用 mermaid-tools：

你已经在 Markdown 里写 Mermaid。
发布平台不渲染 Mermaid。
想要 2x 或 3x retina 密度的 PNG，不用自己配 puppeteer。

跟 wechat-article-writer 天然搭配—— 作者写文章，mermaid-tools 把图预渲染成微信编辑器要的格式。

drawio-diagram — 正式文档

drawio-diagram 来自 @xstongxue，生成标准 .drawio XML—— app.diagrams.net、Confluence 的 Draw.io 集成、VS Code 的 Draw.io 扩展都用这个格式。输出完全可编辑，不是扁平图。

两种模式：

从零生成——描述模型架构，得到一份图。skill 懂 ML：知道怎么画 attention head、conv 层、残差连接、归一化层各自的常用形状。
风格迁移——给它一张参考图（比如某篇论文里你喜欢的图）+ 你的内容，它按参考图的视觉风格生成新图。

什么时候用 drawio-diagram：

图需要看起来正式——学术论文、内部架构文档、技术规格书。
AI 第一遍出图后，你会在 Draw.io 里继续修。
跨多张图需要一致的视觉风格（先做第一张迁移风格，后续都跟着）。

excalidraw-diagram — 手绘感

excalidraw-diagram（同样是 xstongxue）是俏皮版本。生成 .excalidraw JSON——Excalidraw 本体、Obsidian 的 Excalidraw 插件、 VSCode 扩展都用这个格式。输出完全可编辑，自带手绘 / 草图美学。

什么时候用 excalidraw-diagram：

调性比正式更重要（非正式团队文档、README 图、研究笔记）。
AI 第一遍后手动迭代——Excalidraw 的草图风格对不完美对齐很宽容。
你在 Obsidian / Logseq / Notion 发布，想让图和笔记调性一致。

30 秒决策

输出要进 Markdown 博客         → mermaid-tools（渲染成 PNG）
输出是正式架构图              → drawio-diagram
输出是草图 / 非正式图          → excalidraw-diagram
出图后继续手动调整            → drawio-diagram 或 excalidraw-diagram
出完不再改                    → mermaid-tools（PNG 终稿）

流水线：ML 论文配图

假设你写一篇 Transformer 变体论文。你需要：

架构总览——高层模型图。用 drawio-diagram 做风格迁移参考某篇论文。输出 .drawio，在 app.diagrams.net 里继续修。
算法流——伪代码相邻的推理路径图。用 mermaid-tools——在 Markdown 草稿里写 Mermaid 语法，编译 PDF 时渲染 PNG。
概念草图——介绍部分的”现有方法的问题”插图。用 excalidraw-diagram——它的手绘感恰好传达 “正在思考”的语气。

这条三 skill 链路覆盖一篇 ML 论文的完整图示词汇。

三者都缺什么

三个都不处理 3D 图。 比如神经网络层的 3D 可视化，需要自定义 Three.js 渲染——目前没有 skill 包装这个。
暂无图转代码 skill。 反向（手画草图 → 图代码）需要 OCR + 结构抽取，当前 skill 没有。
不支持协作编辑图。 三个都是单作者工具。团队图，版本控制源文件。

搭配使用

mermaid-tools + wechat-article-writer：发公众号前预渲染图。
drawio-diagram + pptgen-drawio：演讲稿和架构图都是兼容格式。
excalidraw-diagram + Obsidian：JSON 直接放进库里。

浏览全部图表相关 skill →