Back to Details

canvas

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

JSON Canvas Visualizer

JSON Canvas 可视化工具

Quick Start: Define nodes with 
id
, 
type
, 
x
, 
y
, 
width
, 
height
→ Plan layout on 100px grid → Connect edges with 
fromNode
/
toNode
→ Apply colors (1-6) → Wrap in 
```canvas
fence. Origin (0,0) at top-left, X right, Y down. Obsidian Canvas compatible.
快速入门： 定义包含
id
、
type
、
x
、
y
、
width
、
height
的节点 → 在100px网格上规划布局 → 使用
fromNode
/
toNode
连接边 → 应用颜色（1-6） → 包裹在
```canvas
代码块中。原点(0,0)位于左上角，X轴向右，Y轴向下。兼容Obsidian Canvas。

Critical Syntax Rules

关键语法规则

1. Structure Format

1. 结构格式

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

2. Node Types

2. 节点类型

TypeRequired FieldsPurpose
text
text
Display custom text content
file
file
Reference external files
link
url
External URL references
group
label
Visual container for grouping
类型必填字段用途
text
text
显示自定义文本内容
file
file
引用外部文件
link
url
引用外部URL
group
label
用于分组的可视化容器

3. Required Node Attributes

3. 节点必填属性

All nodes require: 
id
, 
type
, 
x
, 
y
, 
width
, 
height
所有节点均需包含：
id
、
type
、
x
、
y
、
width
、
height

4. Color Presets

4. 颜色预设

ValueColor
"1"
Red
"2"
Orange
"3"
Yellow
"4"
Green
"5"
Cyan
"6"
Purple
值颜色
"1"
红色
"2"
橙色
"3"
黄色
"4"
绿色
"5"
青色
"6"
紫色

5. Edge Connections

5. 边连接

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

6. Coordinate System

6. 坐标系

  • Origin (0,0) at top-left
  • X increases to the right
  • Y increases downward
  • 原点(0,0)位于左上角
  • X轴向右递增
  • Y轴向下递增

7. Node Sizing

7. 节点尺寸设置

  • Consider text content when setting node dimensions
  • Multi-line text requires more height to display all lines
  • Long words require more width to avoid overflow
  • 设置节点尺寸时需考虑文本内容
  • 多行文本需要更大的高度以显示所有行
  • 长单词需要更大的宽度以避免溢出

Common Pitfalls

常见问题与解决方法

IssueSolution
Nodes overlappingIncrease spacing (100+ px)
Edges not visibleVerify 
fromNode
/
toNode
match node IDs
Invalid JSONCheck quotes and commas
IDs invalidUse only a-z, A-Z, 0-9, -, _
问题解决方案
节点重叠增加间距（100px以上）
边不可见验证
fromNode
/
toNode
与节点ID匹配
JSON无效检查引号和逗号
ID无效仅使用a-z、A-Z、0-9、-、_

Output Format

输出格式

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

Related Files

相关文件

For detailed syntax and advanced features, refer to references below:
  • syntax.md — Complete attribute reference: node types, edge properties, group styling, and advanced examples
如需了解详细语法和高级功能，请参考以下资料：
  • syntax.md — 完整属性参考：节点类型、边属性、分组样式及高级示例

Resources

参考资源