BlockWerk Guides

Canvas Navigation & Connections

The canvas is your main workspace. It supports infinite panning and zooming, drag-and-drop block placement, and two connection routing styles.

Navigating the Canvas

  • Pan: Hold Space and drag, or drag with the middle mouse button.
  • Zoom in / out: Ctrl+Scroll, or use Ctrl+Plus / Ctrl+Minus.
  • Reset zoom: Ctrl+0 resets to 100% and re-centres the view.
  • Minimap: The minimap in the corner shows the full extent of your diagram. Click or drag inside it to jump to any part of the canvas instantly.

Adding Blocks

  • Open the Palette with Ctrl+K or the palette button on the left.
  • Drag a block from the palette onto the canvas.
  • Or double-click a block in the palette to place it at the centre of the current view.

Drawing Connections

  1. Hover over an output port (right side of a block) until it highlights.
  2. Click and drag to an input port (left side of another block).
  3. Release to complete the connection.

To delete a connection, click on it to select it and press Del.

Connection Routing Styles

Switch between routing styles in the View menu or the toolbar:

  • Bezier: Smooth curved lines. Fast to render and easy to read in simple diagrams.
  • Elbow: Orthogonal (right-angle) lines that automatically route around blocks.

Elbow routing recalculates the path whenever you move a block, ensuring connections never overlap other blocks.

Selecting and Editing Blocks

  • Click a block to select it. Its properties appear in the right panel.
  • Rubber-band select: Click and drag on an empty area to select multiple blocks at once.
  • Ctrl+Click: Add individual blocks to the current selection.
  • Ctrl+A: Select all blocks on the current canvas level.

Aligning Blocks

With multiple blocks selected, use the Align menu or the toolbar alignment buttons to align left, right, top or bottom edges, or distribute blocks evenly along an axis.

Auto-Layout

Auto-layout (toolbar or canvas right-click menu) automatically arranges all blocks on the current canvas level into a clean left-to-right flow. Useful for tidying up imported or manually assembled diagrams.

Block Context Menu

Right-click any block to access quick actions:

  • Rotate: Rotates the block 90 degrees clockwise.
  • Duplicate: Creates a copy next to the original.
  • Delete: Removes the block and all its connections.
  • View Documentation: Opens the block's manual page.
  • Group into Subsystem: Wraps selected blocks into a new Subsystem.
Tip: Use Elbow routing for complex diagrams with many blocks. Switch to Bezier for simple control loops where the visual clarity of curved lines is preferred.

Simulate in BlockWerk

Interactive sandbox directly in your browser — zero installation, WASM-powered.

Simulate in BlockWerk →