skills.rest
aokazaki-olp
aokazaki-olpCOMMUNITY
Explore all skills by this author →
GitHub

json-canvas

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

Updated May 17, 2026
Search Tags:#obsidian#flowchart#mind map#visual organization#json canvas#canvas file#nodes and edges
One-click install
npx skills add https://github.com/aokazaki-olp/electron-prototype --skill json-canvas-aokazaki-olp
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: json-canvas
Source: https://github.com/aokazaki-olp/electron-prototype/tree/main/.agents/skills/json-canvas
Command: npx skills add https://github.com/aokazaki-olp/electron-prototype --skill json-canvas-aokazaki-olp

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 manually. This Skill provides the complete JSON Canvas Spec 1.0 schema, workflows, and validation rules to create and edit canvas files correctly. ## Core Features & Use Cases - Canvas Creation and Editing: Build new .canvas files or modify existing ones with text, file, link, and group nodes connected by labeled edges. - Layout and Styling Guidance: Apply positioning rules, spacing guidelines, and preset or hex colors for clean visual organization. - Validation Checklist: Verify ID uniqueness, edge reference integrity, required fields per node type, and JSON validity after every change. - Use Case: A user asks for a project board in Obsidian with To Do, In Progress, and Done columns; the Skill produces a valid .canvas file with three group nodes and task cards positioned inside them. ## Quick Start Create a new Obsidian canvas file called project-board.canvas with three group columns for To Do, In Progress, and Done, each containing two task cards.

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 local files with optional subpaths, link nodes with external URLs, and group nodes that act as labeled visual containers for other nodes.

Why does my canvas file show literal \n characters instead of line breaks?▼

This happens when text content contains an escaped backslash followed by n instead of an actual newline escape. In JSON strings, use a single backslash with n for line breaks; a double backslash renders as the literal characters backslash and n in Obsidian.

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. Presets map to red, orange, yellow, green, cyan, and purple, with exact shades determined by the application's own brand colors.

Related Skills

Explore More Product & Management Skills→
D0miHD0miH

merge_projects

...

Community
Advanced
Estudio-Site-LtdaEstudio-Site-Ltda

Canva

Generate and edit educational visual content in Canva via its MCP.

Official
Intermediate
stericisherestericishere

json-canvas

Create and edit JSON Canvas files (.canvas) with nodes and edges per Spec 1.0.

Community
Basic
neverpreparedneverprepared

image-to-diagram

Convert visual diagrams from images into Mermaid or Graphviz code.

Official
Intermediate