skills.rest
TrayMachi
TrayMachiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

json-canvas

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Working with Obsidian .canvas files requires precise JSON structure, unique node IDs, and valid edge references; manual editing often produces broken canvases with dangling connections or invalid JSON. ## Core Features & Use Cases - Canvas Creation and Editing: Build .canvas files from scratch or modify existing ones with text, file, link, and group nodes following the JSON Canvas Spec 1.0. - Connection Management: Add edges between nodes with anchor sides, arrow endpoints, labels, and colors while guaranteeing referential integrity. - Validation Workflow: Built-in checklist verifies ID uniqueness, edge reference validity, required fields per node type, and JSON parseability. - Use Case: Ask the assistant to build a project board canvas with To Do, In Progress, and Done groups, then connect task cards with labeled edges, and open the result directly in Obsidian. ## Quick Start Create a new Obsidian canvas file with a central idea node connected to three supporting text nodes and save it as brainstorm.canvas.

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 an Obsidian canvas file?▼

Add an edge object with a unique id, set fromNode and toNode to existing node IDs, and optionally specify fromSide and toSide (top, right, bottom, left) plus a label. Always validate that both referenced node IDs exist in the nodes array.

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 subpaths, 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. Use a single backslash before n in JSON strings so Obsidian renders actual line breaks rather than the literal characters.

What colors can I use in JSON Canvas files?▼

Colors accept either preset string values "1" through "6" (red, orange, yellow, green, cyan, purple) or standard hex strings like "#FF0000". Preset colors are rendered with each application's own brand palette.

Related Skills

Explore More Personal & Entrepreneur Skills→
JeffallanJeffallan
30

research-intake

Organize research materials into a structured knowledge map with gap analysis.

Community
Advanced
songzhuozhusongzhuozhu
118

json-canvas

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

Community
Intermediate
zavorynzavoryn

json-canvas

Create and edit JSON Canvas files with valid node and edge structures.

Community
Intermediate
EmasoftEmasoft

amw-ascii-to-svg

Parses ASCII box-drawing diagrams and routes rendering to diagram sub-skills producing SVG output.

Community
Intermediate