深度拆解 axton-obsidian-visual-skills：SKILL.md 如何让 Claude 学会画图（触发词、渐进式披露与 references 架构设计）

深度拆解 axton-obsidian-visual-skillsSKILL.md 如何让 Claude 学会画图触发词、渐进式披露与 references 架构设计【免费下载链接】axton-obsidian-visual-skillsVisual Skills Pack for Obsidian: generate Canvas, Excalidraw, and Mermaid diagrams from text with Claude Code项目地址: https://gitcode.com/gh_mirrors/ax/axton-obsidian-visual-skillsaxton-obsidian-visual-skills 是一个 Obsidian 可视化 Skills 包用自然语言一句话让 Claude Code 自动生成 Excalidraw 手绘图、Mermaid 流程图和 Obsidian Canvas 画布文件。整个项目没有一行代码全靠精心设计的 SKILL.md 提示词文件教会模型如何画图。本文将拆解它的三大核心机制——触发词设计、渐进式披露与 references 目录架构。三大技能一图看懂Canvas、Excalidraw 与 Mermaid项目包含三个独立的技能目录每个目录就是一个可独立安装的技能技能输出格式适用场景excalidraw-diagram.md/.excalidraw手绘风格流程图、思维导图、关系图mermaid-visualizerMermaid 代码块流程图、时序图、状态图兼容 Obsidian 与 GitHubobsidian-canvas-creator.canvasJSON思维导图画布、自由布局卡片墙下图是 Excalidraw 技能生成的手绘风格 MAPS 框架图中心节点向外发散色彩分区清晰正是 SKILL.md 中颜色语义化规则的体现机制一触发词设计——让 Claude 知道何时该用我每个 SKILL.md 的开头都有一段 YAML frontmatter其中description字段承担了最关键的角色--- name: excalidraw-diagram description: Generate Excalidraw diagrams from text content. Triggers on Excalidraw, 画图, 流程图, 思维导图, 标准Excalidraw, Excalidraw动画, animate... ---Claude Code 加载技能时只读取这段元数据几十 token据此判断当前对话是否需要这个技能。设计上有三个巧妙之处中英双语触发词画图、流程图与diagram、flowchart并存中英文用户都能命中一词多义映射到不同输出模式在 excalidraw-diagram/SKILL.md 中Excalidraw输出 Obsidian 可打开的.md标准Excalidraw输出 excalidraw.com 可用的.excalidraw动画图则额外写入动画顺序字段——同一技能靠触发词切换三种模式触发词写成表格SKILL.md 内部用触发词 → 输出模式 → 文件格式 → 用途对照表让模型选择无歧义。机制二渐进式披露——SKILL.md 只放决策逻辑直接看 mermaid-visualizer/SKILL.md 的结构就明白渐进式披露是什么意思了。正文只保留五类内容工作流分析内容 → 选图类型 → 选配置 → 生成代码 → 输出决策表6 种图表类型各自何时使用流程图、环形流程、对比图、思维导图、时序图、状态图高频防错规则如 Mermaid 中[1. Perception]会被解析器误判为 Markdown 列表必须写成[1.Perception]或[① Perception]质量检查清单输出前逐项核对一行指向 references 的链接。真正体量大、只有出问题时才需要的细节完整语法表、边界情况、排错指南全部放在 references/syntax-rules.md——一份近 500 行的文档SKILL.md 中只留一句遇到语法错误时再加载它。这种先给地图再按需翻书的设计直接决定了上下文占用SKILL.md 通常 200~500 行references 动辄上千行按需加载让 Claude 每次对话只付出必要 token 成本。机制三references 架构——把说明书分层存放三个技能的 references 目录各自承担明确职责是项目最值得抄作业的架构excalidraw-diagram/ └── references/excalidraw-schema.md # 元素字段、色板、坐标规范 mermaid-visualizer/ └── references/syntax-rules.md # 完整语法参考 错误预防 obsidian-canvas-creator/ └── references/ ├── canvas-spec.md # JSON Canvas 格式规范403 行 └── layout-algorithms.md # 布局算法与碰撞检测614 行以 Canvas 技能为例obsidian-canvas-creator/SKILL.md 正文写死了水平间距 ≥320px、垂直间距 ≥200px这样的硬约束而具体的径向树布局算法、碰撞检测伪代码则放在 layout-algorithms.md 中并明确标注需要复杂布局计算时再加载。excalidraw-schema.md 同理——正文给了最常用元素模板完整字段表留给 references 兜底。给写作者的经验法则SKILL.md 里写做什么、怎么选、别踩什么坑references 里写完整的格式规范、算法与边界情况两者之间用一句加载条件连接。效果验证Canvas 与 Mermaid 输出示例Canvas 技能生成的是可直接拖入 Obsidian 打开的.canvasJSON 文件带颜色分组的思维导图效果如下Mermaid 技能则输出标准代码块兼容 Obsidian 与 GitHub 渲染。下图中 subgraph 分区、虚线反馈回路都遵循了 SKILL.md 中的箭头类型规则快速上手一键安装与调用示例方式一插件市场安装推荐在 Claude Code 中执行/plugin marketplace add axtonliu/axton-obsidian-visual-skills /plugin install obsidian-visual-skills方式二手动复制到技能目录git clone https://gitcode.com/gh_mirrors/ax/axton-obsidian-visual-skills 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/安装后无需任何额外配置直接说人话即可触发用 Excalidraw 画一个 CI/CD 流水线把这个工作流程转成 Mermaid 图表把这篇文章整理成 Canvas 思维导图项目文件清单文件作用README.md / README_CN.md项目说明与中英文档excalidraw-diagram/SKILL.mdExcalidraw 技能主定义含 3 种输出模式mermaid-visualizer/SKILL.mdMermaid 技能主定义含防错规则obsidian-canvas-creator/SKILL.mdCanvas 技能主定义含验证清单assets/三种技能的输出示例图LICENSEMIT 开源协议总结这个项目用纯 Markdown 完成了技能工程化——frontmatter 负责触发、SKILL.md 负责决策、references 负责兜底。如果你想给 Claude Code 写自己的画图技能照这个三层架构组织文件就能避开提示词越写越长、上下文越跑越慢的常见陷阱。【免费下载链接】axton-obsidian-visual-skillsVisual Skills Pack for Obsidian: generate Canvas, Excalidraw, and Mermaid diagrams from text with Claude Code项目地址: https://gitcode.com/gh_mirrors/ax/axton-obsidian-visual-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考