### Install JsonCanvas Gem

Source: https://github.com/ongaeshi/json_canvas/blob/master/README.md

Instructions for installing the JsonCanvas gem using Bundler or directly via RubyGems. This is the first step to using the library in a Ruby project.

```bash
gem 'json_canvas'

$ bundle install

$ gem install json_canvas
```

--------------------------------

### Save and Load Canvas in Ruby

Source: https://github.com/ongaeshi/json_canvas/blob/master/README.md

Provides code examples for saving the current state of a JSONCanvas object to a file and loading a canvas from a JSON file. This enables persistence of the canvas data.

```ruby
require 'json_canvas'

# Assuming 'jc' is a populated JsonCanvas object

# Save to file
jc.save("sample.canvas")

# Load from file
loaded_canvas = JsonCanvas.parse(File.read("sample.canvas"))
```

--------------------------------

### Create a New JSON Canvas Instance

Source: https://context7.com/ongaeshi/json_canvas/llms.txt

Initializes an empty JSON Canvas object, serving as the root container for all nodes and edges. This is the starting point for building a new canvas programmatically. The canvas object provides access to its nodes and edges arrays.

```ruby
require 'json_canvas'

# Create a new canvas
jc = JsonCanvas.create

# Canvas starts empty
puts jc.to_json
# Output: {"nodes":[],"edges":[]}

# Access nodes and edges arrays
puts jc.nodes  # => []
puts jc.edges  # => []
```

--------------------------------

### Initialize and Add Text Nodes in Ruby

Source: https://github.com/ongaeshi/json_canvas/blob/master/README.md

Demonstrates how to initialize a new JSONCanvas object and add basic text nodes. Customization options for text nodes, such as ID, position, size, content, and color, are also shown.

```ruby
require 'json_canvas'

jc = JsonCanvas.create

text_node = jc.add_text(text: "Hi")

custom_text = jc.add_text(id: "unique_id", x: 50, y: 100, width: 200, height: 50, text: "Hello World!", color: "2")
```

--------------------------------

### Create and Connect Nodes with Edges in Ruby

Source: https://github.com/ongaeshi/json_canvas/blob/master/README.md

Illustrates the process of creating nodes and then connecting them using edges. This includes defining the source and target nodes, as well as customizing edge properties like color, label, and arrow styles.

```ruby
require 'json_canvas'

jc = JsonCanvas.create
start = jc.add_text(id: "START", text: "start")
goal = jc.add_text(id: "GOAL", x: 400, text: "goal")
jc.add_edge(id: "edge1", fromNode: start.id, toNode: goal.id)
jc.add_edge(id: "edge2", fromNode: start.id, fromSide: "top", fromEnd: "arrow", toNode: goal.id, toSide: "bottom", toEnd: "arrow", color: "2", label: "HELLO")
```

--------------------------------

### Add Link Node to Canvas

Source: https://context7.com/ongaeshi/json_canvas/llms.txt

Creates a web link node on the canvas, allowing embedding of external URLs. This method allows specifying the URL, ID, position, dimensions, and color. Default dimensions are 400x400 and a default URL is provided if none is specified.

```ruby
require 'json_canvas'

jc = JsonCanvas.create

# Add link to documentation
docs_link = jc.add_link(
  id: "spec-link",
  x: 0,
  y: 0,
  url: "https://jsoncanvas.org/spec/1.0/"
)
puts docs_link.type  # => "link"
puts docs_link.url   # => "https://jsoncanvas.org/spec/1.0/"

# Add link with custom size
api_link = jc.add_link(
  id: "api-docs",
  x: 450,
  y: 0,
  width: 600,
  height: 300,
  url: "https://api.example.com/docs",
  color: "1"
)

puts jc.to_json
# Output: {"nodes":[{"id":"spec-link","x":0,"y":0,"width":400,"height":400,"type":"link","url":"https://jsoncanvas.org/spec/1.0/"},{"id":"api-docs","x":450,"y":0,"width":600,"height":300,"color":"1","type":"link","url":"https://api.example.com/docs"}],"edges":[]}
```

--------------------------------

### Add Styled Group to Canvas

Source: https://context7.com/ongaeshi/json_canvas/llms.txt

Adds a group node with a background image and specified styling to the canvas. The background can be a URL or path, and backgroundStyle controls how it's repeated. Returns the created group object.

```ruby
require 'json_canvas'

jc = JsonCanvas.create

styled_group = jc.add_group(
  id: "styled-section",
  x: 550,
  y: 0,
  width: 400,
  height: 400,
  label: "Resources",
  background: "/assets/pattern.png",
  backgroundStyle: "repeat"
)

puts styled_group.background        # => "/assets/pattern.png"
puts styled_group.background_style  # => "repeat"

puts jc.to_json
```

--------------------------------

### Add Advanced Node Types in Ruby

Source: https://github.com/ongaeshi/json_canvas/blob/master/README.md

Shows how to add different types of nodes beyond text, including file nodes, link nodes, and group nodes. Each node type can be initialized with specific attributes relevant to its function.

```ruby
require 'json_canvas'

jc = JsonCanvas.create

file_node = jc.add_file(file: "path/to/file")
link_node = jc.add_link(url: "https://example.com")
group_node = jc.add_group(label: "Test Group")
```

--------------------------------

### Save Canvas to File

Source: https://context7.com/ongaeshi/json_canvas/llms.txt

Writes the canvas content as a JSON file to the specified path. This file can be directly opened in compatible applications like Obsidian. The function also supports parsing a JSON file back into a JsonCanvas object.

```ruby
require 'json_canvas'

jc = JsonCanvas.create

# Build a flowchart
start = jc.add_text(id: "start", text: "User Login")
validate = jc.add_text(id: "validate", x: 300, text: "Validate Credentials")
success = jc.add_text(id: "success", x: 600, y: -50, text: "Dashboard")
failure = jc.add_text(id: "failure", x: 600, y: 50, text: "Error Message")

jc.add_edge(id: "e1", fromNode: "start", toNode: "validate")
jc.add_edge(id: "e2", fromNode: "validate", toNode: "success", label: "Valid")
jc.add_edge(id: "e3", fromNode: "validate", toNode: "failure", label: "Invalid", color: "1")

# Save to file
jc.save("login-flow.canvas")

# Verify save
puts File.exist?("login-flow.canvas")  # => true
puts File.read("login-flow.canvas") == jc.to_json  # => true

# Load in another session
loaded = JsonCanvas.parse(File.read("login-flow.canvas"))
puts loaded.nodes.length  # => 4
puts loaded.edges.length  # => 3
```

--------------------------------

### Add File Node to Canvas

Source: https://context7.com/ongaeshi/json_canvas/llms.txt

Inserts a file reference node into the canvas, suitable for embedding or linking to external files like documents or images. It accepts a file path and an optional subpath for deep linking within files. Default dimensions are 400x400.

```ruby
require 'json_canvas'

jc = JsonCanvas.create

# Basic file node
doc_node = jc.add_file(
  id: "readme",
  x: 0,
  y: 0,
  file: "docs/README.md"
)
puts doc_node.type  # => "file"
puts doc_node.file  # => "docs/README.md"

# File with subpath (link to specific heading)
section_node = jc.add_file(
  id: "installation",
  x: 450,
  y: 0,
  file: "docs/README.md",
  subpath: "#installation"
)
puts section_node.subpath  # => "#installation"

puts jc.to_json
# Output: {"nodes":[{"id":"readme","x":0,"y":0,"width":400,"height":400,"type":"file","file":"docs/README.md"},{"id":"installation","x":450,"y":0,"width":400,"height":400,"type":"file","file":"docs/README.md","subpath":"#installation"}],"edges":[]}
```

--------------------------------

### Add Edge Between Nodes

Source: https://context7.com/ongaeshi/json_canvas/llms.txt

Connects two nodes with an edge. Requires 'fromNode' and 'toNode' IDs. Optional parameters include 'fromSide', 'toSide', 'fromEnd', 'toEnd' for positioning and arrow styles, 'color', and 'label'.

```ruby
require 'json_canvas'

jc = JsonCanvas.create

# Create nodes to connect
start_node = jc.add_text(id: "START", x: 0, y: 0, text: "Start")
process_node = jc.add_text(id: "PROCESS", x: 300, y: 0, text: "Process")
end_node = jc.add_text(id: "END", x: 600, y: 0, text: "End")

# Simple edge (defaults: fromSide="right", toSide="left")
jc.add_edge(
  id: "edge1",
  fromNode: start_node.id,
  toNode: process_node.id
)

# Fully customized edge with arrows and label
jc.add_edge(
  id: "edge2",
  fromNode: process_node.id,
  fromSide: "right",
  fromEnd: "arrow",
  toNode: end_node.id,
  toSide: "left",
  toEnd: "arrow",
  color: "2",
  label: "Complete"
)

puts jc.to_json
```

--------------------------------

### Add Text Node to Canvas

Source: https://context7.com/ongaeshi/json_canvas/llms.txt

Appends a text node to the canvas. This method supports default values for position and size, and allows for customization of ID, dimensions, content, and color. It automatically generates a unique ID if one is not provided.

```ruby
require 'json_canvas'

jc = JsonCanvas.create

# Add text with defaults (auto-generated ID)
simple_text = jc.add_text(text: "Hello World")
puts simple_text.id     # => "a1b2c3d4e5f6g7h8" (auto-generated 16-char hex)
puts simple_text.width  # => 250
puts simple_text.height # => 60

# Add fully customized text node
custom_text = jc.add_text(
  id: "title-node",
  x: 100,
  y: 50,
  width: 300,
  height: 80,
  text: "Project Overview",
  color: "2"  # Color preset (1-6)
)

puts jc.to_json
# Output: {"nodes":[{"id":"...","x":0,"y":0,"width":250,"height":60,"type":"text","text":"Hello World"},{"id":"title-node","x":100,"y":50,"width":300,"height":80,"color":"2","type":"text","text":"Project Overview"}],"edges":[]}
```

--------------------------------

### Add Group Node to Canvas

Source: https://context7.com/ongaeshi/json_canvas/llms.txt

Adds a group node to the canvas, used for visually organizing and containing other nodes. This method allows for defining a label for the group, its position, dimensions, and optional background styles.

```ruby
require 'json_canvas'

jc = JsonCanvas.create

# Simple labeled group
section_group = jc.add_group(
  id: "section-1",
  x: 0,
  y: 0,
  width: 500,
  height: 300,
  label: "Authentication Flow"
)
puts section_group.type   # => "group"
puts section_group.label  # => "Authentication Flow"
```

--------------------------------

### Serialize Canvas to JSON String in Ruby

Source: https://github.com/ongaeshi/json_canvas/blob/master/README.md

Demonstrates how to convert a JSONCanvas object into its JSON string representation using the `to_json` method. This is useful for saving the canvas data or transmitting it.

```ruby
require 'json_canvas'

# Assuming 'jc' is a JsonCanvas object populated with nodes and edges
jc_json_string = jc.to_json

# Example output:
# '{"nodes":[{"id":"START","x":0,"y":0,"width":250,"height":60,"type":"text","text":"start"},{"id":"GOAL","x":400,"y":0,"width":250,"height":60,"type":"text","text":"goal"}],"edges":[{"id":"edge1","fromNode":"START","toNode":"GOAL","fromSide":"right","toSide":"left"},{"id":"edge2","fromNode":"START","toNode":"GOAL","fromSide":"top","fromEnd":"arrow","toSide":"bottom","toEnd":"arrow","color":"2","label":"HELLO"}]}'
```

--------------------------------

### Serialize Canvas to JSON

Source: https://context7.com/ongaeshi/json_canvas/llms.txt

Serializes the current state of the canvas, including all nodes and edges, into a JSON string that conforms to the JSONCanvas 1.0 specification. This JSON can be parsed by other tools or applications.

```ruby
require 'json_canvas'

jc = JsonCanvas.create
jc.add_text(id: "note1", text: "First note")
jc.add_text(id: "note2", x: 300, text: "Second note")
jc.add_edge(id: "link", fromNode: "note1", toNode: "note2")

json_output = jc.to_json
puts json_output

# Parse JSON in other tools or applications
require 'json'
parsed = JSON.parse(json_output)
puts parsed["nodes"].length  # => 2
puts parsed["edges"].length  # => 1
```

--------------------------------

### Parse Existing JSON Canvas Data

Source: https://context7.com/ongaeshi/json_canvas/llms.txt

Deserializes a JSON string representing a JSON Canvas document into a Canvas object. This allows for the reconstruction, inspection, and modification of existing canvas data. The parsed object retains all node and edge information.

```ruby
require 'json_canvas'

# Parse existing canvas JSON
json_string = '{"nodes":[{"id":"node1","x":0,"y":0,"width":250,"height":60,"type":"text","text":"Hello"}],"edges":[]}'
canvas = JsonCanvas.parse(json_string)

# Access parsed nodes
node = canvas.nodes.first
puts node.id      # => "node1"
puts node.text    # => "Hello"
puts node.type    # => "text"

# Modify and re-export
node.text = "Updated text"
puts canvas.to_json
# Output: {"nodes":[{"id":"node1","x":0,"y":0,"width":250,"height":60,"type":"text","text":"Updated text"}],"edges":[]}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.