JSON Canvas Skill 基于 JSON Canvas Spec 1.0，用于创建和编辑 .canvas 文件。
用途
适用于思维导图、看板、流程图、研究画布等场景。资料提到在 Obsidian 中可完美渲染。
文件结构
Canvas 文件包含两个顶层数组：
{ "nodes": [], "edges": [] }
nodes（可选）：画布上的节点数组，按 z-index 升序排列（首元素在最底层）。
edges（可选）：连接节点的边数组。
节点（Nodes）
所有节点共享以下通用属性：
id：必填，string，唯一标识符（16 位小写十六进制）。 type：必填，string，取值为 text / file / link / group。 x：必填，integer，X 坐标（像素，向右为正）。 y：必填，integer，Y 坐标（像素，向下为正）。 width：必填，integer，宽度（像素）。 height：必填，integer，高度（像素）。 color：可选，canvasColor，颜色。
文本节点（text）
存储 Markdown 文本内容。属性 text：必填，string，Markdown 格式纯文本。
示例：
{ "id": "6f0ad84f44ce9c17", "type": "text", "x": 0, "y": 0, "width": 400, "height": 200, "text": "# Hello World\n\nThis is Markdown content." }
文件节点（file）
引用文件或附件（图片、视频、PDF、笔记等）。属性：file（必填，string，系统内文件路径）；subpath（可选，string，子路径标题或块引用，以 # 开头）。
示例：
{ "id": "a1b2c3d4e5f67890", "type": "file", "x": 500, "y": 0, "width": 400, "height": 300, "file": "Attachments/diagram.png" }
链接节点（link）
展示外部 URL。属性 url：必填，string，外部 URL。
示例：
{ "id": "c3d4e5f678901234", "type": "link", "x": 1000, "y": 0, "width": 400, "height": 200, "url": "https://obsidian.md" }
分组节点（group）
可视化容器，用于组织其他节点。属性：label（可选，string，分组标签）；background（可选，string，背景图片路径）；backgroundStyle（可选，string，取值为 cover / ratio / repeat）。
示例：
{ "id": "d4e5f6789012345a", "type": "group", "x": -50, "y": -50, "width": 1000, "height": 600, "label": "Project Overview", "color": "4" }
backgroundStyle 取值：cover（填满整个节点）；ratio（保持图片原始宽高比）；repeat（在 x/y 方向平铺）。
边（Edges）
连接节点的线段。属性：
id：必填，string，唯一标识符。 fromNode：必填，string，起始节点 ID。 fromSide：可选，string，起始边：top / right / bottom / left。 fromEnd：可选，string，默认 none，起点端形：none / arrow。 toNode：必填，string，目标节点 ID。 toSide：可选，string，目标边：top / right / bottom / left。 toEnd：可选，string，默认 arrow，终点端形：none / arrow。 color：可选，canvasColor，线条颜色。 label：可选，string，文字标签。
示例：
{ "id": "f67890123456789a", "fromNode": "6f0ad84f44ce9c17", "fromSide": "right", "toNode": "a1b2c3d4e5f67890", "toSide": "left", "toEnd": "arrow", "label": "leads to" }
颜色（Color）
canvasColor 类型支持两种格式：
HEX 颜色：{ "color": "#FF0000" }
预设颜色："1" 红色、"2" 橙色、"3" 黄色、"4" 绿色、"5" 青色、"6" 紫色。预设色的具体色值由应用自行定义，以适配品牌色。
ID 生成规则
所有 id 必须唯一，建议使用 16 位小写十六进制字符串，例如 "6f0ad84f44ce9c17"。生成方式：64-bit 随机值的十六进制编码。
布局指南
坐标系：坐标可为负数（画布无限延伸）；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；对齐到 10px 或 20px 网格。
校验规则
所有 id 在节点和边中全局唯一；fromNode / toNode 必须引用已存在的节点 ID；每种节点类型的必填字段必须齐全；type 只能是 text / file / link / group；backgroundStyle 只能是 cover / ratio / repeat；fromSide / toSide 只能是 top / right / bottom / left；fromEnd / toEnd 只能是 none / arrow；颜色必须是 "1"–"6" 或有效的 HEX 颜色（如 #FF0000）。
完整示例
资料提供了四类完整示例：思维导图、看板（Kanban）、流程图、研究画布（含文件和链接节点）。示例包含 nodes 与 edges 的 JSON 结构，展示文本节点、分组节点、文件节点、链接节点以及带 label、color、fromSide/toSide 的连线写法。
工具脚本
校验 Canvas 文件：
node scripts/validate.js <file.canvas>
生成 Canvas 模板：
思维导图
node scripts/generate.js --template mindmap --title "My Topic" --items "Idea A,Idea B,Idea C" -o output.canvas
看板
node scripts/generate.js --template kanban --title "Sprint 1" --items "Task A,Task B,Task C" -o board.canvas
流程图
node scripts/generate.js --template flowchart --title "Process" --items "Start,Step 1,Decision,End" -o flow.canvas
参考链接
JSON Canvas Spec 1.0；JSON Canvas GitHub。