canvas — Skills — getagentictools

What it does

Origin (0,0) at top-left

X increases to the right

Y increases downward

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

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

canvas

Source

Repository: https://github.com/markdown-viewer/skills

canvas FAQ

What does the canvas skill do?

Create spatial diagrams with free-positioned nodes using JSON format. Best for concept maps, knowledge graphs, and planning boards requiring precise x/y coordinate control. Origin (0,0) at top-left X increases to the right

What does canvas require?

All nodes require: id, type, x, y, width, height Multi-line text requires more height to display all lines Long words require more width to avoid overflow

How do I install canvas?

Run: npx -y skills add https://github.com/markdown-viewer/skills --skill canvas --agent claude-code — the source lives at github.com/markdown-viewer/skills.

Maintain canvas?

Let people know it's listed here — add the badge (live metrics, light/dark aware) or a plain link to your README or docs.

[canvas on getagentictools](https://getagentictools.com/skills/markdown-viewer-skills-canvas?ref=badge)

npx agentictools info skills/markdown-viewer-skills-canvas

The second line is the CLI lookup for this page — handy in READMEs and docs.