skills.rest
virahitvin8
virahitvin8COMMUNITY
Explore all skills by this author →
GitHub

json-canvas

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

2|Updated May 30, 2026
Search Tags:#nodes#obsidian#flowchart#mind map#edges#json canvas#canvas file
One-click install
npx skills add https://github.com/virahitvin8/crafty-gis --skill json-canvas-virahitvin8
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: json-canvas
Source: https://github.com/virahitvin8/crafty-gis/tree/main/GIT_STAR/assignment-generator/antigravity-skills-main/antigravity-skills-main/skills/json-canvas
Command: npx skills add https://github.com/virahitvin8/crafty-gis --skill json-canvas-virahitvin8

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 manually. 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 canvas attributes safely. - Built-in Validation: A checklist ensures unique IDs, valid edge references, correct node types, and parseable JSON. - Use Case: Ask the AI to build a project board canvas with To Do, In Progress, and Done groups, and it produces a valid .canvas file ready to open in Obsidian. ## Quick Start Create a new Obsidian canvas file with a flowchart showing a start node, two process steps, and a decision point connected by labeled arrows.

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, labels, and arrow endpoints for clearer connections.

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, 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 you write \\n instead of \n in JSON strings. Obsidian renders the double-escaped sequence as literal characters, so use a single backslash-n for line breaks in text node content.

What colors can I use in JSON Canvas files?▼

Colors accept either a hex string like #FF0000 or a preset value from 1 to 6, representing red, orange, yellow, green, cyan, and purple. Preset colors are rendered using each application's own brand palette.

Related Skills

Explore More Design & Creative Skills→
JeffallanJeffallan
30

research-intake

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

Community
Advanced
AgriciDanielAgriciDaniel
14.5k

canvas

Create and update Obsidian JSON Canvas boards with nodes, groups, and edges.

Community
Advanced
llm011llm011
9

obsidian

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

Official
Advanced
neverpreparedneverprepared

image-to-diagram

Convert visual diagrams from images into Mermaid or Graphviz code.

Official
Intermediate