把长文变成 Obsidian 思维导图画布axton-obsidian-visual-skills Canvas 技能完整实战指南【免费下载链接】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读完一篇长文往往只记得标题。axton-obsidian-visual-skills是一个开源的 Claude Code 技能包能直接调用 AI 把文本内容生成 Obsidian 的可视化资产Canvas 思维导图画布、Excalidraw 手绘图和 Mermaid 流程图。其中的 Canvas 技能可以把一篇长文一句话转成带彩色分组、带标签连线的交互式.canvas画布直接在 Obsidian 中打开无需额外插件。本文带你完整走一遍安装 → 使用 → 理解原理 → 调优出图。上图就是 Canvas 技能的输出示例把「MAPS 四维框架」长文转成中心主题 四组彩色卡片的思维导图画布每个分组带独立背景色和标签。 axton-obsidian-visual-skills 是什么Skills 是 Claude Code 的提示词扩展与需要复杂配置的 MCP 服务器不同每个技能只是一组 Markdown 文件Claude 会按需加载。这套技能包共含 3 个技能技能输出格式风格典型场景Obsidian Canvas Creator.canvas文件彩色卡片、可交互长文整理、知识组织、项目规划Excalidraw Diagram Generator.md/.excalidraw手绘风格流程图、概念图、动画Mermaid VisualizerMermaid 代码专业流程图文档配图、演示、时序图中文版说明见 README_CN.md。为什么长文整理首选 Canvas 技能零插件成本Obsidian 自带 Canvas 功能生成的画布双击即开可再编辑节点可以拖动、拆分、重连二次加工比静态图片灵活支持分组与颜色编码天然适合把长文的章节 → 小节 → 要点变成空间布局准备工作3 步完成安装前置要求已安装 Claude Code CLI已安装 ObsidianCanvas 技能无需额外插件方式 A插件市场安装推荐/plugin marketplace add axtonliu/axton-obsidian-visual-skills /plugin install obsidian-visual-skills安装后重启 Claude Code 即可加载技能。方式 B手动安装git clone https://gitcode.com/gh_mirrors/ax/axton-obsidian-visual-skills cp -r obsidian-canvas-creator ~/.claude/skills/按需只复制单个技能即可如需全部三件套把excalidraw-diagram和mermaid-visualizer也一并复制到~/.claude/skills/。⚡ 一句话生成 Canvas 思维导图技能装好后会自动生效。对话中包含触发词Canvas、思维导图、mind map、visual diagram即可唤起。常用指令示例“把这篇文章转换成 Obsidian Canvas”“把这篇文章整理成 Canvas 思维导图”“Create a mind map canvas for project planning”三个输入技巧出图质量更高直接贴原文或指明本地 md 文件路径让技能拿到完整结构指定布局层次清晰的长文说“用思维导图布局”话题交叉多的内容说“用自由布局”点明重点追加一句“重点突出结论和关键数据”技能会相应强化颜色和节点权重输出是一个合法的 JSON Canvas 文件放进 Vault 即可打开编辑。MindMap 还是 Freeform两种布局怎么选模式结构适用场景MindMap 思维导图从中心向外放射的层级头脑风暴、有清晰结构的长文、主题探索Freeform 自由布局自定义位置、灵活连接复杂网络、非层级内容、跨章节交叉引用 长文是怎么变成画布的6 步工作流完整逻辑定义在 obsidian-canvas-creator/SKILL.md核心流程如下分析内容识别主话题与层级关系抽取关键论点确定布局根据内容结构判断 MindMap 或 Freeform规划结构根节点 → 一级分支 → 次级分支 → 细节叶子生成画布每个节点分配唯一 ID按文本长度智能调整节点尺寸短文本 220×100px长文本最大 320×180px应用布局算法放射状分布 间距控制水平最小 320px、垂直最小 200px自动防重叠校验并输出检查 ID 唯一性、连线有效性、节点不重叠后直接输出可导入的 JSON详细的坐标与碰撞检测算法可查阅 references/layout-algorithms.md文件格式定义见 references/canvas-spec.md。 让画布更美观的 5 个技巧节点文字保持精简每个节点尽量 2 行以内长段落改用笔记文件节点挂载避免画布文字墙用颜色承载语义6 种预设色各有分工——红色警告、橙色行动项、黄色疑问、绿色已完成、青色信息、紫色概念善用分组Freeform 模式下相关节点自动归入带标签的彩色分组框一眼看清区块边界连线宁少勿滥给关键连线加标签如指导、约束比密集连线更能说明关系生成后先在 Obsidian 里过一遍确认无重叠、层级清晰后再归档想参考现成结构可以直接打开模板画布学习布局template-mindmap-simple.canvas、template-freeform-grouped.canvas。 常见问题与避坑现象原因与解决JSON 解析报错中文引号转义问题技能会自动转换为『』/「」手动改画布时注意保留节点重叠间距未达最小要求320px/200px重新生成即可画布过于拥挤先压缩文章只保留主标题与关键小节输出质量不稳定项目标注为实验性原型结果受模型版本与输入结构影响属正常现象更多排障内容见 README.md 的 Troubleshooting 部分。 技能文件速查技能主定义obsidian-canvas-creator/SKILL.md画布格式规范obsidian-canvas-creator/references/canvas-spec.md布局算法详解obsidian-canvas-creator/references/layout-algorithms.md手绘图技能excalidraw-diagram/SKILL.mdMermaid 技能mermaid-visualizer/SKILL.md小结把长文变成 Obsidian 思维导图画布只需安装 axton-obsidian-visual-skills对 Claude Code 说一句“把这篇文章整理成 Canvas 思维导图”剩下的结构分析、布局计算、配色与连线全部自动完成。建议从一篇自己最熟悉的长文开始试起感受文字 → 画布的效率提升。【免费下载链接】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），仅供参考