Json Canvas

Json Canvas is a community skill for creating and editing JSON Canvas files used in Obsidian, covering node creation, edge connections, group management, layout algorithms, and canvas rendering for visual knowledge mapping.

What Is This?

Overview

Json Canvas provides tools for programmatically creating and modifying canvas files that follow the JSON Canvas specification used by Obsidian and compatible applications. It covers node creation that generates text, file, link, and group nodes with configurable dimensions and positions, edge connections that define directional relationships between nodes with optional labels and colors, group management that organizes related nodes into named groups with visual boundaries, layout algorithms that compute node positions using force-directed or hierarchical arrangement strategies, and canvas rendering that produces visual representations of the canvas structure. The skill enables developers to generate visual knowledge maps and diagram structures in the JSON Canvas format.

Who Should Use This

This skill serves Obsidian users automating canvas creation from data sources, developers building tools that output visual diagrams, and knowledge management practitioners generating relationship maps programmatically.

Why Use It?

Problems It Solves

Manual canvas creation in Obsidian becomes impractical for large relationship maps with dozens of interconnected nodes. Importing structured data into visual canvas format requires understanding the JSON Canvas specification. Node positioning by hand produces cluttered layouts that are difficult to read. Canvas files created manually lack consistent spacing and alignment across node groups.

Core Highlights

Node builder creates typed canvas nodes with configurable content and dimensions. Edge connector defines relationships between nodes with direction and labels. Group organizer clusters related nodes within named visual boundaries. Layout engine computes optimal node positions for readable arrangement.

How to Use It?

Basic Usage

import json
import uuid

class CanvasBuilder:
  def __init__(self):
    self.nodes = []
    self.edges = []

  def add_text_node(
    self,
    text: str,
    x: int = 0,
    y: int = 0,
    width: int = 250,
    height: int = 120
  ) -> str:
    node_id = str(
      uuid.uuid4()[:8])
    self.nodes.append({
      'id': node_id,
      'type': 'text',
      'text': text,
      'x': x, 'y': y,
      'width': width,
      'height': height})
    return node_id

  def add_edge(
    self,
    from_id: str,
    to_id: str,
    label: str = None
  ):
    edge = {
      'id': str(
        uuid.uuid4()[:8]),
      'fromNode': from_id,
      'toNode': to_id}
    if label:
      edge['label'] = label
    self.edges.append(edge)

  def export(
    self,
    path: str
  ):
    canvas = {
      'nodes': self.nodes,
      'edges': self.edges}
    with open(
        path, 'w') as f:
      json.dump(
        canvas, f,
        indent=2)

Real-World Examples

class GridLayout:
  def __init__(
    self,
    columns: int = 4,
    node_w: int = 250,
    node_h: int = 120,
    gap: int = 40
  ):
    self.cols = columns
    self.w = node_w
    self.h = node_h
    self.gap = gap

  def arrange(
    self,
    items: list[str]
  ) -> list[dict]:
    nodes = []
    for i, text\
        in enumerate(items):
      col = i % self.cols
      row = i // self.cols
      x = col * (
        self.w + self.gap)
      y = row * (
        self.h + self.gap)
      nodes.append({
        'text': text,
        'x': x, 'y': y,
        'width': self.w,
        'height': self.h})
    return nodes

  def from_data(
    self,
    items: list[str],
    output: str
  ):
    builder = (
      CanvasBuilder())
    arranged = (
      self.arrange(items))
    for node in arranged:
      builder\
        .add_text_node(
          node['text'],
          node['x'],
          node['y'],
          node['width'],
          node['height'])
    builder.export(output)

Advanced Tips

Use force-directed layout algorithms for canvas files with many interconnected nodes to minimize edge crossings automatically. Add color coding to nodes and edges using the color property to visually categorize different types of content. Generate canvas files from markdown link structures to visualize note relationships.

When to Use It?

Use Cases

Generate an Obsidian canvas visualizing relationships between notes in a vault. Create a project dependency diagram from structured data in JSON Canvas format. Build a visual knowledge map from a database of concepts and their connections.

Related Topics

JSON Canvas specification, Obsidian, knowledge mapping, graph visualization, diagramming, node layout, and visual thinking tools.

Important Notes

Requirements

Python with JSON support for canvas file creation. Obsidian or compatible application for viewing generated canvas files. Understanding of the JSON Canvas specification for valid file structure.

Usage Recommendations

Do: validate generated canvas files against the JSON Canvas schema before opening in Obsidian. Use consistent node dimensions within groups for visual alignment. Add edge labels to clarify relationship types between nodes.

Don't: generate canvases with overlapping nodes which makes content unreadable. Create excessively large canvases that exceed Obsidian rendering performance limits. Use random node positioning without a layout algorithm.

Limitations

JSON Canvas is a relatively simple format that does not support advanced diagram features like conditional styling or interactive behavior. Layout algorithms produce approximate positioning that may need manual adjustment for complex diagrams. Canvas file compatibility is limited to applications that implement the JSON Canvas specification.