json-canvas
Build and modify .canvas files following the JSON Canvas Spec 1.0, adding text, file, link, and group nodes with precise positioning and connections. Manage edges between nodes, apply colors, and validate your canvas structure to ensure all references resolve correctly.
JSON Canvas lets you create and edit .canvas files with nodes, edges, and groups for visual organization in Obsidian.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-06-08
JSON Canvas lets you create and edit .canvas files with nodes, edges, and groups for visual organization in Obsidian. Build and modify .canvas files following the JSON Canvas Spec 1.0, adding text, file, link, and group nodes with precise positioning and connections. Manage edges between nodes, apply colors, and validate your canvas structure to ensure all references resolve correctly.
Use it when
- json-canvas follows the JSON Canvas Spec 1.0 standard.
- json-canvas lets you add multiple node types: text nodes for labels, file nodes linking to Obsidian documents, link nodes for URLs.
Verify before relying
Read SKILL.md below before installing (2 files). Open directory: indexed for reading, not audited.
Install
kepano/obsidian-skills/json-canvas
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I create canvas files in Obsidian?
json-canvas helps you create .canvas files by building JSON structures that Obsidian recognizes. Start by defining nodes (text, file, link, or group types) with unique IDs and x/y coordinates for positioning. Add edges to connect nodes, then save as a .canvas file. json-canvas validates your node IDs and connections to ensure the file loads correctly in Obsidian.
What is the JSON Canvas file format and structure?
json-canvas follows the JSON Canvas Spec 1.0 standard. A .canvas file contains two main arrays: nodes (with id, type, x, y, width, height, and content properties) and edges (with id, fromNode, fromSide, toNode, toSide properties). Groups organize nodes visually. json-canvas validates that all node references in edges exist and match their IDs correctly.
How can I add nodes to a canvas file and connect them?
json-canvas lets you add multiple node types: text nodes for labels, file nodes linking to Obsidian documents, link nodes for URLs, and group nodes for organization. Each node needs a unique ID and x/y positioning. Connect nodes using edges by specifying fromNode, toNode, and which sides they connect from (top, bottom, left, right). json-canvas ensures all connections reference valid node IDs.
Can I build mind maps, flowcharts, and project boards?
json-canvas supports building mind maps, flowcharts, and project boards in Obsidian Canvas format. Use text nodes for ideas, file nodes to link related documents, and edges to show relationships. Group nodes help organize sections visually. Apply colors and positioning to create clear hierarchies. json-canvas validates your entire structure so your diagrams display correctly in Obsidian.
How do I validate my canvas file and check node references?
json-canvas validates canvas file integrity by checking that every edge references existing node IDs and that all connections are properly formed. It verifies node positioning coordinates, ensures unique IDs, and confirms that fromSide and toSide values are valid. Run validation before saving to catch reference errors and structural issues early.
What styling and organization options does json-canvas support?
json-canvas supports colors for nodes and edges to enhance visual organization. Group nodes let you cluster related items together. You control precise x/y positioning and dimensions for each node. The JSON Canvas Spec 1.0 allows customization of text content, file links, and connection styling. json-canvas helps you apply these options consistently across your canvas files.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
JSON Canvas Skill
File Structure
A canvas file (.canvas) contains two top-level arrays following the JSON Canvas Spec 1.0:
{
"nodes": [],
"edges": []
}
nodes(optional): Array of node objectsedges(optional): Array of edge objects connecting nodes
Common Workflows
1. Create a New Canvas
- Create a
.canvasfile with the base structure{"nodes": [], "edges": []} - Generate unique 16-character hex IDs for each node (e.g.,
"6f0ad84f44ce9c17") - Add nodes with required fields:
id,type,x,y,width,height - Add edges referencing valid node IDs via
fromNodeandtoNode - Validate: Parse the JSON to confirm it is valid. Verify all
fromNode/toNodevalues exist in the nodes array
2. Add a Node to an Existing Canvas
- Read and parse the existing
.canvasfile - Generate a unique ID that does not collide
(truncated - see the full file via the links below)
File tree — 2 files
skills/json-canvas/SKILL.md
skills/json-canvas/references/EXAMPLES.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Create and edit JSON Canvas files with nodes, edges, groups for visual organization”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
This skill enables you to build and modify .canvas files following the JSON Canvas Spec 1.0, working with nodes, edges, groups, and visual layouts. Handle text, file, link, and group node types while managing connections, colors, and positioning across an infinite canvas.
Build and modify valid JSON Canvas files that power infinite canvas applications like Obsidian. Supports four node types—text, file, link, and group—plus edges with customizable endpoints and labels. Position elements precisely, apply colors, and organize content visually.
Canvas organizes visual references in Obsidian by letting you add images, PDFs, and wiki pages to canvas files with automatic positioning inside zones. It integrates with the /banana image capture skill and supports multiple operations like creating new canvases, managing zones, and listing existing canvases.
Master Obsidian Flavored Markdown to create richly formatted notes with wikilinks, embeds, callouts, and frontmatter properties. This skill covers Obsidian-specific extensions beyond standard Markdown, enabling you to link notes within your vault, embed content inline, highlight information with styled callouts, and organize metadata through properties.
Build structured database views within Obsidian by creating .base files that organize notes through filters, computed formulas, and customizable display formats. Support table, card, list, and map views with optional grouping, limits, and summary calculations across your vault.
Turn any text content into structured Obsidian Canvas visualizations using mind map or freeform layouts. The skill analyzes your input, determines the best layout approach, and generates a ready-to-import JSON canvas with proper spacing, color coding, and hierarchical organization.
More skills Kepano Obsidian Bases (unlicensed) · obsidian-markdown (MIT)