skills.rest
hviwen
hviwenCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

json-canvas

Generate and manipulate JSON Canvas files with nodes and edges.

Updated Feb 2, 2026
Search Tags:#obsidian#flowchart#diagramming#node editor#mind map#json canvas
One-click install
npx skills add https://github.com/hviwen/mosaic-photo --skill json-canvas-hviwen
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: json-canvas
Source: https://github.com/hviwen/mosaic-photo/tree/main/.claude/skills/json-canvas
Command: npx skills add https://github.com/hviwen/mosaic-photo --skill json-canvas-hviwen

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill allows for the programmatic creation and editing of JSON Canvas files, which are used for visual note-taking and diagramming in applications like Obsidian.

Core Features & Use Cases

  • Node Creation: Add text, file, link, and group nodes to a canvas.
  • Edge Creation: Connect nodes with lines, specifying start/end points, sides, and labels.
  • Canvas Structure: Understand and manipulate the JSON structure of .canvas files.
  • Use Case: Automatically generate a mind map from a list of ideas, or create a flowchart based on a process description.

Quick Start

Create a new JSON Canvas file with a text node containing 'My first canvas node'.

Frequently Asked Questions about json-canvas

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I programmatically create an Obsidian canvas file for a mind map?▼

You can programmatically create an Obsidian canvas file by generating a JSON Canvas (.canvas) file, which structures text, file, link, and group nodes to visually organize mind maps. This Skill outputs specification-compliant files for immediate use in Obsidian.

What is the JSON Canvas specification and how does it structure diagram data?▼

The JSON Canvas specification is a standard for visual note-taking that structures diagram data using nodes and edges. It defines customizable properties and positions for elements, ensuring compatibility with applications like Obsidian for visual organization.

Can I use this to automatically generate a flowchart based on a process description?▼

Yes, you can automatically generate a flowchart by parsing a process description to create nodes and edges. The Skill manipulates the JSON structure of .canvas files, allowing you to connect elements with lines and specify labels for flowchart visualization.

Does the generated JSON Canvas file support connecting nodes with custom labels and positions?▼

Yes, the generated JSON Canvas file supports connecting nodes with custom labels and positions. You can create edges that specify start and end points, sides, and text labels, while also setting exact coordinates for nodes within the canvas.

What is the best way to edit an existing JSON Canvas file without breaking the structure?▼

The best way to edit an existing JSON Canvas file is to programmatically manipulate its underlying JSON structure while adhering to the JSON Canvas Specification 1.0. This Skill ensures structural integrity by correctly updating node properties and edge connections.

Related Skills

Explore More Design & Creative Skills→
pixbpixb

json-canvas

Create and edit JSON Canvas files with nodes and edges.

Community
Basic
wyhlovecppwyhlovecpp

obsidian-canvas-creator

Convert structured text into interactive Obsidian Canvas mind maps.

Community
Intermediate
anbeimeanbeime
5.0k

json-canvas

Create and edit JSON Canvas files with nodes and edges.

Community
Intermediate
simplecore-incsimplecore-inc

mermaid

Create Mermaid diagrams from natural language and render them to SVG/PNG/PDF.

Official
Advanced