Graphr

Welcome,

Categories & Connections

Node Category:

Node Shape:

Connection Type:

Appearance & Physics

Node Size: 12px

Link Distance: 100px

Node Force: -300

100%

Properties

Select a node to edit properties

Legend

Edit

Delete

Connect From

Remove Connection

Manage Categories

Edit Node

Title:

Category:

Shape:

Share Diagram

Make this diagram public

Public diagrams can be viewed by anyone and appear in the public gallery

Share URL:

Login

Username:

Password:

Register

Username: 3-30 characters, letters, numbers, and underscores only

Password: At least 6 characters

Confirm Password:

Graphr Help & Documentation

🚀 Getting Started

Register or Login
Create a new account or login to save your diagrams across devices.
Create Your First Node
Click "Add Node" button (it stays active), then click anywhere on the canvas to create nodes.
Connect Nodes
Click "Connect" button (it stays active), then click two nodes to connect them.
Save Your Work
Click "Save" to store your diagram. You can access it from any device by logging in.

📝 Basic Usage

Working Modes

Add Node - Click anywhere to create new nodes
Connect - Click two nodes to connect them (sticky mode)
Select - Click nodes/connections to select and edit them

Node Operations

Edit Node - Right-click → Edit, or double-click
Delete Node - Right-click → Delete, or select and press Delete
Move Nodes - Drag to reposition
Categories - Assign different colors and types to nodes

Connection Operations

Create Connection - In Connect mode, click source then target node
Remove Connection - Right-click connection → "Remove Connection"
Connection Types - Choose directed (→) or undirected (—) links

⚡ Advanced Features

Categories & Styling

Manage Categories - Create custom categories with colors
Legend - View all categories in the sidebar
Visual Organization - Use colors to group related concepts

Navigation & View

Zoom - Use +/- buttons or mouse wheel
Pan - Drag the background to move around
Reset View - Automatically fit all nodes in view

Force-Directed Layout

Automatic Positioning - Nodes arrange themselves based on connections
Physics Simulation - Realistic movement and spacing
Manual Override - Drag nodes to preferred positions

🌐 Sharing & Collaboration

Making Diagrams Public

Save your diagram first
Click the "Share" button
Check "Make this diagram public"
Copy the generated share URL
Send the URL to anyone you want to share with

Access Control

Private by Default - New diagrams are only visible to you
Public Sharing - Anyone with the URL can view public diagrams
Multi-Device - Login from any device to access your diagrams
Ownership - Only you can edit your diagrams

Diagram List Icons

🔒 - Private diagram (only you can see it)
🌐 - Public diagram (shareable via URL)

⌨️ Keyboard Shortcuts

`Delete` or `Backspace`	Delete selected node or connection
`Escape`	Cancel current operation / Clear selection
`Escape` (twice)	Exit current mode to Select mode

Pro Tips

Sticky Modes - Add Node and Connect modes stay active for multiple operations
Easy Connection Removal - Click connections to select them easily
Context Menus - Right-click for quick actions
Auto-Save Positions - Node positions are automatically saved