canvas

JSON Canvas 可视化工具

快速开始： 使用 id、type、x、y、width、height 定义节点 → 在 100px 网格上规划布局 → 使用 fromNode/toNode 连接边 → 应用颜色（1-6）→ 包裹在 ```canvas 围栏中。原点 (0,0) 位于左上角，X 向右，Y 向下。兼容 Obsidian Canvas。

---

关键语法规则

1. 结构格式

{
  "nodes": [
    {"id": "n1", "type": "text", "text": "节点 1", "x": 0, "y": 0, "width": 120, "height": 50}
  ],
  "edges": []
}

2. 节点类型

类型	必填字段	用途
text	text	显示自定义文本内容
file	file	引用外部文件
link	url	外部 URL 引用
group	label	用于分组的视觉容器

3. 必填节点属性

所有节点都需要：id、type、x、y、width、height

4. 颜色预设

值	颜色
"1"	红色
"2"	橙色
"3"	黄色
"4"	绿色
"5"	青色
"6"	紫色

5. 边连接

{
  "id": "e1",
  "fromNode": "n1",
  "fromSide": "right",
  "toNode": "n2",
  "toSide": "left",
  "toEnd": "arrow"
}

6. 坐标系

• 原点 (0,0) 位于左上角
• X 向右增加
• Y 向下增加

7. 节点尺寸

• 设置节点尺寸时考虑文本内容
• 多行文本需要更多高度以显示所有行
• 长单词需要更多宽度以避免溢出

---

常见陷阱

问题	解决方案
节点重叠	增加间距（100+ px）
边不可见	确认 fromNode/toNode 与节点 ID 匹配
JSON 无效	检查引号和逗号
ID 无效	仅使用 a-z、A-Z、0-9、-、_

---

输出格式

```canvas
{
  "nodes": [...],
  "edges": [...]
}
```

---

相关文件

有关详细语法和高级功能，请参考以下资料：

• syntax.md — 完整属性参考：节点类型、边属性、分组样式和高级示例

资源

• JSON Canvas 规范