AI 一键生成 Obsidian 高颜值白板脑图！

← Back to all posts

1- AI 一键生成 Obsidian 高颜值白板脑图

🎯 本文要点：

  • 如何使用 Obsidian Canvas + AI 快速生成高颜值脑图
  • 掌握 AI 与日常工具协作的思维模式
  • Canvas 的隐藏优势：JSON 结构的妙用
  • 实用的 AI 提示词技巧

1.1- 引言

“这个酷炫的脑图/白板是怎么做的？” 最近我的评论区，总有朋友疯狂问这个问题。

其实，它并不是专业的脑图工具，而是我用 Obsidian 的 Canvas 功能，配合 AI 快速实现的。

📺 观看完整视频教程：点击观看 YouTube 视频

这期内容，我不只教你如何用 Obsidian Canvas + AI 这个 " 术 "，快速做出清晰、美观、专业的脑图和白板。更重要的，是通过这个实操案例，带你掌握一种能广泛应用的 『AI 与日常工具协作的思维模式』。

掌握了这种思维模式，你就不会被某个特定工具或技巧困住。无论将来出现什么新工具，面对什么样的新场景，你都能举一反三，灵活高效地解决问题。

俗话说，Show your work，掌握这个技能能更方便地秀出你的能耐。而且，上手十分简单，咱们马上开始。

1.2- Obsidian Canvas 基础介绍

首先，快速帮可能不熟悉的朋友科普一下

Obsidian 是什么，Obsidian Canvas 又是什么？

Obsidian 是一款笔记 APP，它最大的优势是什么？就是他的笔记是以本地文本文件的形式存在你的电脑上的。

那么本地文本文件有什么优势呢？千万别说是安全，我从来 不认为本地会比云端更安全 ，本地文件最大的优势是开放，而开放性是能让各种工具，能够与 AI 紧密协作的一个重要特性。

记得在 Cursor 刚开始火的时候，我就发过一期视频，使用 Cursor 配合 Obsidian 直接编辑 Obsidian 的本地文件，快速形成自己的知识库，哪里还需要什么复杂的插件。这就是得益于 Obsidian 的开放性。

1.3- Canvas 又是什么呢？

它是 Obsidian 笔记软件中的一个就核心插件，本质上是一个无限画布，让你可以自由排列笔记、图片和链接等等，并使用连接线建立他们之间的关系。

1.4- Canvas 的 " 隐藏 " 优势：JSON 结构

Canvas 的功能相对来说比较简陋，但它同样有个巨大优势：它保存的文件，采用了标准、开放的 JSON 结构。

JSON 是什么？你可以把它理解成一种 " 通用数据语言 "，让不同的软件能更容易地读懂和交换信息。如果你还不了解 JSON 结构，我强烈建议你补补课，这是玩好 AI 的必备技能之一，可以看我这 期视频入门 。

标准的 JSON 结构意味着什么呢？这意味着，我们可以让 AI 轻而易举地帮我们生成一个完整的 Canvas 图！

1.5- 让我先给大家简单演示一下 Canvas 的基本操作

  • 双击创建一个 Canvas 内的卡片
  • 拖动一个笔记文件到 Canvas
  • 建立连线并标注
  • 建立分组并设置颜色

1.6- 用 AI 生成 Canvas 草稿

好，现在我们来看看 Canvas 文件到底长什么样。这是一个 DEMO.canvas 文件，你可以用任何文本编辑器打开它，比如记事本，或者我常用的 Cursor。

看到了吗，这就是一个结构清晰的 JSON 格式文本文件，理解了这一点，让 AI 帮我们写这种格式的内容，就变得易如反掌了。

接下来你将看到，AI 如何在不到一分钟的时间里，完成我们手动绘制可能需要半小时甚至更久的工作。我们 Claude 帮我们写一个 Canvas 感受一下

首先，我们找一篇文章，就用我的一篇 AI 快讯，粘贴给 Claude，给它一个简单的提示词：

请根据以下内容生成一个 Obsidian Canvas，使用中文输出：

我们可以看到，Claude 生成的就是一堆 JSON 格式的代码。等待它生成完成。

然后，我们在 Obsidian 中新建一个 Canvas，之后，再用文本编辑器打开这个 Canvas 文件，把 Claude 生成的 JSON Copy Paste 过去

回到 Obsidian，bingo

一个结构完整、内容填充好、初步分好组的脑图瞬间就诞生了！

注意看，AI 不仅帮我们提取了关键信息创建了节点卡片，甚至还理解了它们之间的关系，自动进行了初步的连线和分组！

这就相当于 AI 帮我们完成了至少 80% 的工作量，节省了大量整理信息和初步布局的时间！我们只需要在这个基础上，根据自己的想法，拖动调整一下节点位置，优化一下布局，一个高质量的概念图就高效完成了。是不是非常方便？

除了总结现有文章，头脑风暴更是不在话下，比如，你可以问 AI：“AGI 来临的时代，人类还有哪些优势可言？请头脑风暴广开思路，至少提出 3 个以上的类别 20 条以上的洞见，制作为合适的 Obsidian Canvas 进行展示。”

怎么样，这个效果很棒对吧？接下来我要分享的这个提示词技巧，能让你的 AI 生成的 Canvas 图质量，超越 90% 的普通用户。

1.7- HOW 提示词

你可能注意到了，我给 Claude 的基础提示词其实非常简单：就是 " 请根据以下内容生成一个 Obsidian Canvas，使用中文输出 "

对于能联网、知识库比较新的模型（比如最新的 GPT-4.5、Gemini 2.5 Pro），它们可能已经 " 学习 " 过 Obsidian Canvas 的格式了，所以简单的提示词有时也能得到不错的结果。

比如，我们直接把这个提示词给 Gemini 2.5 Pro 试一下

是不是效果也还能接受？

但是，对于不能上网的模型，它可能会不知道 Obsidian Canvas 的标准格式，怎么办？

聪明的你已经想到了，把 Obsidian Canvas 的标准作为背景信息或参考资料，一起提供给 AI 就好了！

这就是我在用 Claude 生成 Canvas 时用的是 Claude 的项目功能，我已经预先填好了详细的提示词，并把 Obsidian Canvas 的官方 JSON 标准文档内容，喂给了 Claude 作为项目知识库。这样，即使 Claude 本身不知道 Canvas，它也能根据我提供的 " 说明书 " 来生成符合规范的 JSON。

1.8- Obsidian Canvas 的官方 JSON 标准文档在这里

https://jsoncanvas.org/

掌握这个思路非常重要： 当 AI 不知道某个工具的标准格式时，把这个工具的官方文档或格式说明喂给它。 这个方法不仅限于 Canvas，对于任何接受特定格式（比如 JSON、XML、Markdown 等）输入的工具，都可以尝试用类似的方法让 AI 辅助生成内容！

下面，是我为 Claude 优化的、包含详细指令和 Canvas 格式说明的 完整提示词

1.8.1- Claude 项目中使用的提示词

1.8.2- This post is for paying subscribers only

Already have an account? Log in

1.9- 进阶技巧与最佳实践

1.9.1- 配色方案优化

为了让你的脑图更加专业美观，这里分享几个实用的配色技巧：

  • 使用对比色搭配主题色块
  • 重要节点使用暖色系 (红、橙、黄)
  • 次要节点使用冷色系 (蓝、绿、紫)
  • 连接线条建议使用浅灰色，突出内容
  • 背景色选择浅色或白色，提高可读性

1.9.2- 布局优化建议

  • 主题居中，次级节点呈放射状分布
  • 相关内容使用组 (group) 功能集中展示
  • 保持适当留白，避免过于拥挤
  • 连接线尽量避免交叉
  • 重要内容可以适当放大或加粗

💡 高级布局技巧：

  • 使用 "Z 模式 " 排列：遵循人眼自然浏览路径
  • 黄金分割比例：主要内容占据画布约 61.8%
  • 对称性原则：确保视觉平衡
  • 分层渐进：重要程度由内向外递减
  • 使用网格对齐：保持整体整洁有序

1.9.3- AI 提示词进阶

除了基础的生成指令，你还可以让 AI 生成更有创意的脑图：

请根据以下内容生成一个 Obsidian Canvas，要求：
1. 使用清晰的层级结构
2. 加入emoji表情增加趣味性
3. 对重要概念添加简短解释
4. 使用不同的节点形状来区分内容类型
5. 输出中文JSON格式

🎨 创意提示词扩展：

  • 添加 " 以{某种风格}方式展现 "，如科技风、自然风等
  • 指定配色方案，如 " 使用深色系/暖色系 "
  • 要求加入具体图标，如 " 使用箭头/星形等图形 "
  • 设定节点大小关系，体现层级重要性
  • 要求生成特定布局，如 " 环形/树状/网络图 "

1.10- 实战案例展示

1.10.1- 学习笔记可视化

学习笔记示例

提示词参考：

请将以下学习笔记转化为Canvas，要求：
1. 使用树状结构展示知识层级
2. 重点概念使用暖色系标注
3. 添加简短复习要点
4. 使用箭头表示知识流向
5. 每个知识点配上合适emoji

1.10.2- 项目规划图

项目规划示例

时间轴式布局技巧：

  • 使用水平时间轴
  • 关键节点突出显示
  • 依赖关系用虚线表示
  • 完成状态用不同颜色区分
  • 添加进度百分比

1.10.3- 创意头脑风暴

头脑风暴示例

发散思维模板：

  • 中心主题放置正中
  • 第一层用问题引导
  • 第二层展开可能性
  • 第三层细化具体方案
  • 用颜色分类不同创意方向

1.11- Canvas 模板库

为提高效率，建议建立个人模板库，包含：

  1. 📚 学习模板

    • 课程笔记框架
    • 读书笔记结构
    • 知识点关联图

  2. 📊 工作模板

    • 项目规划图
    • 会议记录板
    • 任务追踪表

  3. 🎯 个人成长

    • 目标规划图
    • 习惯追踪板
    • 技能进度图

1.12- 高级自动化流程

🤖 AI + Canvas 自动化建议：

  1. 批量生成

    • 使用脚本批量转换笔记
    • 自动提取关键词生成节点
    • 智能识别关联建立连接

  2. 模板联动

    • 结合 Templater 插件
    • 自动填充日期和标签
    • 联动任务管理系统

  3. 数据可视化

    • 配合 DataView 实现动态更新
    • 自动统计和图表生成
    • 进度和完成度展示

1.13- 实用场景推荐

  1. 知识整理与复习

    • 读书笔记可视化
    • 课程内容梳理
    • 知识体系构建

  2. 项目管理

    • 任务分解与规划
    • 团队职责划分
    • 项目进度追踪

  3. 创意发想

    • 头脑风暴记录
    • 产品功能规划
    • 内容框架设计

1.14- 常见问题解答

Q: Canvas 可以导出成图片吗？
A: 可以，使用快捷键 Ctrl/Cmd + P，搜索 “Export as image” 即可导出。

Q: 如何备份 Canvas 文件？
A: Canvas 文件会自动保存在你的 Obsidian 库中，建议定期备份整个库。

Q: 生成的内容不够准确怎么办？
A: 可以通过调整提示词，或者手动编辑 JSON 来优化内容。

1.15- 总结与展望

通过本文的学习，你已经掌握了：

  1. 使用 AI 快速生成专业脑图的完整流程
  2. Canvas 的基础操作与进阶技巧
  3. AI 提示词的优化方法
  4. 实用的布局和配色建议

记住，工具永远是服务于目标的。无论是 Obsidian Canvas 还是 AI，都只是帮助我们更好地思考和表达的手段。关键是要培养系统性思维，让这些工具真正帮助我们提升工作效率和学习质量。

1.16- 写在最后

如果你觉得这篇文章对你有帮助，欢迎：

  • 在评论区分享你的使用心得
  • 收藏本文以便日后查看
  • 转发给可能需要的朋友

让我们一起探索 AI 时代的效率工具之美！

相关资源：