skills.rest
Wizarck
WizarckCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

json-canvas

Create and edit Obsidian JSON Canvas files with nodes, edges, and groups.

2|Updated Apr 19, 2026
Search Tags:#knowledge graph#obsidian#canvas#diagram#json canvas#visual notes#nodes and edges
One-click install
npx skills add https://github.com/Wizarck/nexandro --skill json-canvas-wizarck
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: json-canvas
Source: https://github.com/Wizarck/nexandro/tree/main/skills/json-canvas
Command: npx skills add https://github.com/Wizarck/nexandro --skill json-canvas-wizarck

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Manually writing valid .canvas files for Obsidian is error-prone because the JSON structure requires unique node IDs, correct node types, and properly linked edges. This Skill provides the exact schema and conventions needed to generate valid visual canvases on the first attempt. ## Core Features & Use Cases - Node Creation: Generate text, file, URL (link), and group nodes with correct positioning, dimensions, and colors. - Edge Connections: Define directional edges between nodes with side anchors (top, right, bottom, left), labels, and colors. - Visual Organization: Use group nodes and the predefined color palette (1-6 or custom hex) to structure spatial note maps. - Use Case: Ask the AI to map out a project architecture as an Obsidian canvas, and it produces a valid .canvas file with grouped nodes for frontend, backend, and database components connected by labeled edges. ## Quick Start Create an Obsidian canvas file that maps my project's main concepts as connected text nodes grouped by topic.

Frequently Asked Questions about json-canvas

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

FAQPage Schema
How do I create an Obsidian canvas file programmatically?▼

Write a JSON file with a .canvas extension containing top-level "nodes" and "edges" arrays. Each node needs a unique id, type (text, file, link, or group), x/y coordinates, and width/height dimensions.

What node types does the Obsidian JSON Canvas format support?▼

The format supports four node types: text nodes with Markdown content, file nodes linking to vault notes, link nodes pointing to external URLs, and group nodes that act as labeled containers for other nodes.

How do I connect nodes with edges in a .canvas file?▼

Add an edge object with a unique id, fromNode and toNode referencing node IDs, plus fromSide and toSide values (top, right, bottom, or left). Edges can optionally include a label and a color.

What colors can I use in Obsidian canvas files?▼

Use preset color codes "1" through "6" for red, orange, yellow, green, cyan, and purple. Alternatively, provide a custom hex color string like "#ff0000" for any node, group, or edge.

Why does my Obsidian canvas file fail to load?▼

Loading failures usually come from duplicate node IDs, edges referencing nonexistent node IDs, or invalid JSON syntax. Ensure every id is unique within the file and all fromNode/toNode values match existing nodes.

Related Skills

Explore More Content & Communication Skills→
rinbarpenrinbarpen

obsidian-canvas-creator

Convert textual notes into Obsidian Canvas JSON for MindMap or Freeform layouts.

Community
Basic
duany049duany049

生成并更新可视化产物 —— Obsidian 图谱配置与 Canvas 知识地图。交互式网页图谱视图位于 SPA 的 app/modules/graph.js（由 tools/serve.py 提供服务）。

Generate Obsidian graph configurations and typed Canvas knowledge maps from OmegaWiki graph datasets.

Community
Intermediate
llm011llm011
9

obsidian

Manage Obsidian vault notes, metadata, tags, and backlinks while preserving structure.

Official
Advanced
NITISH-gitbitNITISH-gitbit

excalidraw

Generate hand-drawn Excalidraw diagrams from JSON element specifications.

Community
Intermediate