json-canvas

JSON Canvas 技能

本技能用于创建和编辑符合 JSON Canvas 1.0 规范的 .canvas 文件，实现知识网络的可视化呈现。

---

文件结构

Canvas 文件是标准 JSON，包含两个顶级数组：

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

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

---

节点（Nodes）

四种节点类型：text、file、link、group。

通用属性

属性	必需	类型	说明
id	是	string	唯一标识符（16位小写十六进制）
type	是	string	节点类型
x	是	integer	X 坐标（像素）
y	是	integer	Y 坐标（像素）
width	是	integer	宽度（像素）
height	是	integer	高度（像素）
color	否	string	颜色（预设 "1"-"6" 或 HEX）

文本节点（text）

{
  "id": "6f0ad84f44ce9c17",
  "type": "text",
  "x": 0,
  "y": 0,
  "width": 400,
  "height": 200,
  "text": "# 核心概念\n\n这是 **Markdown** 内容。"
}

换行转义：JSON 字符串中的换行必须写为 \n，不能写字面量 \\n。

文件节点（file）

引用 Vault 内的文件：

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

引用笔记中的特定标题：

{
  "id": "b2c3d4e5f6789012",
  "type": "file",
  "x": 500,
  "y": 400,
  "width": 400,
  "height": 300,
  "file": "wiki/concepts/Transformer.md",
  "subpath": "#核心组件"
}

链接节点（link）

外部 URL：

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

分组节点（group）

视觉容器，用于组织其他节点：

{
  "id": "d4e5f6789012345a",
  "type": "group",
  "x": -50,
  "y": -50,
  "width": 1000,
  "height": 600,
  "label": "项目概览",
  "color": "4"
}

带背景图：

{
  "id": "e5f67890123456ab",
  "type": "group",
  "x": 0,
  "y": 700,
  "width": 800,
  "height": 500,
  "label": "资源",
  "background": "assets/background.png",
  "backgroundStyle": "cover"
}

背景样式：cover（填充）、ratio（保持比例）、repeat（平铺）。

---

边（Edges）

连接节点的线条：

{
  "id": "f67890123456789a",
  "fromNode": "6f0ad84f44ce9c17",
  "toNode": "a1b2c3d4e5f67890"
}

完整属性：

{
  "id": "0123456789abcdef",
  "fromNode": "节点A-ID",
  "fromSide": "right",
  "fromEnd": "none",
  "toNode": "节点B-ID",
  "toSide": "left",
  "toEnd": "arrow",
  "color": "1",
  "label": "导致"
}