Obsidian Canvas Creator Skill logo

Obsidian Canvas Creator Skill

Visit

Create Obsidian Canvas files from text with MindMap and freeform layouts - transform structured content into interactive spatial visualizations with proper JSON formatting.

Share:

Obsidian Canvas Creator

Transform text content into structured Obsidian Canvas files with support for MindMap radial layouts and flexible freeform arrangements.

Key Benefits

  • Create interactive Obsidian Canvas files from text
  • Two layout types: MindMap (radial hierarchy) and Freeform (custom positioning)
  • Automatic node sizing based on content length
  • Professional color schemes with 6 preset colors
  • Proper JSON formatting with quote escaping for Chinese text
  • Built-in validation to prevent coordinate overlaps

Core Capabilities

  • Layout Types: MindMap (radial from center, hierarchical) and Freeform (flexible, custom positioning)
  • Node Management: Unique 8-12 character hex IDs, auto-sizing (220×100 to 320×180), color coding
  • Edge Styling: Solid/dashed arrows, labeled connections, straight/curved lines
  • Grouping: Visual containers with labels and background colors
  • Validation: Coordinate overlap prevention, ID uniqueness, proper references

When to Use

  • Creating canvas, mind map, or visual diagrams from text
  • Organizing information spatially
  • User mentions "Obsidian Canvas" or similar tools
  • Converting structured content (articles, notes, outlines) into visual format

Layout Algorithms

MindMap Layout:

  • Center root at (0, 0)
  • Distribute primary nodes radially
  • Space secondary nodes based on sibling count
  • Minimum spacing: 320px horizontal, 200px vertical

Freeform Layout:

  • Start with logical groupings
  • Position groups with clear separation
  • Connect across groups with curved edges
  • Balance visual weight across canvas

Node Sizing Guidelines

  • Short text (<30 chars): 220 × 100 px
  • Medium text (30-60 chars): 260 × 120 px
  • Long text (60-100 chars): 320 × 140 px
  • Very long text (>100 chars): 320 × 180 px

Color Schemes

Preset Colors:

  • "1" - Red (warnings, important)
  • "2" - Orange (action items)
  • "3" - Yellow (questions, notes)
  • "4" - Green (positive, completed)
  • "5" - Cyan (information, details)
  • "6" - Purple (concepts, abstract)

Custom Hex: Use uppercase format "#4A90E2"

Critical Rules

  • Quote handling: Chinese "『』, '「」, English ""
  • ID generation: 8-12 character random hex, unique across nodes/edges
  • Z-index order: Groups first (bottom), then subgroups, finally text nodes (top)
  • Spacing: Min 320px horizontal, 200px vertical between centers
  • JSON structure: Only nodes and edges arrays at top level

Workflow

  1. Analyze content structure and relationships
  2. Determine layout type (MindMap or Freeform)
  3. Plan node hierarchy and groupings
  4. Generate JSON with proper IDs and positioning
  5. Apply layout algorithm with spacing rules
  6. Validate and output complete JSON Canvas file

Source: https://github.com/axtonliu/axton-obsidian-visual-skills/tree/main/obsidian-canvas-creator License: Check repository for details

Comments

No comments yet. Be the first to comment!