canvas

Generate spatial JSON canvas diagrams with positioned nodes and edges.

3.1k|179|Updated Jan 31, 2026

Search Tags:#layout #json #visualization #canvas #diagram #knowledge-graph #mindmap

Ready to run

npx skills add https://github.com/markdown-viewer/skills --skill canvas-markdown-viewer

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: canvas
Source: https://github.com/markdown-viewer/skills/tree/main/canvas
Command: npx skills add https://github.com/markdown-viewer/skills --skill canvas-markdown-viewer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Enable creators to build spatial, coordinate-precise diagrams without manual drawing by describing nodes, sizes, positions, and connections in JSON so layouts are repeatable, editable, and programmatically generated.

Core Features & Use Cases

Precise x/y positioning and explicit width/height for each node to control layout on a pixel grid.
Support for multiple node types (text, file, link, group), configurable edges, color presets, and group containers for visual organization.
Ideal for concept maps, mind maps, knowledge graphs, planning boards, and architecture sketches that require deterministic placement and exportable JSON representations.

Quick Start

Generate a canvas JSON with nodes and edges positioned on a 100px grid to produce a simple three-node flow diagram.

Frequently Asked Questions about canvas

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

FAQPage Schema

How do I generate a JSON diagram with precise node coordinates and connections?▼

To generate a JSON diagram, define nodes with explicit x/y coordinates, width, height, and edges with explicit endpoints. This creates repeatable, coordinate-precise spatial layouts on a pixel grid without manual drawing.

What types of nodes can I use when building a knowledge graph in JSON?▼

When building a knowledge graph in JSON, you can use text, file, link, and group node types. These nodes support configurable edges, color presets, and group containers for visual organization of your spatial diagram.

Can I use JSON canvas to create mind maps with deterministic placement?▼

Yes, JSON canvas is ideal for mind maps requiring deterministic placement. By specifying exact x/y positions and node sizing in JSON, layouts become repeatable, editable, and programmatically generated rather than manually drawn.

What's the best way to structure a planning board using spatial JSON?▼

The best way to structure a planning board using spatial JSON is to place free-positioned nodes on a coordinate grid, utilizing group containers for organization. Validate node attributes and edge endpoints to ensure explicit spatial relationships.

Does the JSON canvas format validate edge endpoints and coordinate bounds?▼

Yes, the JSON canvas format validates edge endpoints, coordinate bounds, and color presets. This validation ensures that node attributes and explicit connections remain accurate within your programmatically generated concept maps or architecture sketches.