skills.rest
NT-boop-star
NT-boop-starCOMMUNITY
Explore all skills by this author →
GitHub

json-canvas

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

Updated Apr 7, 2026
Search Tags:#obsidian#flowchart#visualization#mind map#json canvas#canvas file#nodes and edges
One-click install
npx skills add https://github.com/NT-boop-star/BRMV-tract --skill json-canvas-nt-boop-star
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: json-canvas
Source: https://github.com/NT-boop-star/BRMV-tract/tree/main/antigravity/skills/json-canvas
Command: npx skills add https://github.com/NT-boop-star/BRMV-tract --skill json-canvas-nt-boop-star

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Manually writing .canvas files requires memorizing the JSON Canvas spec, generating unique node IDs, and keeping edge references consistent, which is error-prone when building mind maps, flowcharts, or project boards in Obsidian. ## 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 preset or hex colors. - Built-in Validation: Checklist-driven verification of ID uniqueness, edge reference integrity, required fields, and JSON validity. - Use Case: Ask for a project board and receive a complete .canvas file with To Do, In Progress, and Done groups containing task cards, ready to open in Obsidian. ## Quick Start Create a flowchart canvas file with a start node, three process steps, a decision branch, and labeled arrows connecting them.

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 node objects with id, type, x, y, width, and height fields. Connect nodes with edge objects referencing valid node IDs via fromNode and toNode.

What node types does JSON Canvas support?▼

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

Why does my canvas text show literal backslash-n characters?▼

This happens when text contains an escaped double backslash followed by n instead of a proper JSON newline escape. Use a single backslash with n inside JSON strings so Obsidian renders actual line breaks.

How do I fix broken connections in a canvas file?▼

Broken edges occur when fromNode or toNode values reference node IDs that do not exist in the nodes array. Validate that every edge endpoint matches an existing node ID and that all IDs are unique across nodes and edges.

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

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

Related Skills

Explore More Product & Management 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
Tx1207Tx1207
5

obsidian-literature-workflow

Synchronize Obsidian literature notes and generate literature canvases from Zotero imports.

Community
Advanced
llm011llm011
9

obsidian

Manage Obsidian vault notes, metadata, tags, and backlinks while preserving structure.

Official
Advanced
mindmorassmindmorass
2

image-to-diagram

Convert visual diagrams from images into Mermaid or Graphviz code.

Community
Intermediate