What is a JSON Canvas file?

JSON Canvas is an open format for infinite canvas data using the .canvas extension. It is widely used in applications like Obsidian for visual note-taking and diagramming.

Is it compatible with Obsidian?

Absolutely. The skill follows the official JSON Canvas Spec 1.0, ensuring all generated files are fully compatible with the Obsidian Canvas view.

Can this skill create connections between different notes?

Yes, it can create edges with custom labels and arrows to connect text nodes, file references, and external links across the canvas.

How does the skill handle node positioning?

The skill manages X and Y coordinates along with width and height dimensions to ensure nodes are placed logically on the infinite canvas without unintended overlapping.

Does it support images and web links?

Yes, it supports 'file' nodes for local attachments like images or PDFs, and 'link' nodes for embedding external URLs directly on the canvas.

JSON Canvas Editor

Name: JSON Canvas Editor
Author: lngyneric

bylngyneric

0•

Productivity & Workflow

Creates and edits standardized JSON Canvas files for visual brainstorming, flowcharts, and mind mapping within Obsidian and other canvas-compatible tools.

This skill empowers Claude Code to interact directly with the JSON Canvas format, an open file standard for infinite canvas data. It allows the AI to programmatically generate, update, and manage .canvas files, enabling users to transform complex ideas into visual structures like mind maps, project boards, and technical flowcharts. By strictly following the JSON Canvas Spec 1.0, the skill ensures seamless compatibility with Obsidian and other supported platforms, making it an essential tool for visual documentation, knowledge management, and structured brainstorming sessions.

Key Features

01Define complex edge connections with customizable labels, directional sides, and arrow endpoints

02Apply visual styling using both hex color codes and standard canvas preset colors

030 GitHub stars

04Generate valid JSON Canvas (.canvas) files following the official Spec 1.0

05Create and manage diverse node types including Markdown text, local files, external links, and visual groups

06Organize visual hierarchies using z-index layering and containerized group nodes

Use Cases

01Automating the creation of software architecture diagrams and logic flowcharts

02Building visual project dashboards and Kanban-style task boards within Obsidian

03Organizing research notes, PDF attachments, and web resources into a structured visual mind map

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add lngyneric/my-notebook-github json-canvas

For use in Claude.ai and ChatGPT

Download Skill