imgraph is a tool I created to rapidly create illustrations within the node and span design guidelines. A photograph is used as the base, and a graph consisting of nodes and spans is constructed over the photo, highlighting connections within the photo.

The software was rapidly developed leveraging ChatGPT: I had a working prototype within 2 hours, and an additional 3 hours fine-tuning features and presentation.

GitHub github.com/bobbymeyer/imgraph

Controls

Create New Node:

Left-click on an empty area.

Delete Node:

Right-click on a node.

Drag Node:

Left-click and drag a node.

Toggle Node Color:

Double-click on a node.

Resize Node:

Click on a node and press `+` to increase size.
Click on a node and press `-` to decrease size.
Click on a node and press `*` to double size.
Click on a node and press `/` to halve size.

Create Connection:

Ctrl + left-click on a node, then on another node.

Switch Line Color:

Click "Switch to Black" or "Switch to White" button.

Save Image:

Click "Save" button.

Upload Image:

Select an image file using the file input.