skills.rest
AdielMag
AdielMagCOMMUNITY
Explore all skills by this author →
GitHub

json-canvas

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

Updated May 27, 2026
Search Tags:#obsidian#flowchart#mind map#json canvas#canvas file#nodes and edges#visual diagram
One-click install
npx skills add https://github.com/AdielMag/ClashUp --skill json-canvas-adielmag
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: json-canvas
Source: https://github.com/AdielMag/ClashUp/tree/main/.claude/skills/json-canvas
Command: npx skills add https://github.com/AdielMag/ClashUp --skill json-canvas-adielmag

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Working with .canvas files requires precise JSON structure, unique ID generation, and valid edge references, and manual editing often produces broken canvases with dangling connections or malformed JSON. ## Core Features & Use Cases - Canvas Creation and Editing: Build new .canvas files 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 reference integrity. - Validation Workflow: Built-in checklist verifies unique IDs, valid edge references, required fields per node type, and parseable JSON. - Use Case: Ask the assistant to build a project board canvas with To Do, In Progress, and Done groups containing task cards, and receive a valid .canvas file ready to open in Obsidian. ## Quick Start Create a new canvas file with a central idea node connected to three supporting text nodes arranged in a mind map layout.

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, while edges reference nodes via fromNode and toNode.

How to connect two nodes in a .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 verify 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 vault files with optional subpath, link nodes with external URLs, and group nodes acting as labeled visual containers.

Why does my canvas file not open in Obsidian?▼

Common causes are duplicate IDs, edges referencing nonexistent nodes, missing required fields like text or file, or literal \n sequences instead of escaped newlines in text content. Validate the JSON and check every fromNode and toNode against the nodes array.

What colors can I use for canvas nodes and edges?▼

The canvasColor type accepts preset values "1" through "6" (red, orange, yellow, green, cyan, purple) or any hex string like "#FF0000". Preset colors are rendered with each application's own brand palette.

Related Skills

Explore More Design & Creative Skills→
Galaxy-DawnGalaxy-Dawn
5.3k

obsidian-literature-workflow

Organizes project literature reviews into Obsidian paper notes, synthesis notes, and a literature canvas.

Community
Advanced
GainInsightDevGainInsightDev

af-present-canvas

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

Official
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