让 AI 画图的三个 Skill：Canvas、Excalidraw、Mermaid
三个开源 Skill，让 Claude Code 把一段文字画成图：Canvas Creator 输出 Obsidian Canvas 思维导图或白板；Mermaid Visualizer 输出 Mermaid 流程图、时序图代码块，Obsidian 和 GitHub 都能渲染；Excalidraw Diagram 输出手绘风格图，在 Obsidian 或 excalidraw.com 里打开编辑。全部 MIT 开源，目前是实验性项目。
想画什么图，用哪个
三个 Skill 画出来的图各不相同，按你拿图去做什么来选。
| Skill | 画什么图 | 适合什么场景 | 在哪里打开 |
|---|---|---|---|
| Canvas Creator | Obsidian Canvas（.canvas）文件，支持思维导图与自由布局 |
思考沙盘：结构推演、层级梳理、个人整理 | Obsidian |
| Excalidraw Diagram | 手绘风格图表（流程图、架构图、概念图等） | 表达演示：分享讲解、视频视觉锚点，生成可编辑源文件而非截图 | Obsidian（需 Excalidraw 插件）或 excalidraw.com（三种输出模式以 README 为准） |
| Mermaid Visualizer | Mermaid 流程图、时序图、状态图等代码块 | 工程文档：README、SOP、讲义、技术文档，纯文本便于版本管理 | Obsidian、GitHub 等 Mermaid 渲染器 |
几个触发词（画图、流程图、思维导图）在多个 Skill 里有重叠，如果想要特定格式的图，建议在请求里直接说工具名。
演示视频
《Obsidian 官方开源 Claude Skills 后，我把「可视化三件套」开源了（Canvas/Excalidraw/Mermaid）》（回到Axton 频道，2026-01-11 发布，时长约 5 分 38 秒）。
- 用同一份 MAPS 内容（Axton 的方法论笔记）先跑官方 json-canvas，验证能否生成规范合法的 JSON；
- 用 Canvas Creator 跑两次：一次不指定布局自动生成思维导图，一次指定 Freeform 切换为白板沙盘；
- 用同一份内容继续调用 Excalidraw Diagram 和 Mermaid Visualizer，分别生成手绘风格图与工程流程图。
同一段内容，三种图
以下四张图都来自同一份 MAPS 内容，展示不同 Skill 在不同场景下的实际表现。图是 2026 年 1 月演示时的输出，当前效果以 GitHub 为准。
两种安装方式
需已安装 Claude Code CLI 与 Obsidian（使用 Excalidraw Skill 需安装 Obsidian 的 Excalidraw 插件）。不用 Obsidian 也能用：Mermaid 是通用格式，本身就不依赖 Obsidian；Excalidraw 从 v1.2.0 起也能输出标准格式，很容易改成不依赖 Obsidian 的用法。
方式 A：Plugin Marketplace（推荐）
通过 Claude Code 的插件系统直接安装：
/plugin marketplace add axtonliu/axton-obsidian-visual-skills
/plugin install obsidian-visual-skills安装后重启 Claude Code 即可加载 Skills。
方式 B：手动安装
将 Skill 文件夹复制到 Claude Code 的 skills 目录（可按需只复制单个，复制时请带上整个文件夹，不要遗漏 references 目录）：
# 克隆仓库
git clone https://github.com/axtonliu/axton-obsidian-visual-skills.git
# 复制 skills 到 Claude Code 目录
cp -r axton-obsidian-visual-skills/excalidraw-diagram ~/.claude/skills/
cp -r axton-obsidian-visual-skills/mermaid-visualizer ~/.claude/skills/
cp -r axton-obsidian-visual-skills/obsidian-canvas-creator ~/.claude/skills/复制完成后即可在 Claude Code 中使用。
安装命令与目录结构以 GitHub README 为准。
在 Claude Code 里用自然语言提要求，它会根据你的请求自动调用对应 Skill：
- "创建一个展示 CI/CD 流程的 Excalidraw 流程图"
- "用 Mermaid 图表可视化这个流程"
- "把这篇文章转换成 Obsidian Canvas"
常见失败，先排错
不工作？先看这四个诊断点。
画不出来 / 没反应
多半是输入类型或路径不对。确认文件后缀（.canvas / .md）和路径可读。
修复：检查 Skill 的输入约束，确认文件类型匹配。
结构混乱 / 布局乱
目标不清 + 约束不足。没告诉模型"什么算合格"。
修复：写成可验证要求：节点数、层级、格式。
输出不稳定
缺验证回路。模型没有在输出前自检。
修复：加验证步骤：覆盖要点、格式一致、无遗漏。
Excalidraw 中文不是手写体
图表中的英文为手写体，中文却显示为系统默认字体。Excalifont 仅覆盖拉丁字符，中文手写字体（小赖字体）需从网络动态加载；离线或无法访问 Excalidraw.com 时会退回系统字体。
修复：方案 A（联网），确保网络可正常访问 Excalidraw.com；方案 B（离线），从 GitHub 下载 CJK 字体解压至 Vault 的 Excalidraw/CJK Fonts 目录，在 Excalidraw 插件设置中启用 "Load Chinese fonts from file at startup" 并重启 Obsidian。
更新日志
Skills 的最新版本与完整记录以 GitHub Releases 为准。
延伸
- 想了解为什么做这三个 Skill 以及与官方 json-canvas 的对比细节，可以阅读周刊帖：这套工具是怎么来的：Obsidian 可视化三件套 Skills 完全开源。
- 查看更多开源项目，包括 Smart Illustrator（AI 配图 Skill）：开源项目列表。
- 获取全部讲义、模板与免费资源：免费资源汇总。
周刊讲真正重要的 AI 变化，以及怎么用到真实工作里。
订阅 AI 精英周刊