Content & Media Creation · freestylefly/canghe-skills

json-canvas

Name: json-canvas
Author: freestylefly/canghe-skills

Create and edit JSON Canvas files (.canvas) with nodes, edges, groups, and connections. Use when working with .canvas files, creating visual canvases, mind maps, flowcharts, or when the user mentions Canvas files in Obsidian.

L1 Basic · Source registration onlyV1 Commit-PinnedDual-pass Audit

Author freestyleflyGitHub freestylefly/canghe-skills ↗License MIT（仓库根 LICENSE）Commit dd0bf35595

Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.

1How It Works & Mechanism

Define .canvas as a JSON file containing only two top-level arrays: nodes and edges (both optional).

skills/json-canvas/SKILL.md

- `nodes` (optional): Array of node objects

What is happening here: Establishing the minimal valid skeleton first, under which all subsequent nodes and edges reside.

Nodes are divided into four types: text / file / link / group, each with specific additional fields (text, file+subpath, url, label/background).

skills/json-canvas/SKILL.md

- `group` - Visual container for other nodes

What is happening here: Covering all visual canvas elements via type enumeration to provide clear targets during editing.

Nodes share required properties id/type/x/y/width/height and optional color; array order dictates z-index (bottom to top).

skills/json-canvas/SKILL.md

| `id` | Yes | string | Unique identifier for the node |

What is happening here: Hardcoding geometric and hierarchy rules to ensure generated canvases are rendered correctly by applications.

Edges connect nodes, supporting optional modifiers such as fromSide/toSide/fromEnd/toEnd/color/label.

skills/json-canvas/SKILL.md

| `toEnd` | No | string | `arrow` | Shape at edge end |

What is happening here: Parameterizing all aspects of connections—source, target, sides, arrowheads, and colors.

canvasColor supports hex values or preset numbers "1"-"6", with exact preset values intentionally left undefined.

skills/json-canvas/SKILL.md

Note: Specific color values for presets are intentionally undefined, allowing applications to use their own brand colors.

What is happening here: Allowing color palettes to adapt to the host application's branding while fixing semantic tiers in the spec.

IDs are conventionally 16-character lowercase hexadecimal strings (64-bit random values) and must be globally unique.

skills/json-canvas/SKILL.md

This format is a 16-character lowercase hex string (64-bit random value).

What is happening here: Standardizing the ID generation convention to prevent collisions across nodes and edges.

Provide layout guidelines: coordinates can be negative, y increases downward, recommended size tables, 20-50px padding, and 50-100px node spacing.

skills/json-canvas/SKILL.md

- Space nodes 50-100px apart for readability

What is happening here: Quantifying visual aesthetics into actionable spacing and dimension recommendations.

Include 8 validation rules at the end (unique id, valid references, required fields, valid enum values, etc.) and link to JSON Canvas Spec 1.0.

skills/json-canvas/SKILL.md

1. All `id` values must be unique across nodes and edges

What is happening here: Providing a self-check correctness checklist to minimize the generation of invalid files.

2Core Capabilities

01Create/edit Obsidian-compatible .canvas files

02Generate text nodes (Markdown content)

03File/attachment nodes (including subpath pointing to headings or blocks)

04Link nodes (external URLs)

05Group container nodes (label and background image/style)

06Edge connections: direction, endpoint shapes, colors, labels

07Colors: hex or preset numbers 1-6

08Layout and validation: recommended dimensions, spacing, and 8 validity rules

4Recommended Governance & Evidence

Suggested Controls for Safe Operation

For Agent Runtime

Can be auto-loaded

For Administrators

Evidence & Triggers (File Paths & Excerpts)

SKILL.md: Pure prompt instructions and rule text; contains no script execution or external impacts

Audit Notes: Green: This skill directory contains only a single Markdown instruction file with no script execution, network requests, credential access, or disk-write code. It does not ingest external inputs for execution and consists purely of knowledge/specification orchestration. Rated Green according to standard tiering criteria.

5Second-Pass Verification

[ok] 是否存在可执行脚本 — 目录清单仅 SKILL.md；扫描「执行外部程序」0 命中。
[ok] URL 命中性质 — §3 5 条 URL 均为规范链接（jsoncanvas.org/github.com/obsidianmd）或示例值（obsidian.md/example.com），非运行期请求。
[ok] 凭证/环境变量 — 0 命中，正文无 env/keychain 读取。
[ok] 写盘 — 0 命中；skill 只描述生成 JSON 内容，实际落盘由宿主完成。
[ok] 能力声明与内容相符 — description 声称创建/编辑 .canvas，正文含完整节点/边/示例/校验，无夸大。
[ok] 规范引用可定位 — 结尾 References 与开头 Overview 均指向 JSON Canvas Spec 1.0，口径一致。

6Verdict & Scenarios

Built around the open JSON Canvas Spec 1.0, offering a complete format definition compatible with Obsidian and other applications.

Self-contained documentation: includes property tables, complete examples, and validation rules, allowing agents to generate valid files directly.

Zero execution surface and zero dependencies; purely knowledge-based skill with a completely clean security profile.

Best for: Users and agents needing to generate mind maps, flowcharts, or visual canvases for Obsidian or applications supporting JSON Canvas.

Not for: Scenarios requiring runtime validation/rendering of .canvas, or those using other canvas formats.

Install Agent-Ready

① Verified Mirror 2026-10-10

Option A · Direct DownloadDownload json-canvas.tar.gz

sha256: c5f293ab4ece925e…

Option B · Copy Guide for Agent

install.json

Agents automatically download and verify mirrors from this JSON guide.

② Upstream GitHub

GitHub Repo ↗

Pinned to commit dd0bf35595.