Creating Flowcharts

OpenCharts flowcharts are built from four standard node types (terminal, process, decision, data) connected by labeled edges on an infinite canvas. Drag nodes from the palette, click-drag between handles to connect them, and use the toolbar for undo, zoom, snap-to-grid, auto-layout, and export.

HelpBy OpenCharts TeamPublished Updated

Node Types

OpenCharts provides four standard flowchart node types, each with a specific meaning:

Terminal

Oval/Rounded

Marks the start or end of a process. Every flowchart should have at least one start and one end terminal.

Use for "Start", "End", "Begin", "Finish"

Process

Rectangle

Represents a single step or action in the process. This is the most commonly used node type.

Use for actions like "Calculate total", "Send email", "Update record"

Decision

Diamond

Represents a branching point where a decision must be made. Typically has two or more outgoing paths.

Use for yes/no questions, conditions, or choices

Data

Parallelogram

Represents input or output operations. Use when data enters or leaves the system.

Use for "Read input", "Display result", "Save to database"

Using the Editor

The Canvas

The canvas is your workspace. It's an infinite scrollable area where you place and connect nodes. You can pan by clicking and dragging on empty space, and zoom using your mouse wheel or the zoom controls.

The Node Palette

The node palette on the left side of the editor contains all available node types. To add a node to your flowchart:

  1. 1Find the node type you want in the palette
  2. 2Click and drag it onto the canvas
  3. 3Release to place the node

The Toolbar

The toolbar at the top provides quick access to common actions:

Undo

Reverse last action

Redo

Restore undone action

Zoom

Adjust view size

Grid

Toggle snap grid

Auto Layout

Arrange nodes

Delete

Remove selected

Working with Nodes

Selecting Nodes

Click on a node to select it. Hold Shift and click to select multiple nodes. You can also click and drag to create a selection box.

Moving Nodes

Drag selected nodes to reposition them. When the grid is enabled, nodes will snap to the grid for easier alignment.

Editing Labels

Double-click on a node to edit its label. Press Enter to confirm or Escape to cancel.

Styling Nodes

Select a node and use the properties panel on the right to change colors, borders, and other visual properties.

Copy & Paste

Use ⌘/Ctrl + C to copy and ⌘/Ctrl + V to paste selected nodes.

Creating Connections

Connecting Nodes

Connections (edges) show the flow between nodes. To create a connection:

  1. 1

    Hover over a node

    Small circular handles will appear on the edges of the node

  2. 2

    Click and drag from a handle

    A connection line will follow your cursor

  3. 3

    Drop onto another node

    Release on a handle of the target node to complete the connection

Tip:For decision nodes, you can add labels to connections (like "Yes" and "No") by clicking on the edge and using the edge properties panel.

Fast Editing

The editor is built for speed — most diagramming happens without ever leaving the canvas:

Drag a connection to empty canvas

Drop a connection on empty space to open a quick shape picker — the new node is created and connected in one step. Press Enter to repeat the source node's type, or 1–6 to pick.

Floating selection toolbar

Select nodes to get an on-canvas toolbar with colors, change-shape, align and distribute (multi-select), lock, duplicate, and delete. Change shape swaps the node type while keeping its label, color, and connections.

Bend connections with waypoints

Select an edge and drag the midpoint dot to bend it exactly where you want. Drag existing waypoints to move them, double-click to remove, and drag the label anywhere along the path.

Auto-route around shapes

Set a connection's type to Auto-route in the edge panel and it finds a clean orthogonal path around every node — parallel connections spread apart, crossings draw a small hop (line jump), and routes update live as you drag nodes. Dragging its midpoint converts it to manual waypoints.

Build flows from the keyboard

With a node selected, press Tab to create a connected node continuing the flow direction, or Enter to create a sibling from the same parent.

Find on canvas (⌘F)

Search node labels, descriptions, and edge labels; matches are centered and selected as you cycle through them with Enter / Shift+Enter.

Wide zoom range

Zoom from 5% for a bird's-eye overview of huge diagrams up to 400% for pixel-precise detail work.

Swimlanes

Swimlane pools organize cross-functional processes into labeled lanes — one per team, role, or system. Add a swimlane from the left toolbox, then drop steps into lanes: they attach to the pool and move with it.

  • Double-click the title or a lane header to rename it
  • Drag lane dividers to resize lanes; drag the pool edge to lengthen it
  • Hover the pool for add-lane, remove-lane, and orientation controls
  • Ask the AI for a “swimlane diagram” or start from the Swimlane Process Map template

Auto Layout

The Auto Layout feature automatically arranges your nodes for better readability. This is especially useful after:

  • AI extraction creates many nodes at once
  • You've added several nodes and connections
  • Your flowchart has become messy or overlapping

Click the Auto Layout button in the toolbar to organize your flowchart. You can choose between horizontal (left-to-right) and vertical (top-to-bottom) layouts.

Best Practices

  • ✓Start and end clearly. Always include Terminal nodes for start and end points
  • ✓Use consistent flow direction. Stick to left-to-right or top-to-bottom
  • ✓Keep labels concise. Use short, clear descriptions for nodes
  • ✓Label decision paths. Always label Yes/No or True/False on decision branches
  • ✓Avoid crossing lines. Reposition nodes to minimize line crossings
Getting StartedAI Extraction