mcpField
O
obsidian-canvas

obsidian-canvas

github.com/altshiftstudioProductivity340 installsUpdated 37w ago
Repository

About obsidian-canvas

A skill for creating and editing Obsidian Canvas `.canvas` files through a supplied Python library. It is intended for canvas workflows that need structured nodes, groups, and routed edges without writing raw JSON files.

Key features

  1. 01Create and manipulate `.canvas` files
  2. 02Build nodes, groups, and smart edges
  3. 03Generate files through the library CLI
  4. 04Arrange elements with logical coordinates
  5. 05Apply hierarchy, spacing, and color guidance

Use cases

  1. 01Create a project flowchart in Obsidian Canvas
  2. 02Organize related nodes into grouped tracks
  3. 03Generate a canvas without manually writing JSON

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/altshiftstudio/skills --skill obsidian-canvas

After installing, type/obsidian-canvasin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

assets/
flowchart.canvas
references/
library_spec.md
spec.md
scripts/
canvas_lib.py

Details

From the project README

Obsidian Canvas

This skill handles the creation and manipulation of .canvas files (JSON Canvas).

Core Workflow

  1. Library: Utilization of the provided scripts/canvas_lib.py is MANDATORY. Do not write raw JSON.
  2. Execution: Construct a JSON payload and pipe it to the library script via stdin (CLI mode). Do not create temporary Python scripts.
  3. Layout: Focus on logical coordinates (x,y). The library handles ID generation, node height, and edge routing automatically.

Resources

Layout & Aesthetics (Senior Designer Standards)

  • Whitespace: Use generous vertical gaps (120px-180px) between related nodes to provide "shelf space" for edge labels.
  • Z-Indexing: The library handles z-indexing (groups render behind nodes). Always use groups to bound track-specific content.
  • Hierarchy: Use H1 (#) for canvas titles, H2 (##) for major sections, and H3 (###) for individual node titles.
  • Colors:
    • 1 (Red): Friction, Error, Filing.
    • 2 (Orange): Interaction, Support, Outreach.
    • 3 (Yellow): Evidence, Documentation, Data.
    • 4 (Green): Success, Resolution, Start.
    • 5 (Blue/Cyan): Neutral, Operations.
    • 6 (Purple): Titles, Meta-info, Outcome.
  • Edges: Keep labels short. If multiple edges cross the same path, the library tries to route them, but manual x adjustments help.

Output

To create a new canvas, construct a JSON payload and pipe it to the library script:

cat <<EOF | python3 /path/to/skills/obsidian-canvas/scripts/canvas_lib.py
{
  "output": "Project_Flow.canvas",
  "nodes": [
    {"node_id": "start", "text": "Start", "x": 0, "y": 0, "color": "6"},
    {"node_id": "end", "text": "End", "x": 0, "y": 200, "color": "1"}
  ],
  "edges": [
    {"from_node": "start", "to_node": "end"}
  ],
  "groups": [
    {"label": "Phase 1", "nodes_in_group": ["start", "end"], "color": "5"}
  ]
}
EOF

Comments

Markdown supported