Is this skill compatible with Obsidian?

Yes, this skill generates .canvas files that strictly follow the official JSON Canvas Spec 1.0, ensuring full compatibility with Obsidian's native canvas view.

Can I use it to create complex flowcharts?

Absolutely. The skill supports nodes and edges with specific 'from' and 'to' sides, labels, and arrowheads to build detailed logical diagrams.

How are the visual layouts determined?

The skill follows recommended spacing and sizing guidelines to ensure nodes are readable and aligned to a grid, though users can request specific positioning.

Does it support file attachments like images?

Yes, it can create 'file' nodes that reference any internal file in your vault, including images, videos, PDFs, and other Markdown notes.

Can I customize the colors of my nodes?

Yes, the skill supports the six standard Obsidian color presets as well as custom hex codes for precise visual branding.

JSON Canvas Assistant

Name: JSON Canvas Assistant
Author: davepoon

bydavepoon

•

2,257

•

생산성 및 워크플로

Creates and manages visual JSON Canvas files for Obsidian and other applications to organize notes, diagrams, and project workflows.

This skill empowers Claude Code to programmatically generate and edit .canvas files, providing a seamless way to visualize complex information through infinite canvas data. By adhering to the JSON Canvas Spec 1.0, it allows users to transform text-based ideas into structured mind maps, flowcharts, and project boards featuring text nodes, file attachments, and external links. It handles technical aspects like unique ID generation, coordinate positioning, and edge connections, making it an essential tool for knowledge workers and developers using Obsidian for visual documentation.

주요 기능

01Generates valid .canvas files compatible with Obsidian and the JSON Canvas Spec 1.0

02Creates complex connections using directional edges with customizable labels and end shapes

032,257 GitHub stars

04Supports multiple node types including Markdown text, local files, external links, and visual groups

05Automates layout positioning with precise X/Y coordinates and Z-index ordering

06Implements visual styling through preset color schemes and custom hex value support

사용 사례

01Creating automated flowcharts and logic diagrams to document software architecture or business processes

02Transforming project requirements and brainstorming sessions into interactive visual mind maps

03Organizing research by linking Markdown notes, PDF attachments, and web sources on a single visual board

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