Overview

Graphy is a graph visualization and editor that allows you to create, edit, and export graphs using JSON or GraphViz DOT format.

Usage Tips

Creating Nodes

• Right-click on empty space to create a new node with the selected emoji
• Click the green + zone (bottom-left corner) to create a node there
• Drag an emoji from the emoji palette and drop it on the canvas to create a node
• Click the emoji palette button to expand and select different emojis

Connecting Nodes

• Right-click on a node and select "Connect" from the context menu, then click another node to connect them
• Drag a node close to another node (within the orbit radius) - the node will snap to the orbit, and releasing will toggle the connection
• Click anywhere else while in connect mode to cancel

Moving Nodes

• Drag any node to move it around the canvas
• Nodes automatically reposition to prevent overlap and edge crossings
• Hover over a node to pause its automatic repositioning
• Use the Auto Layout checkbox in the header to enable/disable automatic repositioning (setting is saved)

Deleting Nodes

• Right-click on a node and select "Remove" from the context menu
• Drag a node to the red × zone (bottom-right corner) to remove it

Editing Node Properties

• Left-click on a node to open the properties panel on the right
• Edit properties using the JSON editor in the side panel
• Special properties affect visualization:
• name: Displayed above node
• icon: Emoji (📊, 🔧, etc.) or image URL displayed on the node
• scale: Multiplier for node size (default: 1)

Sessions

Your work is automatically saved in sessions. Use the sidebar to:

• Switch between sessions
• Create new sessions with the + button
• Duplicate existing sessions
• Delete sessions you no longer need

Export Format

JSON Format

{
  "nodes": [
    {
      "id": "node_1",
      "x": 100,
      "y": 100,
      "properties": {
        "name": "Example Node",
        "icon": "📊",
        "scale": 1
      }
    }
  ],
  "connections": {
    "format": "edges",
    "data": [
      { "source": "node_1", "target": "node_2" }
    ]
  }
}

Connection formats:

• edges: Array of {source, target} objects
• matrix: Adjacency matrix (2D array)
• list: Adjacency list (array of arrays)

GraphViz DOT Format

graph G {
  node [shape=circle];
  "node_1" [label="Example Node",pos="100,100!"];
  "node_2" [pos="200,200!"];
  "node_1" -- "node_2";
}

Import Format

Import JSON files with the same structure as the export format. Any valid JSON with nodes and connections data will work.