skills.rest
yopitek
yopitekCOMMUNITY
Explore all skills by this author →
GitHub

json-canvas

Transform JSON Canvas files into editable visual diagrams in Obsidian.

Updated May 5, 2025
Search Tags:#obsidian#flowchart#canvas#mind-map#json-canvas#visual-diagrams
One-click install
npx skills add https://github.com/yopitek/Obsidian --skill json-canvas-yopitek
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: json-canvas
Source: https://github.com/yopitek/Obsidian/tree/main/HQ/10_resources/01_AI_Skills/Obsidian_skill/json-canvas
Command: npx skills add https://github.com/yopitek/Obsidian --skill json-canvas-yopitek

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

JSON Canvas files describe diagrams using two top-level arrays: nodes and edges following the JSON Canvas Spec 1.0. This skill helps you visually structure ideas in Obsidian and shareable canvases.

Core Features & Use Cases

  • Create and edit .canvas files with nodes and edges following the JSON Canvas Spec.
  • Visualize complex structures like mind maps, flowcharts, and grouped canvases directly in Obsidian.
  • Validate and reason about layouts, IDs, and connections to ensure a consistent diagram.

Quick Start

Open or create a .canvas file and start adding nodes and edges to build a diagram.

Frequently Asked Questions about json-canvas

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

FAQPage Schema
How do I create a visual mind map in Obsidian from JSON?▼

To create flowcharts in Obsidian, you build .canvas files by defining nodes and connecting them with edges. This skill parses your JSON Canvas structure and generates a visual diagram layout for your structured ideas.

What is the JSON Canvas spec for building flowcharts?▼

The JSON Canvas spec structures diagrams using top-level nodes and edges arrays. It requires unique 16-character IDs for elements and valid fromNode or toNode references to maintain consistent visual diagram connections.

Can I edit existing .canvas files and validate their node connections?▼

Yes, you can open and edit existing .canvas files. The skill validates layouts, checks unique 16-character IDs, and reasons about fromNode and toNode references to ensure your diagram connections remain structurally consistent.

Does this skill support grouped canvases and complex visual diagrams?▼

Yes, the skill supports grouped canvases and complex visual diagrams like mind maps and flowcharts. It structures ideas in Obsidian by validating the JSON Canvas layout and ensuring consistent node and edge grouping.

What are the limitations when editing JSON Canvas files in Obsidian?▼

The primary limitation is strict adherence to the JSON Canvas spec. Your diagram will fail to render correctly if nodes and edges lack unique 16-character IDs or contain invalid fromNode and toNode references.

Related Skills

Explore More Design & Creative Skills→
fantay0312fantay0312

json-canvas

Generate valid JSON Canvas structures with nodes and edges arrays.

Community
Intermediate
darellchua2darellchua2
4

ascii-diagram-creator

Convert user-defined workflows into ASCII diagrams and save as image files.

Community
Advanced
TreasoniTreasoni

json-canvas

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

Community
Intermediate
axtonliuaxtonliu
3.3k

mermaid-visualizer

Convert textual descriptions into valid Mermaid diagram code.

Community
Intermediate