如何用 AI 自动创建和编辑 Obsidian 的 JSON Canvas 可视化画布 #

解决手动绘制复杂脑图的低效问题：通过让 AI 掌握 JSON Canvas 规范，直接生成或修改 .canvas 文件，实现从文本描述到可视化画布的快速转换。

为什么需要这个技能 #

在 Obsidian 等支持 JSON Canvas 规范的工具中，可视化画布（Canvas）是通过一个特定的 JSON 文件来描述的。如果需要构建一个包含几十个节点和复杂连线的思维导图或系统架构图，手动拖拽节点和连线非常耗时。

通过这个技能，你可以让 AI 直接操作底层的 JSON 结构。AI 可以快速计算节点坐标、生成唯一 ID 并建立逻辑连接，从而在秒级时间内完成原本需要半小时手动绘制的可视化图表。

适用场景 #

• 快速原型构建：将一段复杂的项目需求描述直接转换为可视化流程图。
• 知识地图自动化：将一系列相关的笔记文件（File Nodes）自动排列并在画布中建立关联。
• 结构化头脑风暴：让 AI 将发散的想法转化为有层级、有分组（Group Nodes）的脑图。
• 动态画布更新：基于现有画布内容，让 AI 增加新节点并自动调整位置以避免重叠。

核心工作流 #

1. 创建新画布 #

AI 首先构建基础结构 {"nodes": [], "edges": []}，为每个节点生成 16 位随机十六进制 ID。根据内容决定节点类型（text、file、link 或 group），并计算 x, y 坐标及 width, height 尺寸。

2. 建立逻辑连接（Edges） #

AI 识别节点间的关系，在 edges 数组中创建对象，通过 fromNode 和 toNode 引用节点 ID。可指定 fromSide（如 right）和 toSide（如 left）来控制连线方向，并添加 label 描述关系。

3. 布局优化与验证 #

• 防重叠：AI 在设置坐标时需保持 50-100px 的间距。
• 层级管理：通过控制 nodes 数组的顺序（后定义的在顶层）来处理分组覆盖关系。
• 一致性检查：验证所有 Edge 引用的 ID 必须在 Nodes 列表中真实存在。

4. 关键 JSON 结构示例 #

{
  "nodes": [
    {
      "id": "6f0ad84f44ce9c17",
      "type": "text",
      "x": 0,
      "y": 0,
      "width": 400,
      "height": 200,
      "text": "# 核心概念\n这是通过 AI 生成的画布节点。"
    }
  ],
  "edges": [
    {
      "id": "0123456789abcdef",
      "fromNode": "6f0ad84f44ce9c17",
      "fromSide": "right",
      "toNode": "another-node-id",
      "toSide": "left",
      "label": "指向"
    }
  ]
}

下载和安装 #

下载 json-canvas 中文版 Skill ZIP

解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体路径参考内附的 USAGE.zh.md。

你可能还需要 #

暂无推荐