skills.rest
tamagusko
tamaguskoCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

json-canvas

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

Updated Oct 7, 2022
Search Tags:#obsidian#flowchart#mind map#json canvas#visual notes#canvas file#nodes and edges
One-click install
npx skills add https://github.com/tamagusko/linux-cfg --skill json-canvas-tamagusko
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: json-canvas
Source: https://github.com/tamagusko/linux-cfg/tree/main/dotfiles/claude/skills/json-canvas
Command: npx skills add https://github.com/tamagusko/linux-cfg --skill json-canvas-tamagusko

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, and hand-editing them 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 Checklist: Verify ID uniqueness, edge reference resolution, required fields per node type, and JSON parseability after every change. - Use Case: Ask the assistant to turn your project notes into a Kanban-style board with To Do, In Progress, and Done groups, or to build a flowchart connecting decision steps with labeled Yes/No edges. ## Quick Start Ask the assistant to create a new .canvas file containing a mind map of your chosen topic with connected text 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 with the base structure containing nodes and edges arrays, then add nodes with unique 16-character hex IDs, type, x, y, width, and height fields. Connect nodes with edges referencing valid fromNode and toNode IDs, then validate the JSON parses correctly.

What node types does JSON Canvas support?▼

JSON Canvas 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 act as labeled visual containers for other nodes.

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

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 inside JSON strings for line breaks.

How do I connect two nodes with an edge in JSON Canvas?▼

Add an edge object with a unique ID, set fromNode and toNode to existing node IDs, and optionally specify fromSide and toSide anchor points such as top, right, bottom, or left. You can also add a label and control arrowheads with fromEnd and toEnd.

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

Colors accept either a hex string like #FF0000 or a preset number from 1 to 6, corresponding to red, orange, yellow, green, cyan, and purple. Preset values are intentionally undefined so each application applies its own brand colors.

Related Skills

Explore More Education & Research Skills→
susamnsusamn

obsidian

Manage Obsidian vault notes and refactor links automatically.

Community
Intermediate
RonanCodesRonanCodes

slides

Generate Marp-format slide decks from wiki content.

Community
Intermediate
zapabobzapabob
2

Obsidian Knowledge Management

Manage Markdown notes with Wikilinks, tags, and YAML frontmatter.

Community
Intermediate
neverpreparedneverprepared

image-to-diagram

Convert visual diagrams from images into Mermaid or Graphviz code.

Official
Intermediate