canvas_skill

Overview

This skill creates spatial, node-based diagrams using JSON with explicit x/y coordinates. It is optimized for mind maps, knowledge graphs, concept maps, and planning boards where precise placement matters. Use a 100px grid convention and color presets to keep layouts consistent. Not intended for sequential flows or data charts.

How this skill works

You define nodes with required fields id, type, x, y, width, and height, and list edges that connect nodes by id. Node types include text, file, link, and group, each with its required content property. Coordinates use an origin at the top-left (0,0), X right, Y down. Wrap the JSON inside a ```canvas fenced block to produce the visual layout.

When to use it

• Designing free-form mind maps that rely on spatial relationships.
• Building knowledge graphs or concept maps where precise node placement conveys meaning.
• Creating planning boards or moodboards that need manual arrangement.
• When you need persistent coordinates compatible with Obsidian Canvas.
• Avoid for sequential flowcharts or charts—use Mermaid or Vega instead.

Best practices

• Plan on a 100px grid to keep spacing consistent and readable.
• Always include id, type, x, y, width, and height for every node.
• Size nodes to fit text: increase height for multi-line text and width for long words.
• Use color presets 1–6 to group or highlight related nodes consistently.
• Verify fromNode/toNode IDs exactly match node ids to avoid invisible edges.

Example use cases

• A concept map with clustered topic groups (use group nodes for visual containers).
• A research knowledge graph linking papers (file nodes) and external resources (link nodes).
• A project planning board with spatial lanes or priority zones.
• A personal brainstorming canvas where ideas are freely dragged and positioned.
• Diagramming UX screens or component layouts with explicit x/y placement.