skills.rest
cookkie03
cookkie03COMMUNITY
Explore all skills by this author →
GitHub

json-canvas

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

Updated May 10, 2026
Search Tags:#obsidian#flowchart#mind map#visual canvas#json canvas#canvas file#nodes and edges
One-click install
npx skills add https://github.com/cookkie03/skills --skill json-canvas-cookkie03
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: json-canvas
Source: https://github.com/cookkie03/skills/tree/main/json-canvas
Command: npx skills add https://github.com/cookkie03/skills --skill json-canvas-cookkie03

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Working with Obsidian .canvas files requires precise JSON structure, unique ID generation, and valid edge references, which is error-prone when done by hand. This Skill provides the complete JSON Canvas Spec 1.0 knowledge needed to create and edit visual canvases correctly. ## Core Features & Use Cases - Canvas Creation: Generate new .canvas files with text, file, link, and group nodes following the official spec. - Canvas Editing: Add nodes, connect nodes with labeled edges, and modify existing canvases while preserving ID uniqueness and reference integrity. - Validation Guidance: Built-in checklist covering ID uniqueness, edge reference resolution, required fields per node type, and color format rules. - Use Case: Ask for a project board canvas and receive a valid .canvas file with To Do, In Progress, and Done groups containing task cards, ready to open in Obsidian. ## Quick Start Create a .canvas file for a mind map with a central topic node connected to three supporting idea nodes.

Frequently Asked Questions about json-canvas

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

FAQPage Schema
How do I create a JSON Canvas file for Obsidian?▼

Create a .canvas file with a JSON object containing nodes and edges arrays. Each node needs a unique 16-character hex id, a type (text, file, link, or group), and x, y, width, height values. Edges connect nodes via fromNode and toNode IDs.

How to connect two nodes in a .canvas file?▼

Add an edge object to the edges array with a unique id, fromNode set to the source node ID, and toNode set to the target node ID. Optionally set fromSide/toSide (top, right, bottom, left) and a label for the connection.

What node types does JSON Canvas support?▼

JSON Canvas Spec 1.0 supports four node types: text nodes with Markdown content, file nodes referencing local files with optional subpath, link nodes with external URLs, and group nodes that visually contain other nodes.

Why does my canvas text show literal backslash-n characters?▼

This happens when text contains the escaped sequence \\n instead of the JSON newline escape \n. Obsidian renders \\n as literal backslash and n characters, so use single-backslash \n for line breaks in node text.

What colors can I use in JSON Canvas files?▼

The canvasColor type accepts either a hex string like "#FF0000" or a preset number from "1" to "6" mapping to red, orange, yellow, green, cyan, and purple. Preset colors are rendered with each application's own brand palette.

Related Skills

Explore More Product & Management Skills→
pixbpixb

obsidian-canvas-creator

Convert plain text into structured Obsidian Canvas JSON files.

Community
Intermediate
tc9011tc9011

json-canvas

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

Community
Intermediate
ThedouglerThedougler

obsidian-json-canvas

Create and edit Obsidian .canvas files following the JSON Canvas 1.0 specification.

Community
Intermediate
merileymeriley

reviewing-diagrams

Review Mermaid diagrams and Excalidraw conversion code for correctness and best practices.

Community
Intermediate