Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/CspmIT/centinela-front/llms.txt

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

The Diagram Editor is a powerful Konva-based canvas tool that lets you create interactive process flow diagrams with real-time data visualization overlays.

​
Overview

Create custom diagrams by combining images, lines, text, and live sensor data to build comprehensive visual representations of your water treatment processes.

Visual Design

Drag-and-drop interface with extensive drawing tools and pre-built components.

Live Data

Bind InfluxDB variables to diagram elements for real-time monitoring.

Interactive

Zoom, pan, select, and transform elements with intuitive controls.

Export & Share

Save diagrams and share with your team for operational monitoring.

​
Drawing Tools

Access comprehensive drawing capabilities through the sidebar toolbar:

​
Line Tools

Click to set start point, click again to complete. Right-click or ESC to cancel.
Line Styling Options:
  • Color selection (HEX color picker)
  • Stroke width (1-20px)
  • Dash patterns (solid, dashed, dotted)
  • Arrow indicators
{
  color: '#3b82f6',      // Line color
  strokeWidth: 5,        // Line thickness
  dash: [10, 5],         // Dash pattern
  lineCap: 'round'       // End cap style
}

​
Image Elements

1

Select Image Tool

Click the image icon in the sidebar to open the image selector.
2

Choose from Library

Browse the built-in library of water treatment equipment icons and symbols.
3

Place on Canvas

Images appear at default position (150x, 150y) and can be dragged to desired location.
4

Transform

Select image to show transform handles for resizing and rotation.
Image Library Categories:
  • Pumps and motors
  • Tanks and vessels
  • Valves and actuators
  • Sensors and instruments
  • Pipes and connectors
  • Generic process symbols

​
Text Elements

Double-click on the canvas or use the text tool to add labels, annotations, and descriptions to your diagram.
Text Styling:
  • Font size (8-72px)
  • Color selection
  • Font style (normal, bold, italic)
  • Real-time preview
{
  fontSize: 16,
  fill: '#000000',
  fontStyle: 'normal',     // 'normal' | 'bold' | 'italic'
  text: 'Your label here',
  x: 200,
  y: 150
}

​
Variable Overlays

Bind live sensor data to any diagram element:
1

Select Element

Click an image or text element to select it.
2

Open Variable List

Click “Assign Variable” or use the floating variable tool.
3

Choose Variable

Select from available InfluxDB variables in your system.
4

Configure Display

Set tooltip position (center, top, bottom, left, right) and visibility.
Tooltip Position Panel: 
{
  dataInflux: {
    id: 15,
    name: 'tank_level',
    unit: 'm³',
    varsInflux: 'tank_a'
  },
  position: 'Centro',        // Display position
  show: true,                // Visibility toggle
  maxValue: 100,             // For percentage calculation
  colorOn: '#00ff00',        // Boolean true color
  colorOff: '#ff0000',       // Boolean false color
  binaryBit: 0               // Bit position for binary values
}

​
Canvas Controls

Pan

Enable pan mode to drag the canvas view. Click and drag to reposition.

Zoom In

Increase canvas scale by 5% per click for detailed editing.

Zoom Out

Decrease canvas scale by 5% per click for overview.

​
Element Management

Selection:
  • Click elements to select (blue transform border appears)
  • Drag to reposition
  • Use corner handles to resize
  • Rotation handles for orientation adjustments
Layering:
  • Send to Back: Move selected element behind others
  • Bring to Front: Move selected element above others
Layer order affects visibility when elements overlap. Use layer controls to manage stacking order.
Deletion:
  • Select element and press DELETE key
  • Deleted items are tracked for database synchronization

​
Top Navigation Bar

The top toolbar provides quick access to common operations:
  • Save: Store diagram to database with metadata
  • Clear: Remove all elements (with confirmation)

​
Diagram Management

​
Saving Diagrams

1

Click Save

Click the save button in the top navigation bar.
2

Enter Name

Provide a descriptive name for your diagram in the modal dialog.
3

Database Storage

System saves all elements, metadata, and variable bindings.
4

Automatic Redirect

After successful save, redirects to diagram list view.
Saved Data Structure: 
{
  elements: [/* All images, lines, text, polylines */],
  circles: [/* Circle markers */],
  diagramMetadata: {
    id: null,                    // Auto-assigned on creation
    title: 'Process Overview',   // User-provided name
    backgroundColor: '#ffffff',  // Canvas background
    backgroundImg: ''            // Optional background image
  },
  deleted: {
    lines: [],
    texts: [],
    images: [],
    polylines: []
  }
}

​
Editing Existing Diagrams

When opening a saved diagram (via URL parameter ?id=123):
  1. System loads all elements from database
  2. Canvas reconstructs the complete diagram
  3. Variable bindings are restored
  4. Edit and save updates the existing record
New elements added during editing are tracked separately to optimize database updates. Only changed elements are synchronized.

​
Keyboard Shortcuts

KeyAction
ESCCancel current drawing operation or deselect
ENTERFinish polyline drawing
DELETERemove selected element
Right ClickCancel line drawing or finish polyline

​
Advanced Features

​
State Management

The diagram editor uses custom React hooks for organized state management:
  • useDiagramState: Elements, selection, deletion tracking
  • useDrawingTools: Line, polyline, and image drawing logic
  • useTooltipManager: Variable overlay configuration
  • useTextTools: Text creation and editing

​
Performance Optimization

Efficient Rendering

Konva canvas uses WebGL for smooth rendering of complex diagrams.

Selective Updates

Only modified elements are synchronized with the database.

​
Background Customization

Set custom background colors or images for your diagrams: 
diagramMetadata: {
  backgroundColor: '#f0f0f0',
  backgroundImg: '/path/to/floorplan.png'
}

​
Use Cases

Create P&IDs (Piping and Instrumentation Diagrams) showing the complete water treatment process with pumps, tanks, valves, and flow directions.
Design facility layouts with equipment positions and overlay real-time operational status on each component.
Build custom visual dashboards that combine schematic representations with live sensor data for at-a-glance monitoring.
Develop annotated diagrams for training purposes, showing process flows and key measurement points.

​
Best Practices

Always save your work frequently. While the system tracks changes, unsaved diagrams will be lost if you navigate away.
Recommended workflow:
  1. Plan your diagram layout before starting
  2. Use the zoom controls to work at comfortable detail levels
  3. Assign variables after completing the visual layout
  4. Test variable displays in view mode
  5. Use consistent naming for easy identification
  6. Document complex diagrams with text annotations

​
Viewing Diagrams

View Mode

Learn about viewing saved diagrams with live data updates in the Real-Time Monitoring section.

Build docs developers (and LLMs) love

Get started for freeTalk to us