skills.rest
caitengwei
caitengweiCOMMUNITY
Explore all skills by this author →
GitHub

json-canvas

Create and edit JSON Canvas diagrams for Obsidian with valid nodes and edges.

6|Updated Mar 21, 2026
Search Tags:#data validation#obsidian#flowchart#diagramming#mind map#json canvas#nodes edges
One-click install
npx skills add https://github.com/caitengwei/my-skills --skill json-canvas-caitengwei
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: json-canvas
Source: https://github.com/caitengwei/my-skills/tree/main/obsidian-skills/skills/json-canvas
Command: npx skills add https://github.com/caitengwei/my-skills --skill json-canvas-caitengwei

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you create and maintain Obsidian JSON Canvas (.canvas) files without manually wrestling with the underlying node/edge JSON structure.

Core Features & Use Cases

  • Create JSON Canvas files using the required nodes and edges structure (JSON Canvas Spec 1.0).
  • Manage nodes and edges by generating unique IDs, placing nodes with x/y/width/height, and wiring relationships via fromNode/toNode.
  • Support common canvas layouts like mind maps, flowcharts, and project boards by using node type (text/file/link/group) and validation rules.

Quick Start

Ask me to generate a valid .canvas JSON for a simple flowchart with three text nodes and two connected edges, placed at sensible coordinates, using unique 16-character hex IDs.

Frequently Asked Questions about json-canvas

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create an Obsidian JSON Canvas file without manually editing JSON?▼

Obsidian JSON Canvas files require a specific structure of nodes and edges with unique 16-character hex IDs and x/y coordinates. This Skill generates that valid JSON Canvas spec structure for you, avoiding manual editing errors.

What types of diagrams can I build using JSON Canvas nodes and edges?▼

Using JSON Canvas nodes and edges, you can build mind maps, flowcharts, project boards, and research canvases. Nodes support text, files, links, and grouped layouts, while edges wire relationships between them via fromNode and toNode references.

How does JSON Canvas validation work for node IDs and edge references?▼

JSON Canvas validation requires unique 16-character hex IDs for every node and resolvable edge references via fromNode and toNode fields. The generated JSON satisfies these constraints to ensure the .canvas file loads correctly in Obsidian.

Can I use JSON Canvas to build project boards with linked files and text nodes?▼

Yes, JSON Canvas supports project boards by combining text, file, and link node types within grouped layouts. You can place nodes at specific coordinates and wire them together with edges to visualize project workflows.

What are the limitations of generating JSON Canvas files programmatically?▼

Generated JSON Canvas files are limited to the JSON Canvas spec 1.0 structure, meaning they contain only nodes, edges, coordinates, and IDs. Visual rendering and interactive editing still require the Obsidian application itself.

Related Skills

Explore More Design & Creative Skills→
MarsWang42MarsWang42
964

json-canvas

Create and edit JSON Canvas files with nodes, edges, and groups.

Community
Intermediate
tc9011tc9011

json-canvas

Create and edit JSON Canvas files with nodes, edges, and groups.

Community
Intermediate
vut08905vut08905

obsidian

Automate Obsidian vault discovery, note creation, and link updates via obsidian-cli.

Community
Intermediate
hviwenhviwen

json-canvas

Generate and manipulate JSON Canvas files with nodes and edges.

Community
Intermediate