Can I link local workspace files in the canvas?

Yes, the skill supports 'file' nodes that reference paths to markdown notes, images, or other attachments within your local system.

Can I customize the appearance of the nodes?

Yes, the skill can apply hex color codes or use the standard preset colors (1-6) to differentiate between different types of information.

Can this skill modify existing canvas files?

Yes, it can read existing .canvas JSON structures to add new nodes, update content, or reorganize connections between existing elements.

Does it handle node positioning automatically?

The skill includes specific layout guidelines to calculate X/Y coordinates, ensuring nodes are spaced appropriately and aligned to a readable grid.

Is this skill compatible with Obsidian?

Yes, this skill follows the official JSON Canvas Spec 1.0, which is the native format used by Obsidian for its canvas feature.

JSON Canvas Editor

Name: JSON Canvas Editor
Author: davepoon

bydavepoon

•

2,257

•

콘텐츠 관리

Creates and manages visual JSON Canvas files for Obsidian and other infinite canvas applications.

This skill empowers Claude Code to architect, create, and refine valid JSON Canvas (.canvas) files, an open standard for infinite digital whiteboards. It enables the generation of complex visual structures including text-based mind maps, linked file diagrams, external resource boards, and organized group containers. By strictly following the JSON Canvas Spec 1.0, the skill ensures that all generated layouts are fully compatible with Obsidian and other visual thinking tools, allowing users to transition seamlessly from text-based prompts to structured visual documentation with automated positioning and connection logic.

주요 기능

01Generate valid JSON Canvas (.canvas) files following Spec 1.0

022,257 GitHub stars

03Create and connect text, file, link, and group nodes

04Support for preset and hex color customization for visual clarity

05Automate layout positioning with grid alignment and Z-index ordering

06Define directional edges with custom labels and arrow terminations

사용 사례

01Building interactive project boards and flowcharts directly from code or prompts

02Organizing research notes and file dependencies within Obsidian environments

03Visualizing project architecture and brainstorming mind maps

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add davepoon/buildwithclaude json-canvas

For use in Claude.ai and ChatGPT

Download Skill