json-canvas

Generate and update Obsidian JSON Canvas diagrams with nodes, edges, and groups.

Updated Apr 6, 2026
One-click install
npx skills add https://github.com/zhboner/Agent-Skills --skill json-canvas-zhboner
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: json-canvas
Source: https://github.com/zhboner/Agent-Skills/tree/main/obsidian-skills/skills/json-canvas
Command: npx skills add https://github.com/zhboner/Agent-Skills --skill json-canvas-zhboner

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill solves the friction of creating and maintaining visual diagrams in Obsidian by generating correct JSON Canvas (.canvas) structure that includes nodes, edges, groups, and layout coordinates.

Core Features & Use Cases

  • Create JSON Canvas files from scratch with the required top-level arrays (nodes, edges) following the JSON Canvas Spec 1.0.
  • Add and edit canvas elements by updating node/edge objects, positioning (including negative coordinates), grouping, and attributes like labels, colors, and anchors.
  • Connect nodes reliably by producing edges that reference valid node IDs and by validating edge integrity after edits.
  • Use Case: Turn brainstorming content into a mind map/flowchart inside Obsidian by placing text nodes, grouping related items, and drawing labeled connections between them.

Quick Start

Use the json-canvas skill to create a new .canvas JSON file with nodes, edges, and groups for a simple flowchart, then validate that all node and edge IDs and references are consistent.

Frequently Asked Questions about json-canvas

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create an Obsidian JSON Canvas file with nodes and edges?

To create an Obsidian JSON Canvas file, generate a JSON structure with top-level arrays for nodes and edges following the JSON Canvas Spec 1.0. This includes defining layout coordinates, colors, labels, and valid 16-character hex IDs for each element.

Can I use JSON Canvas to build flowcharts and mind maps in Obsidian?

Yes, JSON Canvas can build flowcharts and mind maps in Obsidian. You generate text nodes, group related items, and draw labeled connections between them, outputting a JSON-parseable structure ready for visual structured thinking.

How do you connect nodes reliably in a .canvas diagram?

To connect nodes reliably in a .canvas diagram, generate edges that reference valid node IDs using the fromNode and toNode fields. Validating edge integrity after edits ensures all connections remain consistent within the JSON structure.

What is the JSON Canvas Spec 1.0 format for visual diagrams?

The JSON Canvas Spec 1.0 format is a JSON-parseable structure for visual diagrams. It requires top-level nodes and edges arrays, utilizing allowed fields like unique 16-character hex IDs, layout coordinates, groups, colors, and anchors.

Does the JSON Canvas format support negative coordinates and grouping?

Yes, the JSON Canvas format supports negative coordinates and grouping. You can position node objects anywhere on the canvas, including negative coordinate spaces, and group related items together while maintaining correct edge references.

Why do my Obsidian canvas edges break after editing node positions?

Obsidian canvas edges break after editing when fromNode and toNode references become invalid. To fix this, validate edge integrity after edits by ensuring all edges reference existing 16-character hex node IDs within your JSON structure.