---

name: json-canvas description: 创建和编辑 JSON Canvas 文件（.canvas），包含节点、边、组和连接。用于处理 .canvas 文件、创建可视化画布、思维导图、流程图，或用户提到 Obsidian 中的 Canvas 文件时使用。 risk: unknown source: "https://github.com/kepano/obsidian-skills" date_added: "2026-03-21"

JSON Canvas 技能

适用场景

• 为 Obsidian 创建或编辑 .canvas 文件时使用。
• 用于思维导图、流程图、可视化笔记结构或连接画布。
• 用户明确提到 JSON Canvas 或 Obsidian Canvas 文件时使用。

文件结构

画布文件（.canvas）包含两个顶层数组，遵循 JSON Canvas Spec 1.0：

{
  "nodes": [],
  "edges": []
}

• nodes（可选）：节点对象数组
• edges（可选）：连接节点的边对象数组

常见工作流

1. 创建新画布

1. 创建一个 .canvas 文件，基础结构为 {"nodes": [], "edges": []}
2. 为每个节点生成唯一的 16 字符十六进制 ID（例如 "6f0ad84f44ce9c17"）
3. 添加包含必填字段的节点：id、type、x、y、width、height
4. 添加通过 fromNode 和 toNode 引用有效节点 ID 的边
5. 验证：解析 JSON 确认有效。验证所有 fromNode/toNode 值存在于节点数组中

2. 向现有画布添加节点

1. 读取并解析现有 .canvas 文件
2. 生成不与现有节点或边 ID 冲突的唯一 ID
3. 选择避免与现有节点重叠的位置（x、y）（留出 50-100px 间距）
4. 将新节点对象追加到 nodes 数组
5. 可选添加连接新节点到现有节点的边
6. 验证：确认所有 ID 唯一且所有边引用解析到现有节点

3. 连接两个节点

1. 确定源节点和目标节点 ID
2. 生成唯一的边 ID
3. 将 fromNode 和 toNode 设置为源和目标 ID
4. 可选设置 fromSide/toSide（top、right、bottom、left）作为锚点
5. 可选设置 label 作为边上的描述文本
6. 将边追加到 edges 数组
7. 验证：确认 fromNode 和 toNode 都引用现有节点 ID

4. 编辑现有画布

1. 将 .canvas 文件作为 JSON 读取并解析
2. 通过 id 定位目标节点或边
3. 修改所需属性（文本、位置、颜色等）
4. 将更新后的 JSON 写回文件
5. 验证：编辑后重新检查所有 ID 唯一性和边引用完整性

节点

节点是放置在画布上的对象。数组顺序决定 z-index：第一个节点 = 底层，最后一个节点 = 顶层。

通用节点属性

| 属性 | 必填 | 类型 | 描述 | |-----------|----------|------|-------------| | id | 是 | string | 唯一的 16 字符十六进制标识符 | | type | 是 | string | text、file、link 或 group | | x | 是 | integer | X 位置（像素） | | y | 是 | integer | Y 位置（像素） | | width | 是 | integer | 宽度（像素） | | height | 是 | integer | 高度（像素） | | color | 否 | canvasColor | 预设 "1"-"6" 或十六进制（例如 "#FF0000"） |

文本节点

| 属性 | 必填 | 类型 | 描述 | |-----------|----------|------|-------------| | text | 是 | string | 支持 Markdown 语法的纯文本 |

{
  "id": "6f0ad84f44ce9c17",
  "type": "text",
  "x": 0,
  "y": 0,
  "width": 400,
  "height": 200,
  "text": "# Hello World\n\nThis is **Markdown** content."
}

换行注意事项：在 JSON 字符串中使用 \n 表示换行。不要使用字面量 \\n -- Obsidian 会将其渲染为字符 \ 和 n。

文件节点

| 属性 | 必填 | 类型 | 描述 | |-----------|----------|------|-------------| | file | 是 | string | 系统内文件路径 | | subpath | 否 | string | 链接到标题或块（以 # 开头） |

{
  "id": "a1b2c3d4e5f67890",
  "type": "file",
  "x": 500,
  "y": 0,
  "width": 400,
  "height": 300,
  "file": "Attachments/diagram.png"
}

链接节点

| 属性 | 必填 | 类型 | 描述 | |-----------|----------|------|-------------| | url | 是 | string | 外部 URL |

{
  "id": "c3d4e5f678901234",
  "type": "link",
  "x": 1000,
  "y": 0,
  "width": 400,
  "height": 200,
  "url": "https://obsidian.md"
}

组节点

组是用于组织其他节点的视觉容器。将子节点放置在组的边界内。

| 属性 | 必填 | 类型 | 描述 | |-----------|----------|------|-------------| | label | 否 | string | 组的文本标签 | | background | 否 | string | 背景图片路径 | | backgroundStyle | 否 | string | cover、ratio 或 repeat |

{
  "id": "d4e5f6789012345a",
  "type": "group",
  "x": -50,
  "y": -50,
  "width": 1000,
  "height": 600,
  "label": "Project Overview",
  "color": "4"
}

边