How do I install the Visual Canvas skill?

Run npx skillmds@latest add guanyang/visual-canvas in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Visual Canvas safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Visual Canvas?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Visual Canvas free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Visual Canvas?

guanyang (@guanyang) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Visual Canvas by guanyang — Agent Skill

Name: Visual Canvas
Author: guanyang

Visual Canvas

Create Obsidian Canvas (.canvas) files to visualize information, create mind maps, or organize notes spatially. Use this skill when the user wants to "see" their data, map out relationships, brainstorm topics, or convert text outlines into visual diagrams, even if they don't explicitly mention "Canvas."

guanyang 1b50a2e 5 files · 9.0 KB Updated Sep 17, 2026

File contents

Canvas Creator

Generate valid Obsidian .canvas JSON from text content. Read references/canvas-spec.md first for node/edge schema and a complete example.

Workflow

1. Analyze: Identify Root, Branches, Leaves from input.
1. Layout: MindMap (single root → radial) or Freeform (zones). Read references/layout-algorithms.md for positioning formulas.
1. Validate: All IDs unique · no overlaps (min gap: 400px H, 250px V) · all edge refs valid · groups before children in array.
1. Output: Raw JSON only — {"nodes": [...], "edges": [...]}. No wrapping text or code fences.

Gotchas

Chinese quotes: Double → 『』, Single → 「」, Standard double → \". Failing this breaks JSON.
Z-index: Groups → sub-groups → content nodes, in that order in the nodes array.
No emoji: Use color presets "1"–"6" instead.
Overlap: Node A at (0,0) with width=250 → Node B must start at x≥650 (250 + 400 gap).

References

File	Content	Tokens
`references/canvas-spec.md`	Node types, edge attrs, colors, complete example	~700
`references/layout-algorithms.md`	Radial, tree, grid formulas, edge side calc	~500
`assets/template-mindmap-simple.canvas`	Working MindMap	—
`assets/template-freeform-grouped.canvas`	Working Freeform with groups	—

Frequently asked questions