skills.rest
Grupo-6-ADS-B
Grupo-6-ADS-BOFFICIAL
Explore all skills by this author →
GitHub

json-canvas

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

2|Updated Aug 15, 2025
Search Tags:#obsidian#flowchart#mind map#json canvas#visual notes#canvas file#nodes and edges
One-click install
npx skills add https://github.com/Grupo-6-ADS-B/FittNutri --skill json-canvas-grupo-6-ads-b
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: json-canvas
Source: https://github.com/Grupo-6-ADS-B/FittNutri/tree/main/.claude/skills/obsidian/json-canvas
Command: npx skills add https://github.com/Grupo-6-ADS-B/FittNutri --skill json-canvas-grupo-6-ads-b

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 canvases while preserving ID uniqueness and reference integrity. - Validation: Built-in checklist covering ID uniqueness, edge reference resolution, required fields per node type, and JSON validity. - Use Case: Ask the AI to build a project board canvas with To Do, In Progress, and Done groups, or a flowchart with decision branches, and receive a valid .canvas file ready to open in Obsidian. ## Quick Start Create a new Obsidian canvas file with a mind map containing one 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 containing a JSON object with 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 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 and 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 vault files with optional subpaths, link nodes with external URLs, and group nodes that visually contain other nodes.

Why does my canvas file show literal backslash-n instead of line breaks?▼

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 in text nodes.

What colors can I use in JSON Canvas nodes and edges?▼

The canvasColor type accepts either a hex string like "#FF0000" or a preset number 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 Personal & Entrepreneur Skills→
JeffallanJeffallan
30

research-intake

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

Community
Advanced
wyhlovecppwyhlovecpp

obsidian-canvas-creator

Convert structured text into interactive Obsidian Canvas mind maps.

Community
Intermediate
CarbeneAICarbeneAI
9

Obsidian

Create and edit Obsidian Markdown, Bases, and JSON Canvas files.

Community
Intermediate
cassm199-mitacassm199-mita

excalidraw

Generate hand-drawn style diagrams and sketches in Excalidraw JSON format.

Community
Basic