mcpField
C
canvas

canvas

github.com/markdown-viewerProductivity3.4k3.3k installsUpdated 3w ago
Repository

About canvas

A skill for creating Obsidian Canvas-compatible diagrams in JSON Canvas format. It covers node and edge structure, layout coordinates, and color assignment.

Key features

  1. 01JSON Canvas node and edge syntax
  2. 02Text, file, link, and group nodes
  3. 03Grid-based layout guidance
  4. 04Canvas color assignment
  5. 05Obsidian Canvas compatibility

Use cases

  1. 01Organizing ideas as connected nodes
  2. 02Mapping links between files and URLs
  3. 03Grouping items in a visual canvas

Install

Copy the command and run it in a terminal.

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

After installing, type/canvasin Claude Code to confirm it loaded.

Bundled filesreferences/syntax.md

Details

From the project README

JSON Canvas Visualizer

Quick Start: Define nodes with id, type, x, y, width, height → Plan layout on 100px grid → Connect edges with fromNode/toNode → Apply colors (1-6) → Wrap in ```canvas fence. Origin (0,0) at top-left, X right, Y down. Obsidian Canvas compatible.

Critical Syntax Rules

1. Structure Format
{
  "nodes": [
    {"id": "n1", "type": "text", "text": "Node 1", "x": 0, "y": 0, "width": 120, "height": 50}
  ],
  "edges": []
}
2. Node Types
TypeRequired FieldsPurpose
texttextDisplay custom text content
filefileReference external files
linkurlExternal URL references
grouplabelVisual container for grouping
3. Required Node Attributes

All nodes require: id, type, x, y, width, height

4. Color Presets
ValueColor
"1"Red
"2"Orange
"3"Yellow
"4"Green
"5"Cyan
"6"Purple
5. Edge Connections
{
  "id": "e1",
  "fromNode": "n1",
  "fromSide": "right",
  "toNode": "n2", 
  "toSide": "left",
  "toEnd": "arrow"
}
6. Coordinate System
  • Origin (0,0) at top-left
  • X increases to the right
  • Y increases downward
7. Node Sizing
  • Consider text content when setting node dimensions
  • Multi-line text requires more height to display all lines
  • Long words require more width to avoid overflow

Common Pitfalls

IssueSolution
Nodes overlappingIncrease spacing (100+ px)
Edges not visibleVerify fromNode/toNode match node IDs
Invalid JSONCheck quotes and commas
IDs invalidUse only a-z, A-Z, 0-9, -, _

Output Format

```canvas
{
  "nodes": [...],
  "edges": [...]
}
```

Related Files

For detailed syntax and advanced features, refer to references below:

  • syntax.md — Complete attribute reference: node types, edge properties, group styling, and advanced examples

Resources

Comments

Markdown supported