json-canvas

Generate valid JSON Canvas structures with nodes and edges arrays.

Updated Apr 6, 2026
One-click install
npx skills add https://github.com/fantay0312/fantayspec --skill json-canvas-fantay0312
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: json-canvas
Source: https://github.com/fantay0312/fantayspec/tree/main/shared/skills/skills-all/json-canvas
Command: npx skills add https://github.com/fantay0312/fantayspec --skill json-canvas-fantay0312

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Create and edit JSON Canvas files (.canvas) with nodes, edges, groups, and connections to visually organize ideas, workflows, and data structures in Obsidian or compatible apps.

Core Features & Use Cases

  • Build and validate a JSON Canvas structure with mandatory top-level "nodes" and "edges" arrays.
  • Support node types: text, file, link, and group, with position, size, and optional color.
  • Design mind maps, flowcharts, and project dashboards to represent relationships and processes.
  • Use case: prototype knowledge maps for research topics or outline software architectures.

Quick Start

Open a canvas project and describe the desired visual structure so the skill generates a valid .canvas file with nodes and edges.

Frequently Asked Questions about json-canvas

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

FAQPage Schema
How do I generate a valid JSON Canvas file for an Obsidian canvas?

To generate a valid JSON Canvas file, describe your desired visual structure and the skill outputs a .canvas file with mandatory top-level nodes and edges arrays, supporting text, file, link, and group node types for Obsidian.

What is the JSON Canvas format used for visualizing knowledge graphs?

The JSON Canvas format structures visual canvases using top-level nodes and edges arrays, enabling you to design mind maps, flowcharts, and knowledge graphs by defining node positions, sizes, colors, and connection relationships.

Can I use this to create flowcharts with grouped nodes and custom colors?

Yes, you can create flowcharts by defining group node types and applying optional color properties. The skill validates the canvas schema to ensure nodes and edges maintain proper structural relationships within groups.

How do I connect nodes and edges in a .canvas file for a project dashboard?

You connect nodes and edges by describing the relationships in your project dashboard structure. The skill maps these descriptions to the canvas schema, generating the required top-level arrays with defined positions and connection mappings.

Does this skill support linking external files and URLs in a mind map?

Yes, the skill supports file and link node types alongside text and group nodes. This allows you to embed external file references and URLs directly into your mind map structure with specified positions and sizes.

Why does my JSON Canvas structure fail to render in compatible visualization tools?

Rendering fails when the JSON Canvas structure lacks mandatory top-level nodes and edges arrays or contains invalid node types. This skill enforces the canvas schema, validating positions, sizes, and optional colors to ensure compatibility.