Graph Drawing Application

An interactive 2D graph drawing tool built with Rust and raylib. Create nodes, edges, and labels; customize colors and sizes; and save/load your graphs.

See this blog post for explanation.

Building and Running

Prerequisites

• Rust toolchain (install via rustup.rs)

Build and Run

# Build the project
cargo build

# Run the application
cargo run

For better performance:

cargo run --release

Usage

Interface

The app has a toolbar on the left (180 pixels wide) with mode buttons and a color palette. The main canvas is where you draw your graph.

Modes

Click a mode button to select it. The selected mode is highlighted.

Mode	Description
Add Node/Label	Left-click to add a node; Right-click to add a label (prompts for text)
Add Undir Edge	Click two nodes to create an undirected edge between them
Add Dir Edge	Click two nodes to create a directed edge (with arrow) between them
Change Color	Click on a node, label, or edge to change its color to the selected color
Change Size	Left-click to increase size/thickness; Right-click to decrease
Move	Click and drag nodes or labels to move them
Delete	Click on a node, label, or edge to delete it
Lights Out	Puzzle game - click a node to toggle it and its neighbors

Color Palette

Click a color in the toolbar to select it. The selected color is indicated by a white border.

Keyboard Shortcuts

• ESC - Cancel text input
• ENTER - Confirm text input

Interactions

• Hover over nodes, labels, or edges to highlight them
• When creating edges, click the first node, then click the second node
• The app shows which node to select when creating edges

Graph Data

Graphs are saved in a simple text format:

• NODE id x y radius color_hex
• LABEL id x y font_size color_hex text
• EDGE id source target type thickness alpha color_hex

The data folder contains two examples of the graph's data.

Project Structure

src/
├── main.rs      # Entry point and main loop
├── app.rs       # App state and UI rendering
├── graph.rs     # Graph data structures
├── mode.rs      # Mode trait and implementations
├── theme.rs     # Theme colors
└── utils.rs     # Utility functions

Lights Out Game

The Lights Out mode is a puzzle game where:

• Yellow nodes represent lights that are ON
• Black nodes represent lights that are OFF

Goal: Turn all lights OFF (make all nodes black)

How to play:

1. Play it in light mode
2. Create nodes and connect them with edges in the graph
3. Click "Lights Out" to start the game
4. Click any node with left mouse button to toggle it and all its neighbors
5. Press right mouse button to show solution (where the nodes to click is marked in red)

The game automatically converts all edges to undirected and sets up the initial state when activated.

Settings

The application loads settings from settings.json in the project root. All fields are optional - if omitted, default values are used.

Field	Type	Default	Description
ui_font_size	i32	16	Font size for UI elements
node_label_font_size	i32	16	Font size for node labels
node_radius	f32	30.0	Default radius of nodes
edge_thickness	f32	2.0	Default thickness of edges
is_dark_mode	bool	true	Enable dark mode UI theme
is_show_number	bool	true	Show node ID numbers on nodes

Example settings.json:

{
  "ui_font_size": 20,
  "node_label_font_size": 25,
  "node_radius": 5.0,
  "edge_thickness": 2.0,
  "is_dark_mode": false,
  "is_show_number": false
}