Diagram Configuration

The diagram builder allows you to create visual representations of your water treatment facility with live data overlays. Build process flow diagrams, equipment layouts, and system schematics that update in real-time.

Overview

Diagrams combine:

Background images or colors
Equipment icons and symbols
Lines and connections
Text labels
Live variable data overlays
Interactive tooltips

Creating a Diagram

Access Diagram Builder

Navigate to the diagram configuration module and create a new diagram.

Set Background

Configure the canvas background:

Solid color (backgroundColor)
Background image (backgroundImg)

Add Elements

Use the sidebar tools to add:

Images (equipment, icons)
Lines (pipes, connections)
Polylines (complex paths)
Text labels
Variable displays

Configure Variables

Assign InfluxDB variables to elements and configure display options.

Save Diagram

Provide a title and save. The diagram becomes available for viewing.

Canvas Tools

The diagram builder provides multiple drawing and editing tools:

Pan

tool

Click and drag to move around the canvas. Useful for large diagrams.Activation: Click pan icon or press and hold middle mouse button

Zoom

tool

Zoom in/out to view details or get overview.Controls:

Zoom In button (+)
Zoom Out button (-)
Mouse wheel scroll

Drawing Tools

Line

tool

Draw straight connections between two points.Usage:

Select line tool
Click start point
Click end point
Configure line style (color, width)

Polyline

tool

Draw multi-segment paths for complex piping routes.Usage:

Select polyline tool
Click each vertex point
Press Enter to finish or right-click
Press Escape to cancel

Text

tool

Add text labels to the diagram.Features:

Custom font size
Color selection
Bold/italic styling
Editable after placement

Image

tool

Place equipment icons and symbols.Available Images:

Pumps and motors
Tanks and vessels
Valves and actuators
Sensors and instruments
Piping components

Variable

tool

Add floating variable displays that show live data.Display Types:

Numeric values
Percentage bars
Boolean indicators
Binary bit status

Source Reference: /src/modules/DrawDiagram/views/DrawDiagram.jsx:25-118

Element Configuration

Image Elements

Images represent equipment and can display associated variable data.

const imageElement = {
  id: String(Date.now()),
  type: 'image',
  src: '/assets/img/Diagram/pump.png',
  x: 150,
  y: 150,
  width: 100,
  height: 100,
  draggable: true,
  dataInflux: {
    id: 42,                    // Variable ID
    name: "Pump_1_Flow",
    position: 'Centro',         // Top, Centro, Bottom
    show: true,
    maxValue: 100,             // For percentage displays
    booleanColors: {           // For boolean variables
      colorOn: '#00FF00',
      colorOff: '#FF0000'
    },
    binaryBit: 0               // For binary status displays
  }
}

Line Elements

Lines represent pipes, connections, or flows.

const lineElement = {
  id: String(Date.now()),
  type: 'line',
  points: [x1, y1, x2, y2],
  stroke: '#3b82f6',          // Color
  strokeWidth: 5,              // Width in pixels
  draggable: false
}

Line Style Options:

stroke

string

default:"#3b82f6"

Hexadecimal color code for the line

strokeWidth

number

default:5

Line thickness in pixels (1-20 recommended)

Polyline Elements

Polylines create complex paths with multiple segments.

const polylineElement = {
  id: String(Date.now()),
  type: 'polyline',
  points: [x1, y1, x2, y2, x3, y3, ...],  // Multiple vertices
  stroke: '#3b82f6',
  strokeWidth: 5,
  draggable: false
}

Source Reference: /src/modules/DrawDiagram/hooks/useDrawingTools.js

Text Elements

Text elements provide labels and annotations.

const textElement = {
  id: String(Date.now()),
  type: 'text',
  text: 'Main Feed Pump',
  x: 100,
  y: 50,
  fontSize: 16,
  fill: '#000000',            // Text color
  fontStyle: 'normal',        // 'normal', 'bold', 'italic'
  draggable: true
}

Text Style Options:

fontSize

number

default:16

Font size in pixels (8-72 recommended)

fill

string

default:"#000000"

Text color in hexadecimal

fontStyle

string

default:"normal"

Font style: normal, bold, or italic

Variable Data Overlay

Variables can be overlaid on diagram elements to show live values.

Position Options

Top
Centro (Center)
Bottom

Display variable value above the element.Best for: Tank levels, overhead indicators

Variable Display Types

Numeric Display

Shows the current numeric value with optional units.

dataInflux: {
  id: 42,
  name: "Flow_Rate",
  position: "Bottom",
  show: true
}

Displays: 45.2 L/min

Percentage Display

Shows value as a percentage of maximum.

dataInflux: {
  id: 15,
  name: "Tank_Level",
  position: "Centro",
  show: true,
  maxValue: 1000
}

Displays: 75% (if current value is 750)

Boolean Display

Color-coded indicator for on/off states.

dataInflux: {
  id: 23,
  name: "Pump_Status",
  position: "Top",
  show: true,
  booleanColors: {
    colorOn: '#00FF00',
    colorOff: '#FF0000'
  }
}

Displays: Green dot (ON) or Red dot (OFF)

Binary Bit Display

Shows status of a specific bit in a binary variable.

dataInflux: {
  id: 30,
  name: "Status_Register",
  position: "Centro",
  show: true,
  binaryBit: 3        // Monitor bit 3
}

Use Case: Monitoring individual flags in a status word

Source Reference: /src/modules/DrawDiagram/hooks/useTooltipManager.js:116

Diagram Metadata

Each diagram stores metadata for configuration:

const diagramMetadata = {
  id: null,                    // Set after first save
  title: 'Main Treatment Process',
  backgroundColor: '#ffffff',   // Canvas background color
  backgroundImg: ''            // Optional background image URL
}

Source Reference: /src/modules/DrawDiagram/views/DrawDiagram.jsx:50-55

Saving and Loading Diagrams

Save Diagram

const diagramToSave = {
  elements: elementsToSave,
  circles: [],                  // Circle markers (if any)
  diagramMetadata: {
    title: 'Process Diagram',
    backgroundColor: '#ffffff',
    backgroundImg: ''
  },
  deleted: {                    // Track deleted items for updates
    lines: [],
    texts: [],
    images: [],
    polylines: []
  }
}

await saveDiagramKonva(diagramToSave)

Element ID Handling:

const elementsToSave = elements.map(el => {
  const element = { ...el }
  // Remove IDs for new elements
  if (!diagramMetadata.id || newElementsIds.includes(el.id)) {
    delete element.id
  }
  return element
})

Source Reference: /src/modules/DrawDiagram/views/DrawDiagram.jsx:192-250

Load Diagram

await uploadCanvaDb(diagramId, {
  setCircles,
  setDiagramMetadata,
  setTool
})

Source Reference: /src/modules/DrawDiagram/views/DrawDiagram.jsx:372-387

Keyboard Shortcuts

Key	Action
Escape	Cancel current tool/operation
Delete	Delete selected element
Enter	Finish polyline drawing
Right-click	Cancel line/polyline or finish polyline

Implementation:

const handleKeyDown = (e) => {
  if (e.key === 'Escape') {
    setTool('')
    setTextPosition(null)
    if (isDrawingPolyline) {
      setIsDrawingPolyline(false)
      setPolylinePoints([])
    }
  }
  if (e.key === 'Enter' && isDrawingPolyline) {
    finishPolyline()
  }
  if (e.key === 'Delete' && selectedId) {
    handleDeleteElement(selectedId)
  }
}

Source Reference: /src/modules/DrawDiagram/views/DrawDiagram.jsx:287-317

Element Layering

Control the stacking order of diagram elements:

Bring to Front
Send to Back

Move selected element to the top layer.Use Case: Make important elements visible above pipes/lines

Controls: Available in the top navbar when an element is selected Source Reference: /src/modules/DrawDiagram/views/DrawDiagram.jsx:76-77

Canvas Controls

Zoom Controls

const handleZoomIn = () => {
  const scaleBy = 1.05
  setStageScale((prev) => prev * scaleBy)
}

const handleZoomOut = () => {
  const scaleBy = 1.05
  setStageScale((prev) => prev / scaleBy)
}

Source Reference: /src/modules/DrawDiagram/views/DrawDiagram.jsx:266-274

Undo Function

Remove the most recently added element:

const handleUndo = () => {
  if (elements.length === 0) {
    Swal.fire({
      icon: 'info',
      title: 'Nada para deshacer',
      text: 'No hay elementos en el diagrama.'
    })
    return
  }
  setElements((prev) => prev.slice(0, -1))
}

Undo only removes the last element. There is no redo functionality. Save frequently to preserve your work.

Source Reference: /src/modules/DrawDiagram/views/DrawDiagram.jsx:252-264

Best Practices

Diagram Organization

Create separate diagrams for different process areas
Use consistent icon styles across diagrams
Group related equipment visually
Maintain clear flow direction (left-to-right or top-to-bottom)

Line Routing

Use polylines for complex piping routes
Avoid crossing lines when possible
Use different colors for different media (water, chemicals, air)
Keep line widths proportional to actual pipe sizes

Variable Display

Show only critical variables on overview diagrams
Position displays to avoid overlap
Use consistent positioning (e.g., all flow rates at bottom)
Consider percentage displays for capacity metrics

Performance

Limit diagrams to 50-100 elements for optimal performance
Use background images sparingly (large files slow rendering)
Create detail diagrams for complex areas rather than one massive diagram

Troubleshooting

Elements Not Appearing

Possible Causes:

Element positioned outside visible canvas area
Element behind other elements (layer order)
Element color matches background

Solutions:

Use pan and zoom to search
Check element layer order
Select element from element list

Variable Data Not Updating

Checklist:

Variable exists and has data
Variable ID correctly assigned to element
Display position configured
show property is true

Debug: Check browser console for data fetch errors

Cannot Select Element

Causes:

Element not draggable (lines, polylines)
Another tool is active
Element behind non-draggable element

Solutions:

Press Escape to cancel active tool
Use layer controls to bring element forward
Click element edge/corner for better selection

Diagrams are rendered using Konva.js, a high-performance HTML5 canvas library. All drawing operations are hardware-accelerated for smooth interaction even with complex diagrams.

Get Started

Core Features

User Management

Configuration

Desktop Application

Deployment

Diagram Configuration

Overview

Creating a Diagram

Canvas Tools

Navigation Tools

Drawing Tools

Element Configuration

Image Elements

Line Elements

Polyline Elements

Text Elements

Variable Data Overlay

Position Options

Variable Display Types

Diagram Metadata

Saving and Loading Diagrams

Save Diagram

Load Diagram

Keyboard Shortcuts

Element Layering

Canvas Controls

Zoom Controls

Undo Function

Best Practices

Troubleshooting

Build docs developers (and LLMs) love

Get Started

Core Features

User Management

Configuration

Desktop Application

Deployment

Documentation Index

​Overview

​Creating a Diagram

​Canvas Tools

​Navigation Tools

​Drawing Tools

​Element Configuration

​Image Elements

​Line Elements

​Polyline Elements

​Text Elements

​Variable Data Overlay

​Position Options

​Variable Display Types

​Diagram Metadata

​Saving and Loading Diagrams

​Save Diagram

​Load Diagram

​Keyboard Shortcuts

​Element Layering

​Canvas Controls

​Zoom Controls

​Undo Function

​Best Practices

​Troubleshooting

Build docs developers (and LLMs) love

Overview

Creating a Diagram

Canvas Tools

Navigation Tools

Drawing Tools

Element Configuration

Image Elements

Line Elements

Polyline Elements

Text Elements

Variable Data Overlay

Position Options

Variable Display Types

Diagram Metadata

Saving and Loading Diagrams

Save Diagram

Load Diagram

Keyboard Shortcuts

Element Layering

Canvas Controls

Zoom Controls

Undo Function

Best Practices

Troubleshooting