IDE Usage Guide

Phograph is a macOS application for building programs visually. This guide covers the IDE’s windows, menus, and workflows.

The Workspace

The main window has four areas:

Sidebar (left) — the Class Browser. Shows sections, classes, methods, and cases. Click a method to open it on the canvas. Toggle with Cmd+0.
Canvas (center) — the dataflow graph editor. Nodes and wires live here.
Inspector (right) — shows properties of the selected node (name, value, type, annotations). Toggle with Cmd+Option+0.
Console (bottom) — output from log and inspect nodes, plus run/debug status. Toggle with Cmd+Y.

File Menu

Command	Shortcut	Description
New Project	`Cmd`+`N`	Create an empty project
Open Project…	`Cmd`+`O`	Open a `.phograph.json` file
Browse Examples…	`Cmd`+`Shift`+`E`	Open the Example Browser
Save Project	`Cmd`+`S`	Save to the current file
Save Project As…	`Cmd`+`Shift`+`S`	Save to a new file
Export as PDF…	`Cmd`+`Shift`+`P`	Export current graph as vector PDF
Export as SVG…	—	Export current graph as SVG

Edit Menu

Command	Shortcut	Description
Delete	`Delete`	Remove selected nodes
Select All	`Cmd`+`A`	Select every node on the canvas
Duplicate	`Cmd`+`D`	Duplicate selected nodes

View Menu

Command	Shortcut	Description
Zoom In	`Cmd`+`=`	Increase canvas zoom
Zoom Out	`Cmd`+`-`	Decrease canvas zoom
Fit to Window	`Cmd`+`1`	Zoom to fit all nodes
Toggle Sidebar	`Cmd`+`0`	Show/hide the Class Browser
Toggle Inspector	`Cmd`+`Option`+`0`	Show/hide the Inspector
Toggle Console	`Cmd`+`Y`	Show/hide the Console

Run Menu

Command	Shortcut	Description
Run	`Cmd`+`R`	Run the selected method at full speed
Debug	`Cmd`+`Shift`+`R`	Run with the debugger attached
Stop	`Cmd`+`.`	Stop the current execution
Continue	`Cmd`+`\`	Resume from a breakpoint
Step Over	`Cmd`+`'`	Execute one node, skip method calls
Step Into	`Cmd`+`;`	Execute one node, enter method calls
Clear Console	`Cmd`+`K`	Clear the console output

Libraries Menu

Command	Shortcut	Description
Manage Libraries…	`Cmd`+`Shift`+`L`	Open the Library Manager
Refresh Library Catalog	—	Re-scan installed libraries

Working with the Canvas

Adding nodes

Double-click empty space (or press Tab) to open the node picker. Type to search for primitives, methods, or class operations.
Drag from the node picker onto the canvas to place a node.

Connecting wires

Click an output pin (bottom of a node), then click an input pin (top of another node) to create a wire.
A single output can fan out to multiple inputs.
Each input accepts at most one wire.

Selecting and moving

Click a node to select it. Hold Shift to add to the selection.
Drag to move selected nodes.
Right-click for the context menu (delete, duplicate, toggle breakpoint).

The Class Browser

The sidebar lists your project’s structure as a tree: Section > Class > Method > Case. Click any method or case to view it on the canvas.

Universal methods (not attached to a class) appear directly under the section. The entry point is typically the main method.

The Inspector

When a node is selected, the Inspector shows its editable properties:

Name / Label — the node’s display name.
Value — for constant nodes, the literal value.
Type — the node type (primitive, method call, constant, etc.).
Annotations — control annotations like nextCaseOnFailure.
Input/Output counts — for input/output bars.

The Example Browser

Open with Cmd+Shift+E. Examples are organized by category (Math, String Processing, Data Structures, etc.). Click one to load it into the workspace.

Running a Program

Select a method in the Class Browser (usually main).
Press Cmd+R to run.
Output appears in the Console. The status bar shows success or error.

Debugging

Right-click a node and choose Toggle Breakpoint. A red dot appears on the node.
Press Cmd+Shift+R to start a debug session.
Execution pauses at breakpoints. The paused node is highlighted yellow.
Use Step Over, Step Into, or Continue to advance.
Wire values are shown as labels during debugging (trace overlay).
Press Cmd+. to stop at any time.

Exporting Graphs

You can export the current graph as a vector graphic for use outside the IDE.

Export as PDF (Cmd+Shift+P) — saves a vector PDF of the current graph. Nodes, wires, and labels are fully scalable and look sharp at any zoom level.
Export as SVG — saves a scalable vector graphic suitable for embedding in web pages, documentation, or presentations.

Both formats preserve the exact visual layout of the canvas: node colors, pin positions, and Bezier wire curves.

Saving and Loading

Projects are saved as .phograph.json files. The JSON format stores sections, classes, methods, cases, nodes, and wires. You can version-control these files with git.