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": "Node 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 规范