json-canvas

Convert visual diagrams into portable JSON Canvas files with nodes and edges.

1|Updated Apr 13, 2015
One-click install
npx skills add https://github.com/tyler-dot-earth/.dotfiles --skill json-canvas-tyler-dot-earth
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: json-canvas
Source: https://github.com/tyler-dot-earth/.dotfiles/tree/main/agents/skills/json-canvas
Command: npx skills add https://github.com/tyler-dot-earth/.dotfiles --skill json-canvas-tyler-dot-earth

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

JSON Canvas files provide a portable, visual data representation for ideas and workflows. They let you model ideas as nodes and relationships as edges, enabling easy sharing and versioning within notes and projects.

Core Features & Use Cases

  • Structured canvas format with base JSON: { "nodes": [], "edges": [] } to store diagrams, mind maps, and flowcharts.
  • Node and edge modeling: supports text, file, link, and group nodes with positioning, size, and labels; supports edge references and optional styling.
  • Validation and workflows: includes ID generation, reference validation, and example canvases to guide common tasks (creation, editing, and layout).

Quick Start

Create a new .canvas file with the base structure {"nodes": [], "edges": []} and start adding nodes and edges to model your data.

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 an Obsidian mind map or flowchart?

To create a JSON Canvas file, start with the base structure {"nodes": [], "edges": []} and add text, file, link, or group nodes with positioning, size, and labels, along with edges to map relationships. This portable format enables visual planning within Obsidian.

What is the JSON Canvas format used for in visual planning?

The JSON Canvas format provides a portable, visual data representation for ideas and workflows. It models concepts as nodes and relationships as edges, enabling easy sharing, versioning, and diagramming for mind maps and project canvases.

Can I validate unique IDs and cross-references in Obsidian canvas files?

Yes, you can validate canvas files using built-in validation features. The process enforces required fields on nodes and edges, validates unique IDs, and checks cross-references to ensure structural integrity within your visual diagrams.

Does JSON Canvas support file and link nodes alongside text?

Yes, JSON Canvas supports text, file, link, and group nodes. You can assign specific positioning, size, and labels to each node, and use edges with optional styling to connect them within your visual workflow.

What is the best way to structure a project canvas using nodes and edges?

The best way to structure a project canvas is to model your ideas as nodes and relationships as edges. Use the base JSON structure {"nodes": [], "edges": []} to store diagrams, applying generated IDs and reference validation for accurate layout.

Why does my Obsidian canvas diagram have missing required fields?

Missing required fields occur when nodes or edges lack enforced attributes. The canvas validation process checks for required fields on nodes and edges, ensuring unique IDs and valid cross-references to prevent structural errors in your visual data.