skills.rest
baljinnyamday
baljinnyamdayCOMMUNITY
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/baljinnyamday/autonomous-red-team-agent --skill json-canvas-baljinnyamday
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: json-canvas
Source: https://github.com/baljinnyamday/autonomous-red-team-agent/tree/main/agent-baseline/.agents/skills/json-canvas
Command: npx skills add https://github.com/baljinnyamday/autonomous-red-team-agent --skill json-canvas-baljinnyamday

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Working with Obsidian .canvas files requires precise adherence to the JSON Canvas Spec 1.0, including unique hex IDs, valid node types, and correct edge references. This Skill provides the complete schema, workflows, and validation rules needed to create and edit canvas files without producing broken or unrenderable output. ## Core Features & Use Cases - Canvas Creation and Editing: Build new .canvas files from scratch or modify existing ones with text, file, link, and group nodes connected by labeled edges. - Spec-Compliant Validation: Enforce ID uniqueness, edge reference integrity, required fields per node type, and valid color and side values. - Layout Guidance: Apply positioning, spacing, and sizing conventions for readable mind maps, flowcharts, and project boards. - Use Case: Ask the agent to turn your meeting notes into a visual mind map, and it generates a valid .canvas file with a central topic node, branching subtopic nodes, and connecting edges that opens directly in Obsidian. ## Quick Start Create a new Obsidian canvas file that maps out my project plan as a flowchart with connected task 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 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, and height values. Edges connect nodes via fromNode and toNode IDs.

How do I connect two nodes in a .canvas file?▼

Add an edge object with a unique id, set fromNode and toNode to the source and target node IDs, and optionally specify fromSide, toSide, and a label. Both referenced node IDs must exist in the nodes array or the edge will not render.

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 pointing to external URLs, and group nodes that act as labeled visual containers for other nodes.

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

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

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" mapping to red, orange, yellow, green, cyan, and purple. Preset colors are intentionally undefined so each application applies its own brand palette.

Related Skills

Explore More Design & Creative Skills→
wyhlovecppwyhlovecpp

obsidian-canvas-creator

Convert structured text into interactive Obsidian Canvas mind maps.

Community
Intermediate
seqisseqis

obsidian-canvas

Create and manipulate Obsidian Canvas files using the JSON Canvas specification.

Community
Intermediate
AgriciDanielAgriciDaniel
14.5k

canvas

Create and update Obsidian JSON Canvas boards with nodes, groups, and edges.

Community
Advanced
Jimmy-JungJimmy-Jung

mermaid

Render Mermaid diagrams from text descriptions into flowcharts, sequence, and class diagrams.

Community
Intermediate