skills.rest
allemaar
allemaarCOMMUNITY
Explore all skills by this author →
Website𝕏@allemaarGitHub

json-canvas

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

14|1|Updated Jun 14, 2026
Search Tags:#obsidian#flowchart#mind map#node graph#json canvas#visual notes#canvas file
One-click install
npx skills add https://github.com/allemaar/open-skills --skill json-canvas-allemaar
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: json-canvas
Source: https://github.com/allemaar/open-skills/tree/main/skills/json-canvas
Command: npx skills add https://github.com/allemaar/open-skills --skill json-canvas-allemaar

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building Obsidian .canvas files by hand means writing raw JSON with unique IDs, valid edge references, and correct node schemas, where a single dangling reference or malformed newline breaks the file. This Skill provides the complete JSON Canvas Spec 1.0 structure, validation checklist, and layout guidelines so agents produce valid canvases on the first attempt. ## Core Features & Use Cases - Canvas Creation and Editing: Generate new .canvas files or modify existing ones with text, file, link, and group nodes positioned on an infinite 2D plane. - Edge and Connection Management: Connect nodes with directional edges, anchor sides, arrow endpoints, labels, and preset or hex colors. - Built-in Validation: An 8-point checklist catches duplicate IDs, dangling edge references, missing required fields, and unescaped newlines before the file is written. - Use Case: Ask your agent to build a project board canvas with To Do, In Progress, and Done groups, then open the resulting .canvas file directly in Obsidian. ## Quick Start Create a new Obsidian canvas file that maps out my project architecture as connected text nodes grouped by module.

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 add nodes and edges to an existing .canvas file?▼

Parse the existing JSON, generate a new unique ID that does not collide with existing IDs, and append the node with a position that avoids overlapping others by 50-100px. Then add edges whose fromNode and toNode reference existing node IDs, and re-validate the file.

What node types does JSON Canvas support?▼

JSON Canvas Spec 1.0 supports four node types: text nodes with Markdown content, file nodes referencing vault paths with optional subpath anchors, link nodes with external URLs, and group nodes that act as labeled visual containers for 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 the double-escaped form as literal characters. Use a single backslash-n inside JSON strings for line breaks.

When should I use JSON Canvas instead of Obsidian markdown notes?▼

Use .canvas files for spatial visual layouts like mind maps, flowcharts, and project boards where node positioning and connections matter. Use regular .md notes for linear document content; canvas file nodes can embed those notes by path.

Related Skills

Explore More Personal & Entrepreneur Skills→
llm011llm011
9

obsidian

Manage Obsidian vault notes, metadata, tags, and backlinks while preserving structure.

Official
Advanced
dallaydallay

json-canvas

Edit and generate Obsidian JSON Canvas files with unique 16-character hex IDs.

Official
Intermediate
gwenwindflowergwenwindflower
9

obsidian-markdown

Create and edit Obsidian-flavored Markdown with wikilinks, embeds, and callouts.

Community
Intermediate
GainInsightDevGainInsightDev

af-present-canvas

Presents visual content on the Agentview canvas via markdown, diagrams, and HTML.

Official
Intermediate