Using the editor
The Mapaflow editor is an interactive canvas where you can build process diagrams by dragging and connecting nodes. This guide shows you all its features.
Editor areas
Node panel (left)
Contains all available node types. Drag any of them onto the canvas to add it to the diagram.
Canvas (centre)
The main workspace. Here you place nodes, connect them with edges and organise the process flow.
Properties panel (right)
When you select a node or edge, its editable properties appear: label, description, hyperlinks and style.
Top toolbar
Quick access to: save, undo/redo, version history, export and back to dashboard.
Basic operations
Add a node
- 1Find the node type in the left panel.
- 2Drag the node to the desired position on the canvas.
- 3Release the mouse button to place it.
Connect two nodes
- 1Hover over the source node until blue connection points appear on its edges.
- 2Click and drag from a connection point to the target node.
- 3Release when the target node is highlighted.
Edit a node
- 1Click the node to select it.
- 2The properties panel (right) will show its attributes.
- 3Edit the label, description or add hyperlinks. Changes are reflected in real time.
Move nodes
- 1Click and drag the node to its new position.
- 2To move several at once, select them with Ctrl + click and then drag any of them.
Delete elements
- 1Select the node or edge you want to delete.
- 2Press the Delete or Backspace key.
- 3You can also use the context menu (right-click) → "Delete".
Undo / Redo
- 1Use Ctrl + Z to undo the last change.
- 2Use Ctrl + Y or Ctrl + Shift + Z to redo.
- 3Undo/redo buttons are also in the top toolbar.
Zoom and navigation
- 1Mouse wheel or trackpad pinch to zoom.
- 2Click and drag on the canvas background to pan.
- 3Double-click on the background to fit all nodes in view.
Context menu
Right-click any node or edge to access the context menu. From there you can:
Hyperlinks on nodes
Each node can have one or more associated hyperlinks. This lets you link directly to external resources such as Google Drive documents, ERP pages, manuals or any URL.
- 1Select the node you want to add a link to.
- 2In the properties panel, find the "Hyperlinks" field.
- 3Click "Add link" and enter the URL and a descriptive label.
- 4Save the diagram. The node will show a visual indicator that it has links.
- 5Viewers (VISUALIZADOR role) can click the node to open the links.
Bulk editing
When you have several nodes of the same type and want to change their style or properties simultaneously, use the bulk editing panel:
Multiple selection
Hold Ctrl while clicking several nodes, or draw a selection rectangle by dragging on the canvas background.
Bulk editing panel
With multiple nodes selected, the properties panel will show common options: change colour, label or type.
Apply changes
Changes are applied to all selected nodes simultaneously.
Version history
Every time you save the diagram a new version is created. You can view the full history and restore any previous version.
- 1Click the history icon in the editor's top toolbar.
- 2The versions panel will open with a chronological list of changes.
- 3Click any version to preview its state.
- 4If you want to restore that version, click "Restore". A new version will be created with the previous state.
Access by role
| Role | View | Edit | Save | Export | History |
|---|---|---|---|---|---|
| ADMIN | ✓ | ✓ | ✓ | ✓ | ✓ |
| CREADOR | ✓ | ✓ | ✓ | ✓ | ✓ |
| VISUALIZADOR | ✓ | — | — | ✓ | — |