Folder: process-mapper/ Colour: Indigo #6366f1 Languages: 🌐 20 (en, af, fr, de, es, pt-BR, nl, it, pl, ru, id + hi, bn, ta, te, mr, kn, ml, gu, pa)

Visual flowchart builder for documenting processes and workflows. Drag-and-drop, snap-to-grid canvas with a slide-in detail panel, structured swimlanes, free-form groups, gradient fills, autosave, user-definable step types managed from a Settings page, a rich right-click menu (create / change / connect / copy formatting), PNG / PDF / Mermaid export, bookmarkable per-process URLs, and full native multi-language support across 20 locales.

Multi-lingual: Every visible string in this module — toolbar, sidebar, detail panel labels, dropdowns, placeholders, autosave status, export modal, the lot — resolves through the i18n layer. Switch locale in System → Preferences and the whole module re-renders in the chosen language. See Architecture → i18n for how the layer works.

• Dot-grid background — 20px grid
• Snap-to-grid on every movement so layouts stay tidy without manual alignment

The toolbar, the detail-panel Type dropdown and the right-click Create new… / Change to… submenus are all rendered from the process_step_types lookup table — managed from Process Mapper → Settings. Each type is a name + a shape + a default colour.

Four built-in types ship out of the box and are protected from deletion (but can be renamed and recoloured):

Twelve shape primitives are available when defining a custom type — rectangle, rounded, pill, circle, diamond, parallelogram, trapezoid, hexagon, document, cylinder, cloud, subroutine. Geometry lives in assets/css/process-mapper.css as size-independent [data-shape="..."] rules; the cloud shape uses an objectBoundingBox SVG clipPath, the subroutine uses inset pseudo-element bars. Canvas steps carry data-shape="<key>" and data-type="<slug>" so the renderer is fully data-driven.

Settings page at process-mapper/settings/ matches the tickets-settings layout exactly (shared .tab-content, .section-header, .add-btn, .table-action-btn, .status-badge, .modal / .btn primitives from inbox.css). Add / edit / reorder / deactivate any user-defined type. The add/edit modal has a 12-shape visual picker plus a colour input, and the four API endpoints (get / save / delete / reorder_step_types.php) mirror the Tasks-module lookup pattern. Deactivating a type hides it from the toolbar and the right-click menu but keeps it in the detail-panel Type dropdown (marked with a *) so existing steps that reference it stay editable.

process_steps.type stores the slug as free-text — no FK — so the four built-in slugs (process, decision, start, document) line up with legacy data and no migration was needed when the palette became configurable.

• Drag from a step's edge handles to draw an arrow to another step
• Optional text labels on connectors — double-click to edit (e.g. "Yes" / "No" on decision branches)
• Connectors are stored as {from_step_id, to_step_id} only — endpoints are recomputed from step coordinates at every render, so they re-route automatically when steps move (including across lane reorders)

• Ctrl+click to toggle individual steps in/out of the selection
• Rubber-band drag across the dot-grid background — and over lane backgrounds, so it still works on processes that fill the canvas with swimlanes
• Ctrl+A to select all
• Once selected, dragging any one step moves the whole group together; arrow keys nudge them all by one grid unit

Right-clicking any step opens a dense context menu grouped into four sections by separator. showContextMenu() enables/disables and shows/hides items based on current state.

Per-step shortcuts

Type & connectors

Clipboard & formatting

Destructive

placeClonedStep(data, x, y) is the shared helper behind Paste / Duplicate — it picks a non-overlapping spot starting at the requested coords and seeds lane_id / group_id from where the new step lands. cloneStepData(step) captures the cloneable shape (type / label / description / url / size / colour / gradient, but not position / connectors / temp IDs).

The menu clamps to the viewport, the submenus flip leftward when there isn't room on the right, and the menu dismisses on outside click / Escape / canvas scroll / window blur. Right-clicking a step no longer starts a drag, so opening the menu never nudges the step.

• Arrow keys nudge selected steps by one grid unit (20px)
• Delete / Backspace deletes the current selection (step, connector, group, or lane)

Steps carry an optional URL (process_steps.url, VARCHAR(500) NULL) that turns into a small chain-link badge in the step's top-right corner. The badge is an <a target="_blank" rel="noopener noreferrer"> so clicks open in a new tab; mousedown and click are stopPropagation-ed on the badge so they don't trip the step's own drag handlers. Set via the right-click Link to URL… prompt or the detail panel's Link (URL) input. The .is-exporting chrome-hider strips the badge from PNG / PDF exports.

Free-form sticky notes that float above the canvas (z-index 4), independent of any step. They have their own table:

process_annotations (
  id, process_id, text, x, y, width, height,
  color    DEFAULT '#fff59d',   -- sticky yellow
  color2   NULL                 -- optional gradient second stop
)

• Add via the step's right-click Add note item — the new note lands just above and to the right of the clicked step and the detail panel slides in with the text area focused
• Move by dragging the note body; resize via the bottom-right corner handle; double-click the body to re-focus the text area
• Detail panel: dedicated Note body with text / colour / position / size (the four bodies in the panel container are now Step / Group / Lane / Annotation, swapped by selection)
• Delete by selecting + pressing Delete / Backspace
• Persistence: saved in the same transaction as steps / connectors / groups / lanes. Defensive try/catch in save.php and get.php so older installs that haven't run db_verify still round-trip the rest of the diagram
• Cross-save selection: after autosave reloads with fresh real IDs, the selected annotation is re-found by stable identity (x, y, width, height) so the panel stays on it without flicker

Stickies don't participate in connectors or lane / group ownership — they're pure visual annotation.

Click any item to open a context-aware panel — but only on click-release, not mousedown. Picking a step up to drag it deliberately doesn't flash the panel in; the panel only opens at mouseup if dragging.moved is false. Ctrl+click selection-toggle is unaffected (that path doesn't start a drag).

Four bodies share the same panel container, swapped by the type of the selection:

• Step: label, type (any from the user-configurable palette), colour + optional gradient, description, link URL, x/y position, and a list of incoming/outgoing connectors with editable labels and a delete button per connector
• Group: label, colour + optional gradient, x/y, width/height
• Annotation (sticky note): text, colour + optional gradient, x/y, width/height — see Sticky-note annotations above
• Lane: label, colour + optional gradient, height, display order

The panel survives autosave — when the canvas is reloaded after a save, the previously-selected item is re-found by stable identity (step x/y, group x/y/w/h, lane display_order, annotation x/y/w/h) and the panel re-populates without flicker. If the item was deleted in the meantime, the panel closes gracefully.

Optional labelled coloured rectangles that sit behind steps. Useful for marking a phase ("Resolution", "Triage"), a team's area of responsibility, or any free-form cluster.

• Click Group in the toolbar to drop one at the canvas centre (240×160, pale blue dashed border by default)
• Drag to move, drag the bottom-right corner handle to resize, double-click to rename
• Groups own their contents via a nullable group_id on process_steps:
  • Drop a step inside a group → step gets the group's id
  • Drag the group → contained steps move with it
  • Resize the group so a step falls outside → that step's group_id clears on mouseup
  • Delete the group → contained steps survive untouched but lose their group_id
• When groups overlap, the smallest by area wins for ownership (so an inner group inside a wider one claims the steps that visually fall inside it)
• Groups can sit inside a lane and will move with the lane on reorder/resize/delete, derived from each group's vertical centre at the start of the lane drag

Horizontal bands stacked top-to-bottom across the canvas, with a left-edge vertical label header showing each lane's name.

• Click Lane in the toolbar to add a 180px-tall band at the bottom of the stack
• Reorder by dragging the lane's left-edge header up/down — lanes snap between slots as the cursor crosses each neighbour's midline. Every step (and group) belonging to a reordering lane comes along, anchored to its lane's band via a yWithinLane snapshot taken before the swap
• Resize by dragging the bottom edge (the divider). Snaps to the 20px grid so the divider and its contents move in lockstep. Lanes below shift to make room, and steps/groups in those lanes follow so they stay anchored to their own band
• Delete by selecting (click the header) and pressing Delete — contained steps lose lane_id but keep their position, lanes below shift up to close the gap, their contents follow
• Step ownership: every step has a nullable lane_id. After any step drag, lane_id auto-assigns based on the step's vertical centre. At the start of any lane drag, an autoAssignAllStepLanes() pass tags every step with its current lane so the upcoming reorder/resize math operates on a fully-tagged set (catches steps that pre-existed the lanes)

Steps, groups, and lanes can render as a two-stop linear-gradient(135deg, color, color2) instead of a flat fill. Each shape's detail panel has a Gradient checkbox that reveals a second-colour picker (pre-seeded with a 40-unit darker shade of the primary colour, but you can pick anything). Null color2 = solid, matching pre-feature behaviour.

Toolbar toggle persists per-analyst via user_preferences (key process_mapper_autosave).

• When on: debounces a save ~2 seconds after the last edit (no wasted writes on an untouched diagram, no half-finished-drag captures)
• Status indicator beside the toggle cycles through ✓ Saved / Unsaved / Saving… / ⚠ Save failed — retry. Saving… is held visible for at least 400ms so it doesn't flash on fast saves
• The save fire defers itself while any drag is in progress so the user's in-flight drag never gets clobbered by a mid-drag reload
• Manual Save button and Ctrl+S still work in both modes

Toolbar Export button opens a chooser with three format tiles:

Captures the canvas at 2× resolution via vendored html2canvas (assets/js/vendor/html2canvas.min.js, 1.4.1), ideal for slides, screenshots and embedding in tickets/changes. File names slugify the process title (Incident triage → incident-triage.png).

Same capture wrapped onto an A4 page via vendored jsPDF (assets/js/vendor/jspdf.umd.min.js, 2.5.2). Portrait or landscape is auto-picked from the diagram's aspect ratio; proportional fit-to-page with a 24pt margin so big diagrams aren't stretched. Print-ready.

Generates Mermaid flowchart syntax ready to paste into any Markdown editor that supports it (GitHub READMEs, GitHub/GitLab wikis, Notion, Confluence, Obsidian, Mermaid Live Editor).

• flowchart LR direction so lanes-as-subgraphs stack vertically into proper horizontal swimlanes
• Each lane becomes a subgraph laneN["Label"] ... end block in display_order, with its steps nested inside
• Unlaned steps emit at the top level
• Each step's shape (not type name) decides the Mermaid syntax — so custom user-defined types map cleanly via their chosen shape: rectangle → ["label"], rounded → ("label"), pill → (["label"]), circle → (("label")), cylinder → [("label")], subroutine → [["label"]], diamond → {"label"}, hexagon → {{"label"}}, parallelogram → [/"label"/], trapezoid → [/"label"\]. Mermaid has no document or cloud primitive in classic syntax, so document → parallelogram and cloud → circle as the closest visual matches
• Connectors become --> arrows, gaining -->|"label"| when labelled — Mermaid resolves IDs across subgraph boundaries so cross-lane connectors render correctly
• Labels are HTML-entity-escaped (&, ", <, > → entities; \n → <br/>)
• Copy button uses the Clipboard API with a Ctrl-A → Ctrl-C fallback

For PNG/PDF the export rect is the bounding box of all steps + groups with 40px padding. When swimlanes are present the rect extends to x=0, y=0 so lane headers and the top of the first lane aren't cropped. During capture an .is-exporting class hides edit-time chrome (edge handles, selection rings, rubber-band, temp connector, empty-state placeholder, the dot-grid background) so the file shows what you'd want to share, not what you're editing.

.pm-canvas is a scroll container, so the capture pass temporarily expands its CSS width/height to fit the full content + sets overflow: visible (and pins the connectors SVG to the same dimensions) — without that, steps reachable only by scrolling sideways would be clipped by html2canvas's render bounds. All mutations are stashed and restored in finally.

Mermaid is lossy on visuals, faithful on structure: hand-placed positions, colours, gradients, and groups don't translate (Mermaid only has subgraphs, already used for lanes). PNG/PDF preserve everything visible.

Full persistence with a sidebar listing all saved processes. The save flow inserts lanes and groups first, builds laneIdMap and groupIdMap (oldTempId → realId) tables, then inserts steps with lane_id and group_id translated through those maps. Connectors translate from_step_id/to_step_id through a similar idMap for steps. After save, the canvas reloads to pick up the fresh real IDs — preserveDetail keeps the detail panel open across that reload (see Slide-in Detail Panel above).

Selecting a process from the sidebar (or creating a new one) updates the address bar to process-mapper/?id=<n> via history.pushState, so each open diagram has a copyable URL you can share or bookmark. Loading the page with ?id=N auto-opens that diagram once the sidebar list has loaded (silently no-ops if the id doesn't exist any more). Browser back / forward buttons step through previously-opened processes via a popstate handler that reloads whichever diagram the URL points at, or clears the canvas if ?id is gone. Deleting the currently-open process drops ?id from the URL. Same-URL pushState calls are no-ops, so the post-save reload (which re-opens the diagram to pick up real IDs in place of temp negatives) doesn't bloat the history stack.

The System → Demo Data importer includes a Process Mapper module with auto-laid-out flowcharts. The demo JSON omits step coordinates — a server-side layered-DAG layout pass assigns x/y on import so the imported processes look tidy without per-step coordinate authoring.