json-canvas（JSON画布技能）Skill 是什么？如何下载？

JSON画布技能：让 AI 一句话生成可编辑的 .canvas 可视化画布

核心结论速览

JSON画布技能（英文名 json-canvas，技能ID 12096）让 AI 编程助手直接读懂并写出 .canvas 文件，把"手动拖拽画布"变成"用自然语言描述结构"。
它严格遵循 JSON Canvas Spec 1.0 开放格式，产出的是 nodes + edges 两个数组组成的标准 JSON，Obsidian 等支持该格式的应用可直接打开。
支持四种节点（文本、文件、链接、分组），以及带方向、标签、颜色、端点形状的连线，能表达思维导图、流程图、项目看板、研究资料墙等多种结构。
技能内置了布局规范（坐标、建议尺寸、间距、对齐）与 8 条验证规则，能显著降低"AI 生成的画布一打开就乱成一团"的概率。
对个人开发者、产品经理、研究者来说，它把可视化建模的门槛从"会用画布工具"降到"会描述自己的想法"。

该技能叫什么？如何下载安装 AI 技能提升开发效率？

技能身份信息

中文名：JSON画布技能Skill
英文名：json-canvas
技能ID：12096
格式标准：JSON Canvas Spec 1.0，文件扩展名为 .canvas

它解决什么问题

无限画布类工具（如 Obsidian 的 Canvas）体验很好，但有一个天然摩擦点：画布上的每一个节点、每一条连线，都要靠人手拖拽和点击完成。当你只是想把一段已经想清楚的结构——比如"三层架构图"“五个研究主题及其支撑文献”“一个迭代周期的任务流转”——落到画布上时，手动摆位、对齐、拉线往往比思考本身更耗时。

更麻烦的是，AI 助手过去在这个环节是"半盲"的：它能帮你写 Markdown、写代码，却不知道 .canvas 文件里 nodes 和 edges 应该长什么样，更不知道 fromSide/toSide 该取 top、right、bottom 还是 left。于是它要么拒绝，要么给出一个打不开的 JSON。

JSON画布技能正是补上这块空白：它把 JSON Canvas 的完整数据结构、属性约束、布局建议和验证规则"装进"AI 助手的知识里，让模型输出的 .canvas 文件开箱即用、可直接渲染。

安装思路与步骤

AI 技能（Skill）的本质是一份结构化的技能说明书（通常包含 name、description 与正文规范），被支持 Skills 机制的 AI 编程助手加载后生效。因此安装路径通常是：

确认前置条件：你使用的 AI 编程助手需要支持 Skills / 自定义技能加载机制（例如 Claude Code 一类工具）。同时建议本地已安装 Obsidian 或其它支持 JSON Canvas 的应用，用于打开与预览产物。
获取技能包：从官方技能市场、插件入口或技能仓库获取 json-canvas 技能（技能ID 12096）。具体下载地址、仓库位置与账户要求，以官方说明为准。
放置与启用：按该工具的技能目录约定放入技能包，或在设置面板中启用该技能。具体目录路径与启用命令，以官方说明为准。
验证是否生效：新建一个空白会话，向助手提出一个明确的画布需求，例如"生成一个包含三个文本节点、两条连线的 .canvas 思维导图"。若它输出的 JSON 中含有合法的 nodes 与 edges 数组、每个节点都带 id/type/x/y/width/height，且边的 fromNode、toNode 能对应上真实节点 ID，说明技能已生效。
落地校验：把生成的文件保存为 .canvas 后用 Obsidian 打开；若能正常渲染出节点与连线，则安装链路完全打通。

值得强调的是，这个技能带来的"效率提升"是一次性配置、长期复用的：装好之后，你不再需要向 AI 反复解释格式，只需描述结构。

该技能的主要功能和特点

生成完整的 .canvas 文件：按 {"nodes": [], "edges": []} 的双数组结构产出合法 JSON，符合 JSON Canvas Spec 1.0，可被 Obsidian 及其他兼容应用读取。
覆盖全部四种节点类型：text（含 Markdown 的文本）、file（引用图片、PDF、笔记等附件，支持 subpath 定位到标题或块）、link（外部 URL）、group（把其他节点包起来的视觉容器，可带 label 与背景图）。
精确控制连线语义：边的 fromSide/toSide 可指定 top/right/bottom/left，fromEnd/toEnd 可设为 none 或 arrow，还能加 label 说明关系（如"导致"“支持”“告知”“是/否”），让流程图的分支判断准确表达。
颜色体系双轨支持：既可用十六进制（如 #FF0000），也可用预设 "1" 到 "6"（红、橙、黄、绿、青、紫），后者会沿用宿主应用自己的品牌配色，跨应用更协调。
理解层级（Z-Index）：节点在数组中的位置即层叠顺序，第一个在最底层、最后一个在最上层，配合 group 节点可以做出"先铺背景组、再放任务卡片"的看板效果。
内置布局规范：明确坐标可为负、x 向右递增、y 向下递增、位置指左上角；并给出小/中/大文本、文件预览、链接预览的建议尺寸，以及组内 20–50px 内边距、节点间 50–100px 间距、按 10 或 20 的倍数对齐网格等建议。
自带验证规则：ID 唯一、fromNode/toNode 必须指向存在的节点、各类型必需字段齐全、枚举值合法（type、backgroundStyle、侧边、端点形状、颜色预设）等 8 条检查项，减少"看起来对、打开就崩"的情况。
统一的 ID 生成约定：采用 16 字符小写十六进制（64 位随机值）风格，与 Obsidian 自身生成的 ID 保持一致。

和普通工具比强在哪？ 普通画布工具解决的是"人怎么画"，这个技能解决的是"机器怎么画对"。它把格式合法性、布局合理性和语义表达打包进了模型的输出约束里，你得到的不只是一堆坐标，而是一份结构正确、可再编辑的工程化文件。

如何使用该技能？

第 1 步：明确你要的"结构"，而不是"画面"

技能处理的是节点与边的关系，因此提示词里要说清三件事：有哪些节点、它们之间怎么连、分不分组。例如：

“帮我创建一个 .canvas 文件：中心是一个文本节点『订单服务重构』，右侧分出三个文本节点『拆分红』『补监控』『灰度发布』，每条边从中心节点右侧连到子节点左侧，并用绿色（预设 4）标注『拆分红』这条边。”

第 2 步：指定节点类型与内容形式

如果内容是 Markdown，就直接说；如果要嵌入本地笔记或图片，说明是 file 节点并给出路径；如果要挂外部资料，用 link 节点。

“把 笔记/会议笔记.md 作为 file 节点挂上去，subpath 指向 #关键洞察。”

第 3 步：让 AI 输出 JSON 并保存为 .canvas

模型会返回形如下面这种结构（节选自技能中的简单画布示例，已简化）：

{
  "nodes": [
    {
      "id": "8a9b0c1d2e3f4a5b",
      "type": "text",
      "x": 0,
      "y": 0,
      "width": 300,
      "height": 150,
      "text": "# 主要想法

这是中心概念。"
    }
  ],
  "edges": []
}

把它保存为 xxx.canvas 文件即可。

第 4 步：按需追加布局与样式指令

看板类：要求"用三个 group 节点分别标注『待办』『进行中』『已完成』，颜色分别用 1/3/4，宽度各 300、高度 500，横向间隔 50px，任务卡片放在组内并留出 20px 内边距"。
流程类：要求"决策节点用黄色（预设 3），是/否两条边分别用绿色和红色并加 label"。
研究类：要求"左侧放文献与链接，中间放研究主题，右侧放图表附件，连线加『支持』『告知』『可视化』等标签"。

第 5 步：验证与微调

打开文件后若发现重叠或连线错位，直接反馈"节点 2 与节点 3 重叠，请把 y 增加 150 并保持网格对齐"，让模型在原有 JSON 上增量修改。技能中的验证规则会帮助它自查 ID 引用与枚举值是否合法。

输出说明：正常情况下你会得到一个包含 nodes 与 edges 两个顶级数组的 JSON 文本，所有节点具备 id、type、x、y、width、height，所有边具备 id、fromNode、toNode；可选字段按你的要求补充。

同类型竞品对比分析

方案名称	定位	核心功能	安装/使用门槛	适用场景	优势与不足
JSON画布技能（json-canvas）	让 AI 直接生成合法 `.canvas` 文件	四种节点、语义化连线、分组容器、颜色与布局规范、8 条验证规则	需支持 Skills 的 AI 助手并完成技能加载；具体安装方式以官方说明为准	用自然语言批量生成思维导图、流程图、看板、资料墙	优势：产出可再编辑的开放格式文件，结构合法性有保障；不足：需要宿主应用才能可视化管理
Obsidian 手动画布	人工拖拽的无限白板	全部可视化编辑能力	安装 Obsidian 即可，零学习成本入口但操作繁琐	边想边画的探索式整理	优势：所见即所得、交互成熟；不足：节点多时摆位对齐极其耗时，难以批量生成
Mermaid / PlantUML 等文本图表	用代码描述图表	流程图、时序图、类图等语法化渲染	需学习专用语法，或在支持渲染的编辑器中预览	技术文档中的标准图表	优势：文本化、易版本管理；不足：受限于固定图类型，无法表达自由布局的无限画布与文件/链接节点
draw.io / Figma 等图形工具	通用可视化绘图	富图形编辑、模板库、导出能力	需安装客户端或使用网页版，学习曲线中等	交付级示意图、UI 稿	优势：视觉表现力强；不足：多为封闭或半封闭格式，AI 难以直接生成结构正确的源文件

从对比可以看出，JSON画布技能的位置很独特：它不追求"更好看的画"，而是把自然语言意图低成本地转成可被工具链消费的结构化画布文件，与 Mermaid 的"语法化"、draw.io 的"图形化"形成互补。

该技能的典型应用场景与实际体验情况

场景一：产品经理把需求口述变成需求地图

产品经理常面对这样的困境：需求评审前脑子里已经有一张"主流程 + 分支异常 + 关联文档"的图，但在画布工具里复刻要花 40 分钟以上。使用该技能时，只需口述模块划分与依赖关系，让 AI 生成 .canvas，再用 Obsidian 打开微调。实际体验：上手难度低，只要能描述清楚层级就能出图；注意事项是——需求越模糊，节点摆位越容易乱，建议先用"分组 + 层级"框定骨架，再补细节。

场景二：研发团队梳理发布流程与故障回滚路径

工程团队需要一张能长期维护的流程图：开始 → 收集数据 → 决策（数据是否有效）→ 处理 / 请求新数据 → 结束。这正是技能示例中覆盖的典型结构，fromSide/toSide 保证连线从节点具体边缘出发，label 标注"是/否"，color 区分正常分支与异常分支。实际体验：效果最好的一类场景，因为流程图的节点与边天然对应数据结构；注意事项是决策分支较多时，要明确要求"分支走向左/右，避免连线交叉"。

场景三：研究者搭建文献—主题—图表的三栏资料墙

研究人员面对一堆 PDF、笔记与网页链接，需要一个空间化的整理视图。可以让 AI 用 file 节点挂载"文献/论文A.pdf"、用带 subpath 的 file 节点指向"笔记/会议笔记.md#关键洞察"、用 link 节点挂外部参考页、用 text 节点放研究主题与关键问题，最后用 group 圈出区域并设置背景图（backgroundStyle 可取 cover、ratio、repeat）。实际体验：资料越多收益越大，因为它省掉的是重复的"新建节点—粘贴路径—拉线"动作；注意事项是路径必须写对，否则节点会显示为无效引用。

场景四：个人用看板管理迭代任务

在 Obsidian 里做轻量看板，需要三个 group 容器加若干任务文本节点。让 AI 一次性生成"待办 / 进行中 / 已完成"三列、每个任务卡片 260×80、组内留 20px 内边距、已完成任务用删除线标注，几分钟即可得到可用看板。实际体验：速度极快，且后续让模型批量"把任务 2 移到已完成列"也很自然；注意事项是频繁增删后画布会越来越松，建议定期要求"重新整理坐标并网格对齐"。

该技能能为用户带来的价值

第一，把可视化建模的时间成本压到接近零。 一张包含十几个节点、若干连线和分组的画布，手动制作往往以"半小时"为单位计算，而描述需求只需几句话。对需要频繁产出结构图的产品、研发、研究岗位来说，这属于高频、可累积的时间节省。

第二，降低工具门槛，而不是降低产出质量。 用户不需要记住 .canvas 里有哪些字段、fromSide 有哪些取值、颜色预设是 1 到 6 还是 0 到 5——这些约束被技能本身吸收。同时因为输出遵循 JSON Canvas Spec 1.0 这一开放格式，产物不是"某个 AI 的黑盒图片"，而是可被再次编辑、可版本管理、可被其他工具解析的结构化数据。

第三，让"结构化思考"更容易被沉淀。 用自然语言生成画布的过程，本身会倒逼你把"有哪些要素、要素之间什么关系"讲清楚。长期看，这比"先画再想"更容易形成可复用的知识资产——尤其是在 Obsidian 这类以本地 Markdown 为核心的知识库里，画布与笔记能够天然互相引用。

第四，减少返工与排错成本。 内置的 8 条验证规则（ID 唯一、引用有效、必需字段齐全、枚举值合法等）把大量"打开才发现打不开"的问题前置拦截，避免了手工排查 JSON 的痛苦。

常见问题 FAQ

Q1：怎么安装这个技能？需要写代码吗？

不需要写代码。你需要在支持 Skills 机制的 AI 编程助手中加载 json-canvas 技能（技能ID 12096），通常是将技能包放入对应的技能目录或在设置中启用。具体的目录路径、启用命令与下载入口，以官方说明为准。安装完成后，建议立即用一个"三节点两连线"的小需求做一次验证。

Q2：生成的 .canvas 文件打不开或显示异常怎么办？

先按技能自带的验证规则逐项自查：所有 id 是否唯一；每条边的 fromNode/toNode 是否指向真实存在的节点 ID；每种节点类型的必需字段（文本节点的 text、文件节点的 file、链接节点的 url）是否齐全；type、backgroundStyle、侧边值、端点形状、颜色预设是否都在合法枚举内。最常见的原因是引用了一个不存在的节点 ID，或把颜色预设写成了 "7" 之类超出 "1"–"6" 的值。

Q3：必须安装 Obsidian 才能用吗？

不是必须，但推荐。技能产出的是遵循 JSON Canvas Spec 1.0 的开放格式文件，任何支持该格式的应用都能打开。由于 Obsidian 是该格式的主要生态应用，用它做预览与二次编辑体验最顺畅。

Q4：这个技能收费吗？

技能本身通常随宿主 AI 工具的订阅或使用策略而定，可能涉及工具侧的调用成本。具体是否收费、如何计费，以官方说明为准，本文不做价格承诺。

Q5：它和 Mermaid、draw.io 应该怎么选？

看你要的是"标准图"还是"自由画布"。需要写进文档、强调语法化和版本对比的流程图、时序图，Mermaid 更合适；需要交付级视觉稿和精细图形控制，draw.io / Figma 更合适；而当你需要一张自由布局、可嵌入本地文件与链接、能被 AI 批量生成并持续微调的无限画布时，json-canvas 技能是最贴合的选择。三者并不互斥，很多团队会同时使用。