What is a .canvas file?

A .canvas file is an open-source, JSON-based file format used by Obsidian and other apps to store infinite canvas data, including nodes, edges, and groups.

How does it handle overlapping nodes?

It manages z-index ordering based on the array sequence in the JSON; nodes placed later in the array are displayed on top of earlier nodes.

Is this skill compatible with the official JSON Canvas specification?

Yes, the skill is strictly designed to follow the JSON Canvas Spec 1.0, ensuring compatibility with any application that supports the format.

Can this skill link to my existing Obsidian notes?

Yes, the skill supports 'file' nodes which can reference any file or attachment within your vault, including specific headings or blocks using subpaths.

Does it support custom colors and styles?

The skill supports both standard hex color codes and the six Obsidian preset colors for nodes and edges, as well as background styles like cover, ratio, and repeat for groups.

Obsidian JSON Canvas

Name: Obsidian JSON Canvas
Author: BCS1037

byBCS1037

•

Content Management

Generates and modifies standardized JSON Canvas (.canvas) files for visual brainstorming, flowcharts, and mind maps within Obsidian.

The JSON Canvas skill empowers Claude to programmatically create and edit infinite canvas data following the JSON Canvas Spec 1.0. It allows for the automated generation of complex visual layouts, including Markdown-based text nodes, local file references, external links, and organizational groups. By managing spatial coordinates, z-index layering, and directional edge connections, this skill transforms Claude from a text assistant into a visual architect capable of mapping out project workflows, research connections, and architectural diagrams directly inside your Obsidian vault.

Key Features

01Advanced visual organization using colored groups and background image styles

02Dynamic edge creation with custom labels, colors, and directional arrowheads

03Automated z-index management for proper layering of overlapping elements

044 GitHub stars

05Support for text, file, link, and group node types with precise spatial positioning

06Create and edit .canvas files compatible with Obsidian and the JSON Canvas Spec 1.0

Use Cases

01Generating automated project boards and flowcharts to visualize task dependencies

02Converting complex Markdown outlines or research notes into interactive visual mind maps

03Mapping out documentation structures by linking file nodes to existing vault content

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add bcs1037/awesome-obsidian-skills json-canvas

For use in Claude.ai and ChatGPT

Key Features

01Advanced visual organization using colored groups and background image styles

02Dynamic edge creation with custom labels, colors, and directional arrowheads

03Automated z-index management for proper layering of overlapping elements

044 GitHub stars

05Support for text, file, link, and group node types with precise spatial positioning

06Create and edit .canvas files compatible with Obsidian and the JSON Canvas Spec 1.0

Use Cases

01Generating automated project boards and flowcharts to visualize task dependencies

02Converting complex Markdown outlines or research notes into interactive visual mind maps

03Mapping out documentation structures by linking file nodes to existing vault content