How does it handle node positioning and overlapping?

The skill includes layout guidelines that suggest specific widths and heights for different node types and maintains 50-100px spacing to prevent visual clutter.

What is the JSON Canvas format?

JSON Canvas is an open-source file format (.canvas) designed for infinite visual canvases, allowing users to connect nodes, text, and files in a structured JSON schema.

Does it support Markdown within the canvas?

Yes, text nodes created by this skill fully support Markdown syntax, including headers, bold text, and lists, which render correctly in compatible viewers.

Can Claude generate flowcharts from my source code using this?

Absolutely. Claude can use this skill to parse your logic and output a visual .canvas file representing your code architecture or execution flow.

Is this skill compatible with Obsidian?

Yes, it follows the JSON Canvas Spec 1.0, which is the native format used by Obsidian for its Canvas plugin, ensuring full interoperability for your notes.

JSON Canvas

Name: JSON Canvas
Author: 812lcl

by812lcl

0•

生产力与工作流

Creates and manages visual JSON Canvas files for mind maps, flowcharts, and Obsidian diagrams using the official 1.0 specification.

This skill empowers Claude to programmatically generate, modify, and validate JSON Canvas (.canvas) files, the open standard popularized by Obsidian for visual note-taking and infinite canvases. It provides deep domain knowledge for placing nodes (text, files, links, and groups), establishing directional edges, and managing complex layouts with automatic 16-character hex ID generation. Whether you are building automated flowcharts, mapping out project architectures, or organizing research, this skill ensures full technical compliance with the JSON Canvas Spec 1.0 while maintaining clean visual spacing and grid alignment.

主要功能

01Smart node placement with overlap prevention and suggested layout spacing

020 GitHub stars

03Dynamic edge management with customizable anchors, labels, and arrowheads

04Programmatic creation and editing of .canvas files with full spec compliance

05Built-in validation for 16-character hex IDs and edge reference integrity

06Support for specialized node types including Markdown text, local files, and URLs

使用场景

01Creating dynamic mind maps and research canvases for brainstorming sessions

02Visualizing complex folder structures and documentation links within Obsidian

03Generating automated project roadmaps and flowcharts directly from codebase analysis

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add 812lcl/dotfiles json-canvas

For use in Claude.ai and ChatGPT