json-canvas

Generate and edit JSON Canvas files with nodes, edges, and groups.

1|Updated Aug 25, 2024
One-click install
npx skills add https://github.com/7loro/dotfiles --skill json-canvas-7loro
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: json-canvas
Source: https://github.com/7loro/dotfiles/tree/main/dot_config/agents/skills/json-canvas
Command: npx skills add https://github.com/7loro/dotfiles --skill json-canvas-7loro

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill enables users to create and edit JSON Canvas files (.canvas) for Obsidian and other tools, turning ideas into structured, visual canvases that support nodes, edges, and groups.

Core Features & Use Cases

  • Create and edit .canvas files with nodes, edges, and groups to visualize ideas, workflows, or data structures.
  • Validate structure against the JSON Canvas spec and provide patterns or templates for common layouts.
  • Use Case: design a project dashboard mind-map that organizes tasks and relationships within Obsidian notes.

Quick Start

To start, request a basic canvas with two text nodes and a connecting edge, and save it as MyBoard.canvas.

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 mind-map or flowchart inside Obsidian?

You can generate a mind-map or flowchart in Obsidian by creating a JSON Canvas (.canvas) file. This format structures your ideas visually using nodes, connecting edges, and groups directly within your notes.

What is a JSON Canvas file and how does it work in Obsidian?

A JSON Canvas file (.canvas) is a structured format that visualizes ideas as interactive nodes, edges, and groups. It works in Obsidian by enforcing specific rules like unique IDs and valid node types to render canvases.

Can I use this to create a project dashboard with tasks and relationships?

Yes, you can create a project dashboard mind-map by generating and editing .canvas files. This organizes tasks and their relationships visually using nodes and connecting edges inside Obsidian notes.

How do I validate a .canvas file against the JSON Canvas spec?

Validating a .canvas file involves checking for JSON Canvas rules such as unique IDs, valid node types, and required fields per node type. This ensures your canvas structure is correctly formatted for rendering.

What's the best way to start building an interactive canvas in Obsidian?

To start building an interactive canvas, request a basic layout with two text nodes and a connecting edge. Save this generated structure as a .canvas file like MyBoard.canvas to begin visualizing your workflow.

Does the JSON Canvas format support custom attributes like color for nodes?

Yes, the JSON Canvas format supports optional attributes like color and subpath for nodes. These attributes allow you to customize the appearance and structure of your visual canvas elements.