Diagrams

Diagrams: Visual Node Mapping

Diagrams provide a powerful way to visualize your Krill nodes overlaid on custom SVG backgrounds. By loading an SVG file (typically authored in tools like Inkscape), you can bind data points and other nodes to specific anchor regions within the diagram for intuitive visual monitoring.

Overview

Diagrams transform your automation system into a visual dashboard. Instead of navigating through lists of nodes, you can see your entire system laid out spatially—whether it’s a floor plan showing room sensors, an equipment schematic with live data readings, or a process flow diagram with real-time status indicators.

Key Features

• SVG Background Support: Load any SVG file as the diagram backdrop
• Anchor Detection: Automatically discovers bindable regions by scanning for elements with k_* prefixed IDs
• Node Binding: Link any Krill node (Data Points, Pins, etc.) to diagram anchors
• Live Updates: Icons and values update automatically by observing node state flows
• Custom Layouts: Design your own visual representations in Inkscape or other SVG editors
• Self-Signed Certificate Support: Option to trust self-signed certificates when loading SVGs from local servers

How It Works

1. Create SVG Diagram: Design your diagram in an SVG editor like Inkscape
2. Add Anchor Points: Mark bindable regions by giving elements IDs that start with k_ (e.g., k_temp_sensor_1, k_valve_status)
3. Load in Krill: Create a Diagram node and specify the SVG source URL
4. Bind Nodes: Map each anchor to a Krill node (Data Point, Pin, etc.)
5. View Mode: Icons and values automatically update as node states change

Creating SVG Diagrams

When designing your SVG in Inkscape or another editor:

Anchor Naming Convention:

k_living_room_temp    → Bind to temperature data point
k_garage_door         → Bind to door status pin
k_pump_1_status       → Bind to pump control node

The k_ prefix tells Krill’s diagram scanner to recognize these elements as bindable anchors.

Configuration

Field	Description	Required
name	Diagram display name	Yes
description	Optional description	No
source	URL to SVG file	Yes
trustSelfSignedCert	Allow self-signed HTTPS	No
anchorBindings	Map of anchor IDs to node IDs	Yes

Use Cases

• Floor Plans: Visualize room-by-room sensor readings in a building layout
• Equipment Schematics: Show live status of machinery components
• Process Flow Diagrams: Monitor industrial processes with P&ID-style views
• Network Diagrams: Display distributed sensor network topology
• Agricultural Layouts: Map greenhouse zones with environmental data
• Aquarium/Tank Systems: Visualize water chemistry sensors across tanks

Example Configurations

Smart Home Floor Plan:

Floor Plan SVG
  k_bedroom_temp → Temperature Data Point
  k_living_room_temp → Temperature Data Point
  k_front_door → Door Sensor Pin
  k_thermostat → HVAC Control Pin

Aquarium Monitoring System:

Tank Diagram SVG
  k_ph_level → pH Data Point
  k_temperature → Temp Data Point
  k_filter_status → Filter Pin
  k_heater → Heater Control Pin

Greenhouse Automation:

Greenhouse Layout SVG
  k_zone_1_temp → Zone 1 Temperature
  k_zone_2_temp → Zone 2 Temperature
  k_irrigation_1 → Irrigation Valve Pin
  k_vent_status → Vent Control Pin

Visual Feedback

In view mode, diagram anchors display:

• Node Icons: Show current state (on/off, value, status)
• Color Coding: Indicate node state (normal, warning, error, executed)
• Live Values: Display current data point values where applicable

Integration Points

Diagrams can bind to any Krill node type:

• Data Points: Display current values and trends
• Pins: Show GPIO state (on/off) with visual indicators
• Triggers: Visualize trigger status
• Serial Devices: Monitor device connectivity
• Executors: Show execution status

Best Practices

• Clear Labeling: Use descriptive anchor names that match your node purposes
• Consistent IDs: Maintain naming conventions across all diagrams
• Appropriate Scale: Design SVGs at readable sizes
• Logical Grouping: Place related anchors near each other spatially
• Simple Backgrounds: Keep diagrams clean for easy monitoring
• Version Control: Store SVG files alongside your project documentation

Creating Anchor Points in Inkscape

1. Open your background image or create a new SVG
2. Draw shapes (rectangles, circles) where you want node indicators
3. Select each shape and open Object → Object Properties
4. Set the ID to k_your_anchor_name
5. Save as Plain SVG
6. Host the SVG on a web server or local file path

Hosting SVG Files

SVG files can be served from:

• Local Krill Server: Host on your Krill server’s web directory
• Network Share: Access via HTTP from internal servers
• Cloud Storage: Use cloud-hosted SVGs with appropriate CORS settings

Diagrams bring spatial awareness to your automation system, making it intuitive to monitor complex installations at a glance.