Canvas tools & toolbar
PinPole uses a vertical floating toolbar on the canvas (React Flow). Tools apply to the diagram view, not to the browser chrome.
Selection and view
| Control | Purpose |
|---|---|
| Pointer / selection | Default mode: select nodes, drag them, open handles to wire edges. |
| Pan | Hand tool: drag the canvas background to move the viewport without selecting nodes. |
Switch between modes from the toolbar so you do not accidentally move nodes when you mean to pan.
Export and appearance
| Control | Purpose |
|---|---|
| Export PNG | Renders the diagram to a PNG for slides or reviews. |
| Theme (palette) | Toggles light vs dark canvas chrome to match your preference. |
| Auto organize | Runs layout tidying to reduce overlapping nodes and crossed edges (best-effort). |
AI Architect
| Control | Purpose |
|---|---|
| Sparkles (AI Architect) | Opens the AI Architect side panel: describe an architecture in natural language, optionally with diagram upload, and stream generated nodes and edges onto the canvas. |
Details: AI Architect chat.
Annotations: text and group frames
| Control | Purpose |
|---|---|
| Text (Type icon) | Adds a text annotation node at the center of the viewport. Double-click to edit; Enter commits a line, Shift+Enter for multi-line in edit mode. |
| Rectangle (group frame) | Adds a resizable dashed frame with a title (default label “Group”). Used to group regions of the diagram visually. Double-click the title to edit. Resize with handles when the frame is selected. |
The frame uses a dashed border in one of several accent colors (blue, green, orange, purple, gray). Frames sit behind service nodes (z-index) so they read as boundaries, not interactive services.
Group frames are documentation shapes only. They do not create VPCs, subnets, or security boundaries in simulation — see Canvas capabilities for containment modeling status.
Help
| Control | Purpose |
|---|---|
| Help | Opens the in-app Help & Tutorial modal (drag services, connect nodes, simulate, command palette). |
Global shortcut: ⌘K (Mac) / Ctrl+K (Windows) opens the command palette for quick actions across the app.
Simulate
The main Simulate control is anchored below the canvas (not on the vertical toolbar). Use it to open the simulation panel, configure traffic, and run live or batch runs.
See Run simulation.