JSON Canvas

by breferrari

JSON Canvas is a Data skill for Claude Code, published by breferrari in obsidian-mind.

4.5K stars518 forkson breferrari/obsidian-mindAdded 2026/08/16+3% in starsRepository updated 2026/08/03

View source on GitHub Download repo ZIP

ai-agentsclaude-codecodex-cligemini-cliknowledge-managementobsidianobsidian-vaultpersistent-memorysecond-braintemplate

Install in seconds

Install JSON Canvas

Copy JSON Canvas into your Claude Code skills folder. Run the command in your terminal, or review the source on GitHub before installing.

terminal

npx degit https://github.com/breferrari/obsidian-mind/tree/main/.claude/skills/json-canvas ~/.claude/skills/json-canvas

Requires Node.js. Downloads this skill only — not the rest of the repository — into your Claude Code skills folder.

Without Node.js

git clone https://github.com/breferrari/obsidian-mind.git

Clones the whole repository, then copy the skill’s own directory into your skills folder yourself.

In this catalog

Source file: .claude/skills/json-canvas/SKILL.md in breferrari/obsidian-mind
Installs to: ~/.claude/skills/json-canvas
Collection: One of 8 skills cataloged from this repository
Category: Data — 668 skills

What JSON Canvas does

JSON Canvas creates and edits .canvas files with nodes, edges, groups, and connections for visual canvases, mind maps, and flowcharts in Obsidian. Use when working with .canvas files or when the user mentions Canvas files in Obsidian.

JSON Canvas is cataloged under Data on DirSkills. JSON Canvas comes from a repository tagged ai-agents, claude-code, codex-cli, gemini-cli and knowledge-management.

Documentation

README

Excerpt

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 objects
edges (optional): Array of edge objects connecting nodes

Common Workflows

1. Create a New Canvas

Create a .canvas file 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 fromNode and toNode
Validate: Parse the JSON to confirm it is valid. Verify all fromNode/toNode values exist in the nodes array

This is the opening of the README. Read the full README on GitHub.

Frequently asked about JSON Canvas

What else does breferrari publish alongside JSON Canvas?
JSON Canvas is one of 8 skills that DirSkills catalogs from breferrari/obsidian-mind, the repository it ships in. Its siblings there include Defuddle, Excalidraw Diagram Generator and Mermaid Visualizer. Each one is a separate skill with its own page in this directory, installs the same way JSON Canvas does, and is maintained by breferrari in that same repository. The rest of the collection is listed on the breferrari/obsidian-mind page.
How does JSON Canvas compare to other Data skills?
JSON Canvas ranks #192 by stars among the 668 Data skills in this catalog. The most-starred ones next to it are Benchmark Methodology, Jupyter Notebook and Solana. DirSkills ranks by the star count of the repository each skill ships in, so that order reflects how popular those repositories are rather than any review of JSON Canvas against them. Open each page to compare what they document and how they install.