JSON画布技能Skill json-canvas

---

name: json-canvas description: 创建和编辑JSON画布文件（.canvas），包含节点、边、组和连接。适用于处理.canvas文件、创建视觉画布、思维导图、流程图，或当用户提到Obsidian中的Canvas文件时使用。

JSON画布技能

此技能使技能兼容代理能够创建和编辑有效的JSON画布文件（.canvas），用于Obsidian和其他应用程序。

概述

JSON画布是一种用于无限画布数据的开放文件格式。画布文件使用.canvas扩展名，并包含遵循JSON画布规范1.0的有效JSON。

文件结构

画布文件包含两个顶层数组：

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

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

节点

节点是放置在画布上的对象。有四种节点类型：

• text - 包含Markdown的文本内容
• file - 引用文件/附件
• link - 外部URL
• group - 其他节点的视觉容器

Z轴顺序

节点按z轴顺序在数组中排序：

• 第一个节点 = 底层（显示在其他节点下方）
• 最后一个节点 = 顶层（显示在其他节点上方）

通用节点属性

所有节点共享这些属性：

属性	必需	类型	描述
id	是	string	节点的唯一标识符
type	是	string	节点类型：text、file、link或group
x	是	integer	X位置（像素）
y	是	integer	Y位置（像素）
width	是	integer	宽度（像素）
height	是	integer	高度（像素）
color	否	canvasColor	节点颜色（见颜色部分）

文本节点

文本节点包含Markdown内容。

{
  "id": "6f0ad84f44ce9c17",
  "type": "text",
  "x": 0,
  "y": 0,
  "width": 400,
  "height": 200,
  "text": "# 你好世界

这是**Markdown**内容。"
}

属性	必需	类型	描述
text	是	string	带有Markdown语法的纯文本

文件节点

文件节点引用文件或附件（图像、视频、PDF、笔记等）。

{
  "id": "a1b2c3d4e5f67890",
  "type": "file",
  "x": 500,
  "y": 0,
  "width": 400,
  "height": 300,
  "file": "附件/图表.png"
}

{
  "id": "b2c3d4e5f6789012",
  "type": "file",
  "x": 500,
  "y": 400,
  "width": 400,
  "height": 300,
  "file": "笔记/项目概述.md",
  "subpath": "#实施"
}

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

链接节点

链接节点显示外部URL。

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

属性	必需	类型	描述
url	是	string	外部URL

组节点

组节点是用于组织其他节点的视觉容器。

{
  "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": "附件/背景.png",
  "backgroundStyle": "cover"
}

属性	必需	类型	描述
label	否	string	组的文本标签
background	否	string	背景图像路径
backgroundStyle	否	string	背景渲染样式

背景样式

值	描述
cover	填充节点的整个宽度和高度
ratio	保持背景图像的纵横比
repeat	在两个方向重复图像作为图案

边

边是连接节点的线。

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

{
  "id": "0123456789abcdef",
  "fromNode": "6f0ad84f44ce9c17",
  "fromSide": "right",
  "fromEnd": "none",
  "toNode": "b2c3d4e5f6789012",
  "toSide": "left",
  "toEnd": "arrow",
  "color": "1",
  "label": "导致"
}

属性	必需	类型	默认	描述
id	是	string	-	边的唯一标识符
fromNode	是	string	-	连接开始的节点ID
fromSide	否	string	-	边开始的边
fromEnd	否	string	none	边起点的形状
toNode	是	string	-	连接结束的节点ID
toSide	否	string	-	边结束的边
toEnd	否	string	arrow	边终点的形状
color	否	canvasColor	-	线条颜色
label	否	string	-	边的文本标签

边值

值	描述
top	节点的顶边
right	节点的右边
bottom	节点的底边
left	节点的左边

终点形状

值	描述
none	无终点形状
arrow	箭头终点

颜色

canvasColor类型可以通过两种方式指定：

十六进制颜色

{
  "color": "#FF0000"
}

预设颜色

{
  "color": "1"
}

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

注意：预设的具体颜色值故意未定义，允许应用程序使用自己的品牌颜色。

完整示例

简单画布与文本和连接

（示例内容翻译略，保持JSON结构不变）

项目看板与组

（示例内容翻译略）

研究画布与文件和链接

（示例内容翻译略）

流程图

（示例内容翻译略）

ID生成

节点和边ID必须是唯一字符串。Obsidian生成16字符的十六进制ID：

"id": "6f0ad84f44ce9c17"
"id": "a3b2c1d0e9f8g7h6"
"id": "1234567890abcdef"

此格式是16字符小写十六进制字符串（64位随机值）。

布局指南

定位

• 坐标可以为负（画布无限延伸）
• x向右增加
• y向下增加
• 位置指节点的左上角

推荐尺寸

节点类型	建议宽度	建议高度
小文本	200-300	80-150
中文本	300-450	150-300
大文本	400-600	300-500
文件预览	300-500	200-400
链接预览	250-400	100-200
组	可变	可变

间距

• 在组内留20-50px的内边距
• 为可读性，节点间距50-100px
• 对齐节点到网格（10或20的倍数）以获得更整洁的布局

验证规则

1. 所有id值在节点和边中必须唯一
2. fromNode和toNode必须引用现有的节点ID
3. 每种节点类型必须存在必需字段
4. type必须是：text、file、link、group之一
5. backgroundStyle必须是：cover、ratio、repeat之一
6. fromSide、toSide必须是：top、right、bottom、left之一
7. fromEnd、toEnd必须是：none、arrow之一
8. 颜色预设必须是"1"到"6"或有效的十六进制颜色

参考

• JSON画布规范1.0
• JSON画布GitHub