·canvas

Create spatial node-based diagrams with free positioning. Best for mind maps, knowledge graphs, concept maps, and planning boards where precise spatial layout matters. Use JSON format with x/y coordinates. NOT for sequential flows (use mermaid) or data charts (use vega).

6Installs·0Trend·@xicilion

Installation

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

SKILL.md

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.

Node Types | Type | Required Fields | Purpose |

| text | text | Display custom text content | | file | file | Reference external files | | link | url | External URL references | | group | label | Visual container for grouping |

Create spatial node-based diagrams with free positioning. Best for mind maps, knowledge graphs, concept maps, and planning boards where precise spatial layout matters. Use JSON format with x/y coordinates. NOT for sequential flows (use mermaid) or data charts (use vega). Source: xicilion/markdown-viewer-extension.

View raw

Facts (cite-ready)

Stable fields and commands for AI/search citations.

Install command
npx skills add https://github.com/xicilion/markdown-viewer-extension --skill canvas
Category
*Creative Media
Verified
First Seen
2026-02-01
Updated
2026-02-18

Quick answers

What is canvas?

Create spatial node-based diagrams with free positioning. Best for mind maps, knowledge graphs, concept maps, and planning boards where precise spatial layout matters. Use JSON format with x/y coordinates. NOT for sequential flows (use mermaid) or data charts (use vega). Source: xicilion/markdown-viewer-extension.

How do I install canvas?

Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/xicilion/markdown-viewer-extension --skill canvas Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code or Cursor

Where is the source repository?

https://github.com/xicilion/markdown-viewer-extension

Details

Category
*Creative Media
Source
skills.sh
First Seen
2026-02-01