skills.rest
miyake-san
miyake-sanCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

json-canvas

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

Updated Aug 28, 2026
Search Tags:#obsidian#flowchart#canvas#mind map#diagram#json canvas#visual notes
One-click install
npx skills add https://github.com/miyake-san/sogo-agent-platform --skill json-canvas-miyake-san
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: json-canvas
Source: https://github.com/miyake-san/sogo-agent-platform/tree/main/skills/experimental/obsidian-json-canvas
Command: npx skills add https://github.com/miyake-san/sogo-agent-platform --skill json-canvas-miyake-san

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 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 JSON validity. - Use Case: Ask the assistant to build a project board canvas with To Do, In Progress, and Done groups, and it produces a valid .canvas file with positioned group nodes, task cards, and correct color presets. ## Quick Start Create a new Obsidian canvas file showing a flowchart with a start node, two process steps, and a decision branch.

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 with a unique id, set fromNode and toNode to existing node IDs, and optionally set fromSide/toSide (top, right, bottom, left) and a label. Always validate that 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 that visually contain 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. Use \n for line breaks inside JSON strings so Obsidian renders actual line breaks rather than the characters backslash and n.

What colors can I use in JSON Canvas files?▼

The canvasColor type accepts either a hex string like "#FF0000" or a preset number from "1" to "6" mapping to red, orange, yellow, green, cyan, and purple. Preset colors are rendered with each application's own brand palette.

Related Skills

Explore More Personal & Entrepreneur Skills→
tiankong0101-bytetiankong0101-byte

obsidian

Locates active Obsidian vaults and performs safe note operations on Markdown files.

Community
Intermediate
family3253family3253

kepano-json-canvas

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

Community
Intermediate
enclawedenclawed
2

obsidian

Manage Obsidian vault notes and automate file operations via obsidian-cli.

Community
Intermediate
neverpreparedneverprepared

image-to-diagram

Convert visual diagrams from images into Mermaid or Graphviz code.

Official
Intermediate