skills.rest
officechbusinessservices-creator
officechbusinessservices-creatorCOMMUNITY
Explore all skills by this author →
GitHub

json-canvas

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

Updated Feb 4, 2026
Search Tags:#nodes#visualization#canvas#diagram#edges#json-canvas
One-click install
npx skills add https://github.com/officechbusinessservices-creator/CompliCore --skill json-canvas-officechbusinessservices-creator
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: json-canvas
Source: https://github.com/officechbusinessservices-creator/CompliCore/tree/main/.agents/skills/json-canvas
Command: npx skills add https://github.com/officechbusinessservices-creator/CompliCore --skill json-canvas-officechbusinessservices-creator

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

JSON Canvas files provide a structured way to model canvases with nodes and edges; however, manually creating and editing them can be error-prone and tedious for complex diagrams.

Core Features & Use Cases

  • Initialize a new .canvas with the base structure {"nodes": [], "edges": []}
  • Add nodes with required fields (id, type, x, y, width, height) and connect them with edges
  • Validate references and ensure IDs are unique to maintain a consistent canvas

Quick Start

Create a new .canvas file with the base structure and begin adding nodes and edges to model your idea.

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 JSON Canvas file for a mind map or flowchart?▼

To create a JSON Canvas file, initialize the base structure with empty nodes and edges arrays, then add elements with required fields like id, type, x, y, width, and height to model your visual diagram.

What is the JSON Canvas spec used for?▼

The JSON Canvas spec provides a structured format to model visual canvases with nodes and edges, ensuring complex diagrams like project boards and research maps are consistently serialized and validated.

How do I validate references and ensure unique IDs in a .canvas file?▼

Validating references in a .canvas file involves checking that all edge connections point to existing nodes and verifying that every node ID remains unique to maintain a consistent canvas structure.

Can I use JSON Canvas for project boards and research canvases?▼

Yes, JSON Canvas is applicable for project boards and research canvases, supporting the creation and updating of visual structures where nodes and edges represent tasks and relationships.

What's the best way to edit complex JSON Canvas diagrams without errors?▼

The best way to edit complex JSON Canvas diagrams is by using a visual editor that validates references and ensures unique IDs, preventing the tedious and error-prone process of manual JSON editing.

Why does manually editing a .canvas file cause reference errors?▼

Manually editing a .canvas file causes reference errors because complex diagrams require strict validation of edge connections and unique node IDs, which is tedious and error-prone to maintain by hand.

Related Skills

Explore More Design & Creative Skills→
kimgeakimgea

json-canvas

Generate and edit JSON Canvas files with nodes and edges.

Community
Intermediate
guanyangguanyang
947

json-canvas

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

Community
Intermediate
hviwenhviwen

json-canvas

Generate and manipulate JSON Canvas files with nodes and edges.

Community
Intermediate
mindmorassmindmorass
2

image-to-diagram

Convert visual diagrams from images into Mermaid or Graphviz code.

Community
Intermediate