obsidian-canvas
Obsidian Canvas
This skill handles the creation and manipulation of .canvas files (JSON Canvas).
Core Workflow
- Library: Utilization of the provided
scripts/canvas_lib.pyis MANDATORY. Do not write raw JSON. - Execution: Construct a JSON payload and pipe it to the library script via stdin (CLI mode). Do not create temporary Python scripts.
- Layout: Focus on logical coordinates (x,y). The library handles ID generation, node height, and edge routing automatically.
Resources
- Library:
scripts/canvas_lib.py(Core logic for nodes, groups, and smart edges). - CLI Spec: references/library_spec.md - Read strictly for JSON format.
- Specification: See references/spec.md for the detailed JSON schema.
- Example: See assets/flowchart.canvas.
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
xadjustments 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
More from altshiftstudio/skills
creativity
Generates non-obvious ideas using Verbalized Sampling (VS-CoT). Use when the user needs to brainstorm novel solutions, avoid stereotypical patterns, or write creatively.
59pen-design
Design and manipulate Pencil (.pen) files using MCP tools. Use this skill when (1) creating UI screens, dashboards, or layouts in .pen format, (2) reading or modifying existing .pen designs, (3) working with design system components, (4) generating code from .pen files, or (5) understanding PEN file structure, tokens, or schema.
18design-brief
Create strategic design briefs that empower designers. Use when asked to write a design brief, product brief, feature brief for a new product, flow, or a feature. Triggers include "create a design brief", "brief for [feature]", or "design spec".
8context-snapshot
Create a durable handoff file that captures important conversation state for agent continuity. Use when the context window is getting full, when switching agents/sessions, when handing off work, or when asked to summarize progress without losing decisions, constraints, risks, and pending tasks.
7