skills.rest
oresttokovenko
oresttokovenkoCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

json-canvas

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

Updated Nov 9, 2023
Search Tags:#obsidian#flowchart#mind map#json canvas#visual notes#canvas file#nodes and edges
One-click install
npx skills add https://github.com/oresttokovenko/dot-files --skill json-canvas-oresttokovenko
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: json-canvas
Source: https://github.com/oresttokovenko/dot-files/tree/main/chezmoi/dot_agents/skills/json-canvas
Command: npx skills add https://github.com/oresttokovenko/dot-files --skill json-canvas-oresttokovenko

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, 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. - Graph Editing: Add nodes, connect them 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 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 add nodes and edges to an existing canvas file?▼

Parse the existing .canvas JSON, generate a new unique ID that does not collide with existing IDs, and append the node with a position that avoids overlapping others. Then add edges referencing valid fromNode and toNode IDs.

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 act as labeled visual containers.

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 version as literal characters, so use a single backslash-n for line breaks in node text.

What are the limitations of JSON Canvas colors?▼

Colors accept either a hex string like #FF0000 or a preset number from 1 to 6. Preset values are intentionally undefined in the spec, so each application maps them to its own brand colors, meaning presets may look different across apps.

Related Skills

Explore More Personal & Entrepreneur Skills→
JeffallanJeffallan
30

research-intake

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

Community
Advanced
iljazimakovsiljazimakovs

canvas

Create, read, and update shapes on a workspace canvas.

Community
Intermediate
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