Json Canvas

What Is Json Canvas?

Json Canvas is a specialized skill designed for Claude Code, enabling the creation and editing of JSON Canvas files (.canvas). These files form the backbone of visual canvases used primarily in Obsidian and compatible applications, supporting infinite canvas layouts such as mind maps, flowcharts, and project planning boards. The .canvas file format is built on a straightforward JSON structure, making it both human-readable and easily manipulated by scripts and automation tools.

Json Canvas facilitates the programmatic handling of nodes (representing elements like text, files, and links) and edges (representing the relationships or connections between nodes). By leveraging this skill, developers, knowledge workers, and visual thinkers can automate the generation and maintenance of complex visual structures, enhancing productivity and visual organization within workflows that support JSON Canvas.

Why Use Json Canvas?

The Json Canvas skill addresses several key scenarios where visual representation and structured data converge:

• Automated Canvas Generation: When repetitive or large-scale visual structures are required—such as project boards, organizational charts, or knowledge graphs—Json Canvas can rapidly produce standardized .canvas files.
• Integration With Obsidian: Obsidian, a popular note-taking tool, supports Canvas files for visual note organization. Json Canvas streamlines the process of creating and updating these canvases programmatically.
• Visual Knowledge Management: By representing relationships visually, teams and individuals can map projects, brainstorm, and document complex systems more effectively.
• Custom Diagrams: Json Canvas allows for tailored layouts and connections, supporting use cases such as flowcharts, network diagrams, and mind maps.

Unlike generic diagramming tools, Json Canvas leverages an open, JSON-based format, ensuring files are portable, editable, and compatible with automation and version control systems.

How to Get Started

To begin using Json Canvas, you’ll typically interact with the skill through Claude Code or compatible environments that support skill plugins. The basic workflow involves creating or editing a .canvas file using a structured JSON schema.

Example:

Creating a Simple Canvas File

Below is an example of a minimal .canvas file with two nodes and one connecting edge:

{
  "nodes": [
    {
      "id": "node-1",
      "type": "text",
      "text": "Start",
      "x": 100,
      "y": 100
    },
    {
      "id": "node-2",
      "type": "text",
      "text": "End",
      "x": 400,
      "y": 100
    }
  ],
  "edges": [
    {
      "id": "edge-1",
      "fromNode": "node-1",
      "toNode": "node-2"
    }
  ]
}

Steps to create a canvas:

1. Define your nodes with unique id values, types, and positions (x, y).
2. If relevant, create edges to link nodes via their id.
3. Save your JSON content as a file with a .canvas extension.
4. Open the file in Obsidian or any compatible canvas viewer.

For automation, the Json Canvas skill provides commands or code snippets to add, edit, or remove nodes and edges programmatically.

Key Features

Json Canvas supports a range of features to facilitate the creation of rich, interactive canvases:

Node Types

• Text Nodes: Contain Markdown-formatted text.
• File Nodes: Reference local files or attachments.
• Link Nodes: Point to external URLs.
• Group Nodes: Visual containers grouping other nodes together.

Node Attributes

Each node supports attributes such as:

• id: Unique identifier (string)
• type: Node type (text, file, link, group)
• text/url/file: Node content
• x, y: Canvas position coordinates
• Additional optional metadata (color, size, style)

Edge Attributes

Edges establish connections between nodes:

• id: Unique identifier
• fromNode: Source node id
• toNode: Target node id
• Optional attributes for labeling or styling

Groups and Layering

• Groups: Nodes of type: group can visually encapsulate other nodes, aiding layout and organization.
• Z-Index: The order of nodes in the array determines their layering—first node is bottom-most, last is top-most.

Practical Example:

Adding a Group Node

{
  "nodes": [
    {
      "id": "group-1",
      "type": "group",
      "x": 50,
      "y": 50,
      "width": 600,
      "height": 300
    },
    {
      "id": "node-3",
      "type": "text",
      "text": "Grouped Note",
      "x": 100,
      "y": 100,
      "parent": "group-1"
    }
  ],
  "edges": []
}

Best Practices

• Use Unique IDs: Ensure every node and edge has a unique id to avoid conflicts and ensure proper linking.
• Leverage Grouping: Use group nodes to organize related content and improve canvas readability.
• Maintain Readable JSON: Format and comment your JSON for maintainability, especially in collaborative projects.
• Version Control: Store .canvas files in version control systems (e.g., Git) for traceability and rollback.
• Validate Structure: Adhere to the JSON Canvas Spec 1.0 to ensure compatibility with all supporting tools.
• Incremental Edits: When modifying large canvases, make changes incrementally and validate each step to avoid data loss.

Important Notes

• File Extension: Only files with the .canvas extension are recognized by Obsidian and similar tools.
• Spec Compliance: Always check for updates to the JSON Canvas specification for compatibility and feature support.
• Application Support: While Obsidian is the primary consumer, other tools may interpret the .canvas format differently—test cross-application behavior as needed.
• Performance: Large canvas files with many nodes and edges may impact performance in some viewers; optimize layout and minimize redundancy.
• Backup Regularly: Visual canvases can be critical documents—regularly back up your .canvas files to prevent data loss.

By following these guidelines and leveraging the capabilities of Json Canvas, users can unlock powerful visual workflows within Obsidian and beyond, automating and enriching their knowledge management and project planning processes.