JSON Canvas 技能用于创建和编辑 .canvas 文件,主要用于 Obsidian 画布场景,也适用于思维导图、流程图、可视化笔记结构或相互连接的画布。当用户明确提到 JSON Canvas 或 Obsidian Canvas 文件时使用。
文件结构 canvas 文件遵循 JSON Canvas Spec 1.0,包含两个顶层数组:{"nodes": [], "edges": []}。nodes 为可选的节点对象数组,edges 为可选的边对象数组,用于连接节点。
常见工作流
- 新建画布:创建基础结构文件;为每个节点生成唯一的 16 字符十六进制 ID;添加节点时必须包含 id、type、x、y、width、height;添加边时通过 fromNode 与 toNode 引用有效节点 ID;最后解析 JSON 确认有效,并检查所有 fromNode/toNode 均存在于 nodes 数组中。
- 向已有画布添加节点:读取并解析现有文件;生成不与现有节点或边 ID 冲突的唯一 ID;选择避免与现有节点重叠的位置(保留 50-100px 间距);将新节点追加到 nodes;可选地添加连接边;校验 ID 唯一性与边引用完整性。
- 连接两个节点:确定源与目标节点 ID;生成唯一边 ID;设置 fromNode 与 toNode;可选设置 fromSide/toSide(top、right、bottom、left)与 label;将边追加到 edges;校验两端均引用现有节点 ID。
- 编辑已有画布:解析文件;按 id 定位目标节点或边;修改属性(文本、位置、颜色等);写回文件;重新校验 ID 唯一性与边引用完整性。
节点 节点是画布上的对象,数组顺序决定 z-index:第一个节点在最底层,最后一个在最上层。通用属性包括:id(必需,唯一 16 字符十六进制)、type(必需,text/file/link/group)、x、y(必需,像素坐标)、width、height(必需,像素)、color(可选,预设 "1"-"6" 或十六进制)。 文本节点额外要求 text(必需,支持 Markdown 的纯文本)。注意换行陷阱:JSON 字符串中用 \n 换行,不要用字面 \n,否则 Obsidian 会渲染成字符 \ 和 n。 文件节点额外要求 file(必需,系统内文件路径),可选 subpath(指向标题或块,以 # 开头)。 链接节点额外要求 url(必需,外部 URL)。 分组节点是组织其他节点的视觉容器,可选 label、background(背景图路径)、backgroundStyle(cover、ratio 或 repeat)。子节点应置于分组边界内。
边 边通过 fromNode 与 toNode 的 ID 连接节点。属性包括:id(必需)、fromNode(必需)、fromSide(可选,top/right/bottom/left)、fromEnd(可选,默认 none,可选 none 或 arrow)、toNode(必需)、toSide(可选)、toEnd(可选,默认 arrow)、color(可选)、label(可选)。
颜色 canvasColor 接受十六进制字符串或预设编号:"1" 红、"2" 橙、"3" 黄、"4" 绿、"5" 青、"6" 紫。预设颜色的具体值有意不定义,由各应用使用自己的品牌色。
ID 生成 生成 16 字符小写十六进制字符串(64 位随机值),例如 "6f0ad84f44ce9c17"、"a3b2c1d0e9f8a7b6"。
布局建议 坐标可为负(画布无限延伸);x 向右增大,y 向下增大,位置为左上角;节点间距 50-100px,分组内边距 20-50px;对齐网格(10 或 20 的倍数)更整洁。尺寸建议:小文本 200-300 x 80-150;中等文本 300-450 x 150-300;大文本 400-600 x 300-500;文件预览 300-500 x 200-400;链接预览 250-400 x 100-200。
校验清单 创建或编辑后需确认:所有 id 在 nodes 与 edges 中唯一;每个 fromNode/toNode 引用现有节点 ID;各节点类型必填字段齐全(text 节点需 text,file 节点需 file,link 节点需 url);type 属于 text/file/link/group;fromSide/toSide 属于 top/right/bottom/left;fromEnd/toEnd 属于 none/arrow;颜色预设为 "1"-"6" 或合法十六进制;JSON 有效可解析。若校验失败,检查重复 ID、悬空边引用或格式错误的 JSON 字符串(尤其是未转义的换行)。
限制 仅在任务与上述范围明确匹配时使用本技能;不要将输出视为环境特定验证、测试或专家审查的替代;若缺少必需输入、权限、安全边界或成功标准,应停止并请求澄清。完整示例(思维导图、项目看板、研究画布、流程图)见 references/EXAMPLES.md,参考 JSON Canvas Spec 1.0 与 JSON Canvas GitHub。