The canvas is the large drawing area on the right side of the screen. This is where you build your process flow diagram by placing and connecting nodes.
• Pan — Click and drag on an empty area to move around the canvas.
• Zoom — Scroll up/down with the mouse wheel to zoom in and out. Use the + / - buttons in the toolbar.
• Fit — Click the Fit button in the toolbar to fit the entire diagram into view.
A node is any element on the canvas — a box, shape, industrial symbol or image. Nodes represent steps, equipment or processes in your diagram.
An edge is a line connecting two nodes. Edges represent the flow or relationship between steps in your process.
1. Click a node type in the left panel (e.g. +Box) to add it to the canvas.
2. Switch to Connect tool and click two nodes to draw an edge between them.
3. Click Save to save your diagram to the cloud.
Click any node button in the left panel to add it to the center of the canvas. You can add as many nodes as needed.
• Box — Standard rectangular node. Use for general process steps.
• Text — Transparent text label. Use for annotations.
• Device — Orange-bordered box. Use for equipment or machines.
• Panel — Wide light box. Use for grouping or background labels.
• Circle / Ellipse — Round shapes for start/end or special steps.
• Diamond — Decision point (Yes/No branch).
• Triangle — General geometric shape.
• Arrow — Directional arrow shape.
• Pill — Rounded capsule shape. Use for start/end of flowchart.
Select a node and drag it to a new position. Enable Snap in the toolbar to align nodes to the grid automatically.
Click a node to select it. The properties panel appears at the bottom of the left sidebar:
• Label — The text shown inside the node.
• Fill — Background colour of the node.
• Border — Colour of the node outline.
• Text colour — Colour of the label text.
• Font size — Size of the label text in pixels.
• W / H — Width and height of the node in pixels.
• Radius — Corner rounding (0 = sharp corners).
Double-click any node to rename it directly.
Select a node — a rotate handle (✛) appears above it. Drag the handle to rotate the node freely.
Right-click any node for quick options:
• Rename — Edit the node label.
• Duplicate — Create a copy of the node.
• Bring to front / Send to back — Change the stacking order.
• Delete — Remove the node and all its edges.
Click the 📷 Image button to upload an image from your computer. The image is placed on the canvas and can be moved, resized and rotated.
1. Switch to the Connect tool in the toolbar.
2. Click the first node, then click the second node. An edge is drawn between them.
• Smooth — Curved bezier line (default).
• Straight — Direct straight line between nodes.
• Angle — Right-angle line (horizontal then vertical).
• Curved — Quadratic curve with an arc.
Click an edge to select it. The edge properties appear in the left sidebar:
• Label — Text shown on the edge (e.g. "yes", "no", "slurry").
• Color — Colour of the edge line.
• Width — Thickness of the edge line.
Double-click an edge to add or edit its label.
Click the edge to select it, then press Delete or Backspace.
• Undo — Ctrl+Z (or Undo button) — reverts the last action.
• Redo — Ctrl+Y (or Redo button) — reapplies a reverted action. Up to 50 steps are stored.
The default tool. Click nodes to select them, drag to move. Click empty canvas to deselect.
Click two nodes to draw an edge between them. The edge style is set by the last used style.
Toggle to show or hide the orange connection points on nodes. Useful when drawing edges to see where connections attach.
When enabled, nodes automatically align to an invisible 20px grid when moved. This keeps diagrams neat and aligned.
Hold Shift and click multiple nodes to select them together. Selected nodes are highlighted with a blue outline. You can then move them all at once or delete them together.
Select 2 or more nodes with Shift+click to reveal the Align panel in the left sidebar:
• ← Left / Right → / ↔ Center — align nodes horizontally.
• ↑ Top / ↓ Bottom / ↕ Middle — align nodes vertically.
• Distribute H / Distribute V — space nodes evenly.
In the left sidebar under Canvas, choose between Lines, Dots, or No grid background.
Scrolling the mouse wheel zooms in/out centred on your cursor position — not the centre of the canvas. This makes it easy to zoom into a specific area.
• Use + / - buttons or scroll the mouse wheel.
• Click Fit to fit the whole diagram into the visible canvas area.
The small preview in the bottom-right corner shows the full diagram. The orange rectangle shows your current view. Click the minimap to fit the view.
PfdLabs includes 35 isometric 3D industrial symbols across 5 categories, designed for mineral processing and metallurgical flowsheets.
1. Click Industrial Symbols in the left panel to expand it.
2. Filter by category or browse all symbols.
3. Click any symbol to add it to the canvas.
• Comminution — Jaw Crusher, Cone Crusher, Ball Mill, Rod Mill, HPGR, AG Mill.
• Classification — Hydrocyclone, Cyclone Cluster, Vibrating Screen, Linear Screen, Spiral Classifier, Trash Screen, Metal Detector.
• Separation — Flotation Cell, Column Flotation, Thickener, HR Thickener, Centrifugal, Jig, Shaking Table, Spiral Concentrator.
• Hydromet — Agitation Tank, Conditioning Tank, Buffer Tank, Carbon Column, Desorption Column, Filter Press, Drum Filter.
• Transport — Disc Filter, Magnetic Separator, Slurry Pump, Belt Conveyor, Screw Conveyor, Bucket Elevator, Vibrating Feeder, Air Compressor.
Industrial symbols can be moved, connected with edges, rotated and labelled just like regular nodes. Select a symbol and edit its label in the properties panel.
Exports the diagram as a PNG image with a white background, cropped tightly to the content. Free users get a watermark. Pro users get a clean export.
Exports as a scalable vector graphic. SVG files can be opened in Illustrator, Inkscape or any vector editor and scaled to any size without quality loss.
Exports as a PDF document. Available to Pro subscribers only.
Clicks the orange Save button or use Ctrl+S to save the diagram to your account. You can access saved diagrams from your Dashboard.
Free users can save up to 5 diagrams. Pro users have unlimited cloud saves.
Downloads the diagram as a .json file to your computer. This file can be loaded back into PfdLabs at any time using Load File. No limit on number of files.
Opens a .json file previously saved with Save File and loads it onto the canvas.
Clears the canvas and starts a fresh diagram. You will be asked to confirm before the canvas is cleared.
| Ctrl + Z | Undo last action |
| Ctrl + Y | Redo |
| Ctrl + S | Save diagram to cloud |
| Delete / Backspace | Delete selected node or edge |
| Escape | Deselect / cancel connect |
| Scroll wheel | Zoom in / out |
| Double-click node | Rename node |
| Double-click edge | Edit edge label |
| Right-click node | Context menu (rename, duplicate, delete...) |
| Shift + click | Add node to selection (multi-select) |
| Ctrl + D | Duplicate selected node |