Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Aston2710/mc-modeler/llms.txt

Use this file to discover all available pages before exploring further.

The canvas is the central workspace of MC Modeler. Built on bpmn-js v18, it renders a fully interactive BPMN 2.0 diagram where you can drag elements, draw connections, resize containers, and model complex processes — all inside the browser with no installation required.

​
Layout Overview

The editor is organized into four main areas that work together: 
┌──────────────────────────────────────────────────────────────┐
│  TOOLBAR  [Logo] [Menus] ── [Undo][Redo] [ES|EN] [☀] [Save] │
├──────────[Diagram Tabs ×]──────────────────────────────────┤
│  PALETTE  │                                  │  PROPERTIES   │
│  (left)   │        C A N V A S               │   (right)     │
│  ~215 px  │     (dot-grid background)        │   ~280 px     │
│           │                        [minimap] │               │
├───────────┴──────────────────────────────────┴───────────────┤
│  STATUS BAR  [● Saved] [85%] [2 tabs] [● 1 error]  [BPMN 2.0]│
└──────────────────────────────────────────────────────────────┘

Palette Panel

Fixed on the left (~215 px). All 37 BPMN elements organized by category. Collapsible with the ◁ button to maximize canvas space.

Canvas Area

The central modeling surface powered by bpmn-js. Dot-grid background, minimap in the bottom-right corner, zoom 25 %–400 %.

Properties Panel

Fixed on the right (~280 px). Shows the editable properties of the selected element, or a “No selection” message. Collapsible.

Status Bar

Bottom strip showing: save state, current zoom level, number of open tabs, validation summary, and a keyboard-shortcuts link.

​
Diagram Tabs

MC Modeler supports multiple diagrams open simultaneously. A tab bar sits just below the toolbar and above the canvas area.
  • Each tab shows the diagram icon + truncated name + × to close.
  • The active tab has a colored accent indicator.
  • Double-click a tab label to rename the diagram inline.
  • Click + at the right end of the tab bar to open an additional diagram.
  • Up to 5–6 tabs are shown before an overflow menu appears.
Opening a new diagram or switching tabs clears the undo/redo history for the previously active diagram. The history is per-tab.

​
Navigation

​
Panning

ActionResult
Space + dragPan the canvas
Drag on empty canvas areaPan the canvas
Middle-mouse dragPan the canvas

​
Zooming

ActionResult
Mouse wheelZoom in / zoom out
+ button in toolbarZoom in one step
− button in toolbarZoom out one step
Fit-to-screen button (⤢)Fit all elements in view
Ctrl + 0Reset zoom to 100 %
The canvas supports a zoom range of 25 % to 400 %. The current zoom level is always visible in the status bar.

​
Selection

Click any element on the canvas to select it. The element highlights with a blue selection ring, and its properties appear in the right panel.
With multiple elements selected you can:
  • Move them together by dragging any selected element.
  • Delete all with Delete or Backspace.
  • Copy with Ctrl+C, cut with Ctrl+X, paste with Ctrl+V.

​
Moving and Resizing Elements

Moving: Click and drag any element to reposition it. When snap-to-grid is enabled, movement snaps to the configured grid size. Smart alignment guides appear while dragging to help align with neighboring elements. Resizing: Pools, lanes, sub-processes, groups, and phases show resize handles on their edges. Drag any handle to resize. Tasks, events, and gateways have fixed sizes set in ElementSizes.ts:
Element typeDefault size
Task / Sub-process90 × 60 px
Gateway50 × 50 px
Event36 × 36 px
Pool (expanded)600 × 250 px
Lane400 × 100 px
Data object36 × 50 px
Text annotation100 × 30 px
Group300 × 300 px
Phase200 × 250 px

​
Grid and Snap

Grid and snap settings live in User Preferences (UserPreferences.gridEnabled, gridSize, snapToGrid).

Grid sizes

Choose 5 px, 10 px, or 20 px.

Visual grid

Toggle the dot-grid background display independently of snap.

Snap to grid

Elements snap to the nearest grid point when moved or resized.

​
Undo / Redo

MC Modeler maintains a full action history per diagram session, supporting a minimum of 100 undo steps.
ShortcutAction
Ctrl + ZUndo last action
Ctrl + Shift + ZRedo
Ctrl + YRedo (alternative)
Undo and redo buttons are also available in the toolbar (Undo2 / Redo2 icons) and in the Edit menu inside the menu bar. Both buttons are disabled when there is no history to traverse. The history is cleared when you create a new diagram or open an existing one.

​
Canvas Toolbar

The toolbar above the canvas provides quick access to the most common operations:
ButtonAction
UndoUndo last change
RedoRedo last undone change
Zoom in (+)Increase zoom
Zoom out (−)Decrease zoom
[85%]Current zoom level (click to type a custom value)
Fit to screen (⤢)Fit all content in the viewport
Validate (✓)Run BPMN validation on-demand
SaveImmediately persist the diagram

​
Context Pad

When you select an element on the canvas, a small floating context pad appears next to it with contextual actions:
1

Connect

Click the arrow icon on the context pad, then click another element to create a sequence flow (or message flow if the target is in a different pool).
2

Delete

Click the trash icon to delete the selected element and any flows attached to it.
3

Change type

Click the wrench/morph icon to change the element to a different BPMN type within the same category (e.g., turn a plain task into a user task).
4

Image / Link

On supported elements, the context pad also exposes an image-link button for attaching library images, and a comment button for adding inline comments.
You can also right-click any element to access these actions through the browser context menu.

​
Minimap

A minimap is displayed in the bottom-right corner of the canvas. It shows a scaled-down overview of the entire diagram, with a shaded rectangle indicating the current viewport position. Click or drag inside the minimap to navigate quickly to any part of a large diagram.

​
Auto-Save

MC Modeler saves your work automatically so you never lose progress.
  • 20-second timer — a timer starts (with up to 5 s of random jitter to prevent write collisions in collaborative sessions) whenever unsaved changes are detected. It resets each time a new change arrives before the timer fires.
  • Immediately on tab switch — when you switch away from a dirty diagram, its contents are persisted in the background before the next diagram loads.
  • On Ctrl+S — triggers an immediate save at any time.
The status bar on the bottom left shows one of three states:
IndicatorMeaning
🟢 Saved 12 s agoNo pending changes
🟡 Unsaved changesChanges not yet persisted
⏳ Saving…Save in progress
In v1.0, diagrams are stored entirely in the browser using localforage (IndexedDB with a localStorage fallback). No server is involved. Clearing your browser data will erase your diagrams — export important work as .bpmn files for safekeeping.

​
Keyboard Shortcuts Overview

The most frequently used shortcuts are listed below. For the complete reference, open the Keyboard Shortcuts modal with Ctrl + ? or click the Shortcuts ? link in the status bar.
ShortcutAction
Ctrl + ZUndo
Ctrl + Shift + ZRedo
Ctrl + ASelect all
Ctrl + C / X / VCopy / Cut / Paste
Delete / BackspaceDelete selected elements
Ctrl + SSave immediately
Ctrl + 0Reset zoom to 100 %
Space + dragPan canvas
EscapeDeselect / cancel action
Ctrl + ?Open keyboard shortcuts modal
On macOS, replace Ctrl with Cmd for all shortcuts above.
For a full list including element-movement arrow keys and zoom steps, see Keyboard Shortcuts.

Build docs developers (and LLMs) love

Get started for freeTalk to us