json-canvas

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill simplifies the creation and modification of JSON Canvas files, which are used for visual note-taking and diagramming in applications like Obsidian.

Core Features & Use Cases

  • Node Creation: Add text, file, link, and group nodes to your canvas.
  • Edge Creation: Connect nodes with lines, specifying start/end points, sides, and arrow styles.
  • Structure Definition: Define the layout, size, and content of canvas elements according to the JSON Canvas specification.
  • Use Case: Visually map out project ideas, create flowcharts for processes, or design mind maps by defining nodes and their relationships.

Quick Start

Use the json-canvas skill to create a new canvas file with a title node and a link to the JSON Canvas specification.

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 visual note-taking in Obsidian?

To create a JSON Canvas file, define nodes (text, file, link, or group) with attributes like position, size, and color, then connect them with edges. The Skill validates your output against the JSON Canvas Spec 1.0 for Obsidian compatibility.

What is the JSON Canvas format used for in diagramming and mind maps?

The JSON Canvas format is used for structured visual data representation in diagramming and mind maps. It defines elements like nodes and edges to map out project ideas, create flowcharts, and establish relationships within visual notes.

Can I define flowchart connections and arrow styles using the JSON Canvas spec?

Yes, you can define flowchart connections by creating edges between nodes. The JSON Canvas spec allows you to specify start and end points, connection sides, and arrow styles to visually structure your process flows.

Does this method support adding group nodes to organize a mind map layout?

Yes, this method supports adding group nodes to organize your mind map layout. You can define group nodes alongside text, file, and link nodes, setting attributes like position and size to structure your visual canvas.

What is the best way to structure canvas elements for a visual diagram?

The best way to structure canvas elements is by defining node attributes like position, size, and color, and linking them with edges that specify connection points and styles. This ensures your visual diagrams are validated against the JSON Canvas Spec 1.0.

Why does my JSON Canvas file fail to render correctly in Obsidian?

Your JSON Canvas file may fail to render if it does not conform to the JSON Canvas Spec 1.0. Properly structure all nodes, edges, groups, and attributes like position and size to ensure valid visual data representation.