Skip to content

DevOps

Live Server Rack Diagrams

Building and maintaining server racks often requires both accurate documentation and real-time visibility into which systems are online. In this post, I'll show how to make a live server rack diagram that combines a draw.io .svg, Prometheus, Blackbox Exporter and Grafana.

Demo

Dashboard View

Why

I recently needed to label and verify hardware in a server rack and wanted a "live" server rack diagram to be able to tell what systems were up/down without manually checking. I was inspired by a post on r/sysadmin to use Grafana and draw.io, but saw the FlowCharting plugin suggested was not maintained. I found the Flow plugin instead and liked it so much I decided to make this post. This solution lives entirely in Git for version control making it manageable for both small homelabs and larger environments.

Step-by-step Instructions

Install Kubernetes Cluster

There are many options for a development Kubernetes cluster, a good overview is here. For this project, I used Rancher Desktop on macOS.

If you choose a different Kubernetes cluster option, be sure to install the following tools:
- kubectl
- helm

Install Prometheus Blackbox Exporter

Blackbox Exporter will be used to gather the ping test data to report up/down status of the servers in the rack. Any exporter or other data collection tool such as Zabbix could be used instead if preferred. Install blackbox_exporter by first adding the helm repo: 

helm repo add prometheus-community https://prometheus-community.github.io/helm-charts
helm repo update
Create a blackbox_values.yaml file to configure the chart to enable http and icmp up/down probe:
blackbox_values.yaml
config:
  modules:
    http_2xx: # (1)!
      http:
        follow_redirects: true
        preferred_ip_protocol: ip4
        valid_http_versions:
        - HTTP/1.1
        - HTTP/2.0
      prober: http
      timeout: 5s
    icmp: # (2)!
      prober: icmp
      timeout: 5s
      icmp:
        preferred_ip_protocol: ip4

  1. Enable http/https probe
  2. Enable icmp/ping probe

Then install the chart with the custom values to deploy blackbox exporter in the monitoring namespace: 

helm install blackbox-exporter prometheus-community/prometheus-blackbox-exporter \
  -f blackbox_values.yaml \
  -n monitoring --create-namespace

Install Prometheus and Grafana

Prometheus will be used to scrape the up/down ping information and Grafana will display the dashboard.

Install kube-prometheus-stack by first adding the helm repo:

helm repo add prometheus-community https://prometheus-community.github.io/helm-charts  
helm repo update
Create a prometheus_values.yaml file to configure the chart with the Grafana plugin, blackbox exporter, and hosts to probe for up/down status:
prometheus_values.yaml
grafana:
  plugins:
  - andrewbmchugh-flow-panel # (1)!
prometheus:
  prometheusSpec:
    additionalScrapeConfigs: |
      - job_name: blackbox-http
        metrics_path: /probe
        params:
          module: [http_2xx]
        static_configs:
          - targets: (2)
            - https://google.com
        relabel_configs:
        - source_labels: [__address__]
          target_label: __param_target
        - source_labels: [__param_target]   
          target_label: target
        - target_label: __address__ 
          replacement: blackbox-exporter-prometheus-blackbox-exporter.monitoring.svc.cluster.local:9115 (3)
      - job_name: blackbox-ping
        metrics_path: /probe
        params:
          module: [icmp]
        static_configs:
          - targets: (4)
            - 8.8.8.8
        relabel_configs:
        - source_labels: [__address__]
          target_label: __param_target
        - source_labels: [__param_target]   
          target_label: target
        - target_label: __address__ 
          replacement: blackbox-exporter-prometheus-blackbox-exporter.monitoring.svc.cluster.local:9115

  1. Flow plugin for Grafana providing .svg diagram support
  2. List of http/https targets to probe for up/down status
  3. DNS name of blackbox exporter service for prometheus to scrape
  4. List of icmp/ping targets to probe for up/down status

Then install the chart with the custom values to deploy the Prometheus and Grafana stack in the monitoring namespace: 

helm install kube-prometheus-stack prometheus-community/kube-prometheus-stack \
  -f prometheus_values.yaml \
  -n monitoring --create-namespace
Get Grafana 'admin' user password by running: 
kubectl --namespace monitoring get secrets kube-prometheus-stack-grafana -o jsonpath="{.data.admin-password}" | base64 -d ; echo
Access your local Grafana instance on http://localhost:3000 by port forwarding the Frafana pod: 
export POD_NAME=$(kubectl --namespace monitoring get pod -l "app.kubernetes.io/name=grafana,app.kubernetes.io/instance=kube-prometheus-stack" -oname)  
kubectl --namespace monitoring port-forward $POD_NAME 3000

Create Draw.io Server Rack Diagram

Open the draw.io online editor by going here. Before creating the diagram, the svgdata plugin must be enabled by going to Extras -> Plugins -> Add -> svgdata to be able to save svg data IDs.

Any type of diagram can be used, but for this project I am creating a server rack diagram. Enable the server rack shapes by going to + More Shapes in the bottom right and enabling the Rack shapes.

Add svg data IDs for any elements that will be tied to Prometheus items. To do this right click the element in draw.io Edit Data... -> and double click ID to set the svg data ID. In the below diagram I set a svg data ID to match the element label for the google.com element and the 8.8.8.8 element. These are the same hosts I specified in the Prometheus config for probing up/down status.

Once the diagram has been created, save it by going to File -> Export as -> SVG...

I created this simple rack-diagram.drawio.svg diagram for the project:
Rack Diagram

Create Grafana Dashboard

Access Grafana local instance on http://localhost:3000 by port forwarding the Grafana pod if not already done so.

Create a new dashboard and add a visualization. Use Prometheus as the datasource and select Flow as the visualization type.

In the Queries section, select probe_success as the metric.

In the Flow -> SVG section add the content of the rack-diagram.drawio.svg:

rack-diagram.drawio.svg
<?xml version="1.0" encoding="UTF-8"?>
<!-- Do not edit this file with editors other than draw.io -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" style="background: transparent; background-color: transparent; color-scheme: light dark;" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="340px" height="230px" viewBox="0 0 340 230" content="&lt;mxfile host=&quot;app.diagrams.net&quot; agent=&quot;Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Safari/537.36&quot; version=&quot;29.1.1&quot; scale=&quot;1&quot; border=&quot;0&quot;&gt;&#10;  &lt;diagram name=&quot;Page-1&quot; id=&quot;tXki-6Ed4Ti6ZDX_X3zJ&quot;&gt;&#10;    &lt;mxGraphModel dx=&quot;1018&quot; dy=&quot;655&quot; grid=&quot;1&quot; gridSize=&quot;10&quot; guides=&quot;1&quot; tooltips=&quot;1&quot; connect=&quot;1&quot; arrows=&quot;1&quot; fold=&quot;1&quot; page=&quot;1&quot; pageScale=&quot;1&quot; pageWidth=&quot;850&quot; pageHeight=&quot;1100&quot; math=&quot;0&quot; shadow=&quot;0&quot;&gt;&#10;      &lt;root&gt;&#10;        &lt;mxCell id=&quot;0&quot; /&gt;&#10;        &lt;mxCell id=&quot;1&quot; parent=&quot;0&quot; /&gt;&#10;        &lt;mxCell id=&quot;Cld6ZzL28W5Yg86hF7aJ-1&quot; parent=&quot;1&quot; style=&quot;strokeColor=#666666;html=1;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;outlineConnect=0;shadow=0;dashed=0;shape=mxgraph.rackGeneral.rackCabinet3;rackUnitSize=14.8;fillColor2=#f4f4f4;container=1;collapsible=0;childLayout=rack;allowGaps=1;marginLeft=33;marginRight=9;marginTop=21;marginBottom=22;textColor=#666666;numDisp=ascend;&quot; value=&quot;&quot; vertex=&quot;1&quot;&gt;&#10;          &lt;mxGeometry height=&quot;190&quot; width=&quot;204&quot; x=&quot;320&quot; y=&quot;230&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;Cld6ZzL28W5Yg86hF7aJ-11&quot; parent=&quot;Cld6ZzL28W5Yg86hF7aJ-1&quot; style=&quot;strokeColor=#666666;html=1;labelPosition=right;align=left;spacingLeft=15;shadow=0;dashed=0;outlineConnect=0;shape=mxgraph.rackGeneral.plate;fillColor=#e8e8e8;&quot; value=&quot;&quot; vertex=&quot;1&quot;&gt;&#10;          &lt;mxGeometry height=&quot;14.8&quot; width=&quot;162&quot; x=&quot;33&quot; y=&quot;21&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;Cld6ZzL28W5Yg86hF7aJ-10&quot; parent=&quot;Cld6ZzL28W5Yg86hF7aJ-1&quot; style=&quot;strokeColor=#666666;html=1;labelPosition=right;align=left;spacingLeft=15;shadow=0;dashed=0;outlineConnect=0;shape=mxgraph.rackGeneral.plate;fillColor=#e8e8e8;&quot; value=&quot;&quot; vertex=&quot;1&quot;&gt;&#10;          &lt;mxGeometry height=&quot;14.8&quot; width=&quot;162&quot; x=&quot;33&quot; y=&quot;35.8&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;object label=&quot;google.com&quot; id=&quot;google.com&quot;&gt;&#10;          &lt;mxCell parent=&quot;Cld6ZzL28W5Yg86hF7aJ-1&quot; style=&quot;strokeColor=#666666;html=1;labelPosition=right;align=left;spacingLeft=15;shadow=0;dashed=0;outlineConnect=0;shape=mxgraph.rack.general.1u_rack_server;&quot; vertex=&quot;1&quot;&gt;&#10;            &lt;mxGeometry height=&quot;14.8&quot; width=&quot;162&quot; x=&quot;33&quot; y=&quot;50.6&quot; as=&quot;geometry&quot; /&gt;&#10;          &lt;/mxCell&gt;&#10;        &lt;/object&gt;&#10;        &lt;mxCell id=&quot;Cld6ZzL28W5Yg86hF7aJ-9&quot; parent=&quot;Cld6ZzL28W5Yg86hF7aJ-1&quot; style=&quot;strokeColor=#666666;html=1;labelPosition=right;align=left;spacingLeft=15;shadow=0;dashed=0;outlineConnect=0;shape=mxgraph.rackGeneral.plate;fillColor=#e8e8e8;&quot; value=&quot;&quot; vertex=&quot;1&quot;&gt;&#10;          &lt;mxGeometry height=&quot;14.8&quot; width=&quot;162&quot; x=&quot;33&quot; y=&quot;65.4&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;Cld6ZzL28W5Yg86hF7aJ-8&quot; parent=&quot;Cld6ZzL28W5Yg86hF7aJ-1&quot; style=&quot;strokeColor=#666666;html=1;labelPosition=right;align=left;spacingLeft=15;shadow=0;dashed=0;outlineConnect=0;shape=mxgraph.rackGeneral.plate;fillColor=#e8e8e8;&quot; value=&quot;&quot; vertex=&quot;1&quot;&gt;&#10;          &lt;mxGeometry height=&quot;14.8&quot; width=&quot;162&quot; x=&quot;33&quot; y=&quot;80.2&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;object label=&quot;8.8.8.8&quot; id=&quot;8.8.8.8&quot;&gt;&#10;          &lt;mxCell parent=&quot;Cld6ZzL28W5Yg86hF7aJ-1&quot; style=&quot;strokeColor=#666666;html=1;labelPosition=right;align=left;spacingLeft=15;shadow=0;dashed=0;outlineConnect=0;shape=mxgraph.rack.general.1u_rack_server;&quot; vertex=&quot;1&quot;&gt;&#10;            &lt;mxGeometry height=&quot;14.8&quot; width=&quot;162&quot; x=&quot;33&quot; y=&quot;95&quot; as=&quot;geometry&quot; /&gt;&#10;          &lt;/mxCell&gt;&#10;        &lt;/object&gt;&#10;        &lt;mxCell id=&quot;Cld6ZzL28W5Yg86hF7aJ-7&quot; parent=&quot;Cld6ZzL28W5Yg86hF7aJ-1&quot; style=&quot;strokeColor=#666666;html=1;labelPosition=right;align=left;spacingLeft=15;shadow=0;dashed=0;outlineConnect=0;shape=mxgraph.rackGeneral.plate;fillColor=#e8e8e8;&quot; value=&quot;&quot; vertex=&quot;1&quot;&gt;&#10;          &lt;mxGeometry height=&quot;14.8&quot; width=&quot;162&quot; x=&quot;33&quot; y=&quot;109.80000000000001&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;Cld6ZzL28W5Yg86hF7aJ-6&quot; parent=&quot;Cld6ZzL28W5Yg86hF7aJ-1&quot; style=&quot;strokeColor=#666666;html=1;labelPosition=right;align=left;spacingLeft=15;shadow=0;dashed=0;outlineConnect=0;shape=mxgraph.rackGeneral.plate;fillColor=#e8e8e8;&quot; value=&quot;&quot; vertex=&quot;1&quot;&gt;&#10;          &lt;mxGeometry height=&quot;14.8&quot; width=&quot;162&quot; x=&quot;33&quot; y=&quot;124.60000000000001&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;Cld6ZzL28W5Yg86hF7aJ-5&quot; parent=&quot;Cld6ZzL28W5Yg86hF7aJ-1&quot; style=&quot;strokeColor=#666666;html=1;labelPosition=right;align=left;spacingLeft=15;shadow=0;dashed=0;outlineConnect=0;shape=mxgraph.rack.dell.power_strip;&quot; value=&quot;&quot; vertex=&quot;1&quot;&gt;&#10;          &lt;mxGeometry height=&quot;14.8&quot; width=&quot;162&quot; x=&quot;33&quot; y=&quot;139.4&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;Cld6ZzL28W5Yg86hF7aJ-4&quot; parent=&quot;Cld6ZzL28W5Yg86hF7aJ-1&quot; style=&quot;shape=mxgraph.rack.apc.apc_smart_ups_750_va_1u;html=1;labelPosition=right;align=left;spacingLeft=15;dashed=0;shadow=0;fillColor=#ffffff;&quot; value=&quot;&quot; vertex=&quot;1&quot;&gt;&#10;          &lt;mxGeometry height=&quot;14.8&quot; width=&quot;162&quot; x=&quot;33&quot; y=&quot;154.20000000000002&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;ZJzga1j04mXXxQWd3HnJ-1&quot; parent=&quot;1&quot; style=&quot;rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=none;&quot; value=&quot;&quot; vertex=&quot;1&quot;&gt;&#10;          &lt;mxGeometry height=&quot;230&quot; width=&quot;340&quot; x=&quot;300&quot; y=&quot;210&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;      &lt;/root&gt;&#10;    &lt;/mxGraphModel&gt;&#10;  &lt;/diagram&gt;&#10;&lt;/mxfile&gt;&#10;"><defs/><g><g data-cell-id="0"><g data-cell-id="1"><g data-cell-id="Cld6ZzL28W5Yg86hF7aJ-1"><g id="cell-Cld6ZzL28W5Yg86hF7aJ-1"><g transform="translate(0.5,0.5)"><rect x="44" y="20" width="180" height="190" fill="#f4f4f4" stroke="#666666" pointer-events="all" style="fill: light-dark(rgb(244, 244, 244), rgb(27, 27, 27)); stroke: light-dark(rgb(102, 102, 102), rgb(149, 149, 149));"/><rect x="44" y="20" width="180" height="21" fill="#ffffff" stroke="#666666" pointer-events="all" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212)); stroke: light-dark(rgb(102, 102, 102), rgb(149, 149, 149));"/><rect x="44" y="189" width="180" height="21" fill="#ffffff" stroke="#666666" pointer-events="all" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212)); stroke: light-dark(rgb(102, 102, 102), rgb(149, 149, 149));"/><rect x="44" y="41" width="9" height="148" fill="#ffffff" stroke="#666666" pointer-events="all" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212)); stroke: light-dark(rgb(102, 102, 102), rgb(149, 149, 149));"/><rect x="215" y="41" width="9" height="148" fill="#ffffff" stroke="#666666" pointer-events="all" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212)); stroke: light-dark(rgb(102, 102, 102), rgb(149, 149, 149));"/><ellipse cx="49.5" cy="30.5" rx="3" ry="3" fill="none" stroke="#666666" pointer-events="all" style="stroke: light-dark(rgb(102, 102, 102), rgb(149, 149, 149));"/><ellipse cx="218.5" cy="30.5" rx="3" ry="3" fill="none" stroke="#666666" pointer-events="all" style="stroke: light-dark(rgb(102, 102, 102), rgb(149, 149, 149));"/><ellipse cx="49.5" cy="199.5" rx="3" ry="3" fill="none" stroke="#666666" pointer-events="all" style="stroke: light-dark(rgb(102, 102, 102), rgb(149, 149, 149));"/><ellipse cx="218.5" cy="199.5" rx="3" ry="3" fill="none" stroke="#666666" pointer-events="all" style="stroke: light-dark(rgb(102, 102, 102), rgb(149, 149, 149));"/><g fill="#666666" font-family="Arial, Helvetica" text-anchor="middle" font-size="12px" style="fill: light-dark(rgb(102, 102, 102), rgb(149, 149, 149));"><text x="32" y="53.4">1</text></g><g fill="#666666" font-family="Arial, Helvetica" text-anchor="middle" font-size="12px" style="fill: light-dark(rgb(102, 102, 102), rgb(149, 149, 149));"><text x="32" y="68.2">2</text></g><g fill="#666666" font-family="Arial, Helvetica" text-anchor="middle" font-size="12px" style="fill: light-dark(rgb(102, 102, 102), rgb(149, 149, 149));"><text x="32" y="83">3</text></g><g fill="#666666" font-family="Arial, Helvetica" text-anchor="middle" font-size="12px" style="fill: light-dark(rgb(102, 102, 102), rgb(149, 149, 149));"><text x="32" y="97.8">4</text></g><g fill="#666666" font-family="Arial, Helvetica" text-anchor="middle" font-size="12px" style="fill: light-dark(rgb(102, 102, 102), rgb(149, 149, 149));"><text x="32" y="112.6">5</text></g><g fill="#666666" font-family="Arial, Helvetica" text-anchor="middle" font-size="12px" style="fill: light-dark(rgb(102, 102, 102), rgb(149, 149, 149));"><text x="32" y="127.4">6</text></g><g fill="#666666" font-family="Arial, Helvetica" text-anchor="middle" font-size="12px" style="fill: light-dark(rgb(102, 102, 102), rgb(149, 149, 149));"><text x="32" y="142.2">7</text></g><g fill="#666666" font-family="Arial, Helvetica" text-anchor="middle" font-size="12px" style="fill: light-dark(rgb(102, 102, 102), rgb(149, 149, 149));"><text x="32" y="157">8</text></g><g fill="#666666" font-family="Arial, Helvetica" text-anchor="middle" font-size="12px" style="fill: light-dark(rgb(102, 102, 102), rgb(149, 149, 149));"><text x="32" y="171.8">9</text></g><g fill="#666666" font-family="Arial, Helvetica" text-anchor="middle" font-size="12px" style="fill: light-dark(rgb(102, 102, 102), rgb(149, 149, 149));"><text x="32" y="186.6">10</text></g><path d="M 20 41 L 44 41 M 20 55.8 L 44 55.8 M 20 70.6 L 44 70.6 M 20 85.4 L 44 85.4 M 20 100.2 L 44 100.2 M 20 115 L 44 115 M 20 129.8 L 44 129.8 M 20 144.6 L 44 144.6 M 20 159.4 L 44 159.4 M 20 174.2 L 44 174.2 M 20 189 L 44 189" fill="none" stroke="#666666" stroke-miterlimit="10" pointer-events="all" style="stroke: light-dark(rgb(102, 102, 102), rgb(149, 149, 149));"/></g></g><g data-cell-id="Cld6ZzL28W5Yg86hF7aJ-11"><g id="cell-Cld6ZzL28W5Yg86hF7aJ-11"><g transform="translate(0.5,0.5)"><rect x="53" y="41" width="162" height="14.8" fill="#e8e8e8" stroke="#666666" pointer-events="all" style="fill: light-dark(rgb(232, 232, 232), rgb(38, 38, 38)); stroke: light-dark(rgb(102, 102, 102), rgb(149, 149, 149));"/><rect x="53" y="41" width="9" height="14.8" fill-opacity="0.23" fill="#000000" stroke="none" pointer-events="all" style="fill: light-dark(rgb(0, 0, 0), rgb(237, 237, 237));"/><rect x="206" y="41" width="9" height="14.8" fill-opacity="0.23" fill="#000000" stroke="none" pointer-events="all" style="fill: light-dark(rgb(0, 0, 0), rgb(237, 237, 237));"/><rect x="53" y="41" width="162" height="14.8" fill="none" stroke="#666666" pointer-events="all" style="stroke: light-dark(rgb(102, 102, 102), rgb(149, 149, 149));"/><rect x="62" y="41" width="144" height="14.8" fill="none" stroke="#666666" pointer-events="all" style="stroke: light-dark(rgb(102, 102, 102), rgb(149, 149, 149));"/></g></g></g><g data-cell-id="Cld6ZzL28W5Yg86hF7aJ-10"><g id="cell-Cld6ZzL28W5Yg86hF7aJ-10"><g transform="translate(0.5,0.5)"><rect x="53" y="55.8" width="162" height="14.8" fill="#e8e8e8" stroke="#666666" pointer-events="all" style="fill: light-dark(rgb(232, 232, 232), rgb(38, 38, 38)); stroke: light-dark(rgb(102, 102, 102), rgb(149, 149, 149));"/><rect x="53" y="55.8" width="9" height="14.8" fill-opacity="0.23" fill="#000000" stroke="none" pointer-events="all" style="fill: light-dark(rgb(0, 0, 0), rgb(237, 237, 237));"/><rect x="206" y="55.8" width="9" height="14.8" fill-opacity="0.23" fill="#000000" stroke="none" pointer-events="all" style="fill: light-dark(rgb(0, 0, 0), rgb(237, 237, 237));"/><rect x="53" y="55.8" width="162" height="14.8" fill="none" stroke="#666666" pointer-events="all" style="stroke: light-dark(rgb(102, 102, 102), rgb(149, 149, 149));"/><rect x="62" y="55.8" width="144" height="14.8" fill="none" stroke="#666666" pointer-events="all" style="stroke: light-dark(rgb(102, 102, 102), rgb(149, 149, 149));"/></g></g></g><g data-cell-id="google.com"><g id="cell-google.com" content="&lt;object label=&quot;google.com&quot;/&gt;" data-label="google.com"><g transform="translate(0.5,0.5)"><path d="M 53 70.6 L 53 85.4 L 215 85.4 L 215 70.6 Z" fill="#ffffff" stroke="none" pointer-events="all" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212));"/><path d="M 53 70.6 L 53 85.4 L 215 85.4 L 215 70.6 Z M 61.84 71.54 L 205.8 71.54 L 205.8 73.52 C 204.56 73.7 203.53 74.17 202.84 74.91 C 202.07 75.77 201.69 76.85 201.69 77.93 C 201.69 79.01 202.07 80.1 202.84 80.94 C 203.53 81.69 204.56 82.17 205.8 82.34 L 205.8 84.46 L 61.84 84.46 L 61.84 82.36 C 63.15 82.25 64.24 81.79 64.97 81.03 C 65.79 80.18 66.18 79.05 66.18 77.93 C 66.18 76.81 65.79 75.69 64.97 74.83 C 64.24 74.08 63.15 73.62 61.84 73.5 Z M 133.9 73.09 C 131.05 73.09 128.73 75.26 128.73 77.93 C 128.73 80.6 131.05 82.76 133.9 82.76 C 136.76 82.76 139.08 80.6 139.08 77.93 C 139.08 75.26 136.76 73.09 133.9 73.09 Z M 133.9 74.03 C 136.22 74.03 138.08 75.78 138.08 77.93 C 138.08 80.09 136.22 81.83 133.9 81.83 C 131.59 81.83 129.73 80.09 129.73 77.93 C 129.73 75.78 131.59 74.03 133.9 74.03 Z" fill-opacity="0.644" fill="#000000" stroke="none" pointer-events="all" style="fill: light-dark(rgb(0, 0, 0), rgb(237, 237, 237));"/><rect x="53" y="70.6" width="0" height="0" fill="none" stroke="#666666" pointer-events="all" style="stroke: light-dark(rgb(102, 102, 102), rgb(149, 149, 149));"/><path d="M 141.91 72.94 L 197.95 72.94 L 197.95 82.92 L 141.91 82.92 Z M 70.85 72.94 L 126.89 72.94 L 126.89 82.92 L 70.85 82.92 Z" fill-opacity="0.232" fill="#000000" stroke="none" pointer-events="all" style="fill: light-dark(rgb(0, 0, 0), rgb(237, 237, 237));"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 1px; height: 1px; padding-top: 78px; margin-left: 232px;"><div style="box-sizing: border-box; font-size: 0; text-align: left; color: #000000; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: nowrap; ">google.com</div></div></div></foreignObject><image x="232" y="71.5" width="62" height="17" xlink:href="data:image/png;base64,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"/></switch></g></g></g></g><g data-cell-id="Cld6ZzL28W5Yg86hF7aJ-9"><g id="cell-Cld6ZzL28W5Yg86hF7aJ-9"><g transform="translate(0.5,0.5)"><rect x="53" y="85.4" width="162" height="14.8" fill="#e8e8e8" stroke="#666666" pointer-events="all" style="fill: light-dark(rgb(232, 232, 232), rgb(38, 38, 38)); stroke: light-dark(rgb(102, 102, 102), rgb(149, 149, 149));"/><rect x="53" y="85.4" width="9" height="14.8" fill-opacity="0.23" fill="#000000" stroke="none" pointer-events="all" style="fill: light-dark(rgb(0, 0, 0), rgb(237, 237, 237));"/><rect x="206" y="85.4" width="9" height="14.8" fill-opacity="0.23" fill="#000000" stroke="none" pointer-events="all" style="fill: light-dark(rgb(0, 0, 0), rgb(237, 237, 237));"/><rect x="53" y="85.4" width="162" height="14.8" fill="none" stroke="#666666" pointer-events="all" style="stroke: light-dark(rgb(102, 102, 102), rgb(149, 149, 149));"/><rect x="62" y="85.4" width="144" height="14.8" fill="none" stroke="#666666" pointer-events="all" style="stroke: light-dark(rgb(102, 102, 102), rgb(149, 149, 149));"/></g></g></g><g data-cell-id="Cld6ZzL28W5Yg86hF7aJ-8"><g id="cell-Cld6ZzL28W5Yg86hF7aJ-8"><g transform="translate(0.5,0.5)"><rect x="53" y="100.2" width="162" height="14.8" fill="#e8e8e8" stroke="#666666" pointer-events="all" style="fill: light-dark(rgb(232, 232, 232), rgb(38, 38, 38)); stroke: light-dark(rgb(102, 102, 102), rgb(149, 149, 149));"/><rect x="53" y="100.2" width="9" height="14.8" fill-opacity="0.23" fill="#000000" stroke="none" pointer-events="all" style="fill: light-dark(rgb(0, 0, 0), rgb(237, 237, 237));"/><rect x="206" y="100.2" width="9" height="14.8" fill-opacity="0.23" fill="#000000" stroke="none" pointer-events="all" style="fill: light-dark(rgb(0, 0, 0), rgb(237, 237, 237));"/><rect x="53" y="100.2" width="162" height="14.8" fill="none" stroke="#666666" pointer-events="all" style="stroke: light-dark(rgb(102, 102, 102), rgb(149, 149, 149));"/><rect x="62" y="100.2" width="144" height="14.8" fill="none" stroke="#666666" pointer-events="all" style="stroke: light-dark(rgb(102, 102, 102), rgb(149, 149, 149));"/></g></g></g><g data-cell-id="8.8.8.8"><g id="cell-8.8.8.8" content="&lt;object label=&quot;8.8.8.8&quot;/&gt;" data-label="8.8.8.8"><g transform="translate(0.5,0.5)"><path d="M 53 115 L 53 129.8 L 215 129.8 L 215 115 Z" fill="#ffffff" stroke="none" pointer-events="all" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212));"/><path d="M 53 115 L 53 129.8 L 215 129.8 L 215 115 Z M 61.84 115.94 L 205.8 115.94 L 205.8 117.92 C 204.56 118.1 203.53 118.57 202.84 119.31 C 202.07 120.17 201.69 121.25 201.69 122.33 C 201.69 123.41 202.07 124.5 202.84 125.34 C 203.53 126.09 204.56 126.57 205.8 126.74 L 205.8 128.86 L 61.84 128.86 L 61.84 126.76 C 63.15 126.65 64.24 126.19 64.97 125.43 C 65.79 124.58 66.18 123.45 66.18 122.33 C 66.18 121.21 65.79 120.09 64.97 119.23 C 64.24 118.48 63.15 118.02 61.84 117.9 Z M 133.9 117.49 C 131.05 117.49 128.73 119.66 128.73 122.33 C 128.73 125 131.05 127.16 133.9 127.16 C 136.76 127.16 139.08 125 139.08 122.33 C 139.08 119.66 136.76 117.49 133.9 117.49 Z M 133.9 118.43 C 136.22 118.43 138.08 120.18 138.08 122.33 C 138.08 124.49 136.22 126.23 133.9 126.23 C 131.59 126.23 129.73 124.49 129.73 122.33 C 129.73 120.18 131.59 118.43 133.9 118.43 Z" fill-opacity="0.644" fill="#000000" stroke="none" pointer-events="all" style="fill: light-dark(rgb(0, 0, 0), rgb(237, 237, 237));"/><rect x="53" y="115" width="0" height="0" fill="none" stroke="#666666" pointer-events="all" style="stroke: light-dark(rgb(102, 102, 102), rgb(149, 149, 149));"/><path d="M 141.91 117.34 L 197.95 117.34 L 197.95 127.32 L 141.91 127.32 Z M 70.85 117.34 L 126.89 117.34 L 126.89 127.32 L 70.85 127.32 Z" fill-opacity="0.232" fill="#000000" stroke="none" pointer-events="all" style="fill: light-dark(rgb(0, 0, 0), rgb(237, 237, 237));"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 1px; height: 1px; padding-top: 122px; margin-left: 232px;"><div style="box-sizing: border-box; font-size: 0; text-align: left; color: #000000; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: nowrap; ">8.8.8.8</div></div></div></foreignObject><image x="232" y="115.5" width="37" height="17" xlink:href="data:image/png;base64,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"/></switch></g></g></g></g><g data-cell-id="Cld6ZzL28W5Yg86hF7aJ-7"><g id="cell-Cld6ZzL28W5Yg86hF7aJ-7"><g transform="translate(0.5,0.5)"><rect x="53" y="129.8" width="162" height="14.8" fill="#e8e8e8" stroke="#666666" pointer-events="all" style="fill: light-dark(rgb(232, 232, 232), rgb(38, 38, 38)); stroke: light-dark(rgb(102, 102, 102), rgb(149, 149, 149));"/><rect x="53" y="129.8" width="9" height="14.8" fill-opacity="0.23" fill="#000000" stroke="none" pointer-events="all" style="fill: light-dark(rgb(0, 0, 0), rgb(237, 237, 237));"/><rect x="206" y="129.8" width="9" height="14.8" fill-opacity="0.23" fill="#000000" stroke="none" pointer-events="all" style="fill: light-dark(rgb(0, 0, 0), rgb(237, 237, 237));"/><rect x="53" y="129.8" width="162" height="14.8" fill="none" stroke="#666666" pointer-events="all" style="stroke: light-dark(rgb(102, 102, 102), rgb(149, 149, 149));"/><rect x="62" y="129.8" width="144" height="14.8" fill="none" stroke="#666666" pointer-events="all" style="stroke: light-dark(rgb(102, 102, 102), rgb(149, 149, 149));"/></g></g></g><g data-cell-id="Cld6ZzL28W5Yg86hF7aJ-6"><g id="cell-Cld6ZzL28W5Yg86hF7aJ-6"><g transform="translate(0.5,0.5)"><rect x="53" y="144.6" width="162" height="14.8" fill="#e8e8e8" stroke="#666666" pointer-events="all" style="fill: light-dark(rgb(232, 232, 232), rgb(38, 38, 38)); stroke: light-dark(rgb(102, 102, 102), rgb(149, 149, 149));"/><rect x="53" y="144.6" width="9" height="14.8" fill-opacity="0.23" fill="#000000" stroke="none" pointer-events="all" style="fill: light-dark(rgb(0, 0, 0), rgb(237, 237, 237));"/><rect x="206" y="144.6" width="9" height="14.8" fill-opacity="0.23" fill="#000000" stroke="none" pointer-events="all" style="fill: light-dark(rgb(0, 0, 0), rgb(237, 237, 237));"/><rect x="53" y="144.6" width="162" height="14.8" fill="none" stroke="#666666" pointer-events="all" style="stroke: light-dark(rgb(102, 102, 102), rgb(149, 149, 149));"/><rect x="62" y="144.6" width="144" height="14.8" fill="none" stroke="#666666" pointer-events="all" style="stroke: light-dark(rgb(102, 102, 102), rgb(149, 149, 149));"/></g></g></g><g data-cell-id="Cld6ZzL28W5Yg86hF7aJ-5"><g id="cell-Cld6ZzL28W5Yg86hF7aJ-5"><g transform="translate(0.5,0.5)"><path d="M 209.29 170.94 L 212.3 170.94 C 212.59 170.94 212.8 171.14 212.8 171.41 L 212.8 171.41 C 212.8 171.68 212.59 171.87 212.3 171.87 L 209.29 171.87 C 209.01 171.87 208.79 171.68 208.79 171.41 L 208.79 171.41 C 208.79 171.14 209.01 170.94 209.29 170.94 Z M 209.29 161.58 L 212.3 161.58 C 212.59 161.58 212.8 161.78 212.8 162.05 L 212.8 162.05 C 212.8 162.32 212.59 162.52 212.3 162.52 L 209.29 162.52 C 209.01 162.52 208.79 162.32 208.79 162.05 L 208.79 162.05 C 208.79 161.78 209.01 161.58 209.29 161.58 Z M 55.17 170.94 L 58.17 170.94 C 58.46 170.94 58.67 171.14 58.67 171.41 L 58.67 171.41 C 58.67 171.68 58.46 171.87 58.17 171.87 L 55.17 171.87 C 54.88 171.87 54.67 171.68 54.67 171.41 L 54.67 171.41 C 54.67 171.14 54.88 170.94 55.17 170.94 Z M 55.17 161.58 L 58.17 161.58 C 58.46 161.58 58.67 161.78 58.67 162.05 L 58.67 162.05 C 58.67 162.32 58.46 162.52 58.17 162.52 L 55.17 162.52 C 54.88 162.52 54.67 162.32 54.67 162.05 L 54.67 162.05 C 54.67 161.78 54.88 161.58 55.17 161.58 Z M 53 159.4 C 53 164.33 53 169.27 53 174.2 L 215 174.2 L 215 159.4 Z" fill="#ffffff" stroke="none" pointer-events="all" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212));"/><path d="M 53 159.4 L 53 174.2 L 215 174.2 L 215 159.4 Z M 54 160.33 L 214 160.33 L 214 173.27 L 54 173.27 L 54 172.28 C 54.28 172.6 54.69 172.81 55.17 172.81 L 58.17 172.81 C 59 172.81 59.67 172.18 59.67 171.41 L 59.67 171.41 C 59.67 170.64 59 170.01 58.17 170.01 L 55.17 170.01 C 54.69 170.01 54.28 170.22 54 170.54 L 54 162.92 C 54.28 163.24 54.69 163.45 55.17 163.45 L 58.17 163.45 C 59 163.45 59.67 162.82 59.67 162.05 L 59.67 162.05 C 59.67 161.28 59 160.65 58.17 160.65 L 55.17 160.65 C 54.69 160.65 54.28 160.86 54 161.18 Z M 209.29 160.65 C 208.47 160.65 207.79 161.28 207.79 162.05 L 207.79 162.05 C 207.79 162.82 208.47 163.45 209.29 163.45 L 212.3 163.45 C 213.12 163.45 213.8 162.82 213.8 162.05 L 213.8 162.05 C 213.8 161.28 213.12 160.65 212.3 160.65 Z M 55.17 161.58 L 58.17 161.58 C 58.46 161.58 58.67 161.78 58.67 162.05 L 58.67 162.05 C 58.67 162.32 58.46 162.52 58.17 162.52 L 55.17 162.52 C 54.88 162.52 54.67 162.32 54.67 162.05 L 54.67 162.05 C 54.67 161.78 54.88 161.58 55.17 161.58 Z M 209.29 161.58 L 212.3 161.58 C 212.59 161.58 212.8 161.78 212.8 162.05 L 212.8 162.05 C 212.8 162.32 212.59 162.52 212.3 162.52 L 209.29 162.52 C 209.01 162.52 208.79 162.32 208.79 162.05 L 208.79 162.05 C 208.79 161.78 209.01 161.58 209.29 161.58 Z M 89.36 162.21 L 89.36 171.57 L 103.37 171.57 L 103.37 162.21 Z M 137.18 162.21 L 137.18 171.57 L 151.19 171.57 L 151.19 162.21 Z M 153.08 162.21 L 153.08 171.57 L 167.09 171.57 L 167.09 162.21 Z M 169.65 162.21 L 169.65 171.57 L 183.66 171.57 L 183.66 162.21 Z M 105.26 162.31 L 105.26 171.67 L 119.28 171.67 L 119.28 162.31 Z M 121.16 162.31 L 121.16 171.67 L 135.18 171.67 L 135.18 162.31 Z M 90.37 163.14 L 102.37 163.14 L 102.37 170.63 L 90.37 170.63 Z M 138.19 163.14 L 150.19 163.14 L 150.19 170.63 L 138.19 170.63 Z M 154.08 163.14 L 166.09 163.14 L 166.09 170.63 L 154.08 170.63 Z M 170.66 163.14 L 182.66 163.14 L 182.66 170.63 L 170.66 170.63 Z M 106.27 163.25 L 118.28 163.25 L 118.28 170.74 L 106.27 170.74 Z M 122.17 163.25 L 134.18 163.25 L 134.18 170.74 L 122.17 170.74 Z M 209.29 170.01 C 208.47 170.01 207.79 170.64 207.79 171.41 L 207.79 171.41 C 207.79 172.18 208.47 172.81 209.29 172.81 L 212.3 172.81 C 213.12 172.81 213.8 172.18 213.8 171.41 L 213.8 171.41 C 213.8 170.64 213.12 170.01 212.3 170.01 Z M 55.17 170.94 L 58.17 170.94 C 58.46 170.94 58.67 171.14 58.67 171.41 L 58.67 171.41 C 58.67 171.68 58.46 171.87 58.17 171.87 L 55.17 171.87 C 54.88 171.87 54.67 171.68 54.67 171.41 L 54.67 171.41 C 54.67 171.14 54.88 170.94 55.17 170.94 Z M 209.29 170.94 L 212.3 170.94 C 212.59 170.94 212.8 171.14 212.8 171.41 L 212.8 171.41 C 212.8 171.68 212.59 171.87 212.3 171.87 L 209.29 171.87 C 209.01 171.87 208.79 171.68 208.79 171.41 L 208.79 171.41 C 208.79 171.14 209.01 170.94 209.29 170.94 Z" fill-opacity="0.644" fill="#000000" stroke="none" pointer-events="all" style="fill: light-dark(rgb(0, 0, 0), rgb(237, 237, 237));"/><path d="M 90.37 163.14 L 102.37 163.14 L 102.37 170.63 L 90.37 170.63 Z M 106.27 163.25 L 118.28 163.25 L 118.28 170.74 L 106.27 170.74 Z M 122.17 163.25 L 134.18 163.25 L 134.18 170.74 L 122.17 170.74 Z M 138.19 163.14 L 150.19 163.14 L 150.19 170.63 L 138.19 170.63 Z M 154.08 163.14 L 166.09 163.14 L 166.09 170.63 L 154.08 170.63 Z M 170.66 163.14 L 182.66 163.14 L 182.66 170.63 L 170.66 170.63 Z" fill-opacity="0.385" fill="#000000" stroke="none" pointer-events="all" style="fill: light-dark(rgb(0, 0, 0), rgb(237, 237, 237));"/><rect x="53" y="159.4" width="0" height="0" fill="none" stroke="#666666" pointer-events="all" style="stroke: light-dark(rgb(102, 102, 102), rgb(149, 149, 149));"/><path d="M 176.15 164.54 L 181.16 164.54 L 181.16 166.1 L 176.15 166.1 Z M 176.82 167.98 L 180.16 167.98 L 180.16 169.54 L 176.82 169.54 Z M 172.16 166.42 L 174.16 166.42 L 174.16 167.98 L 172.16 167.98 Z M 66.51 167.04 C 66.51 167.9 65.76 168.59 64.84 168.6 C 63.92 168.6 63.17 167.9 63.17 167.04 C 63.17 166.18 63.92 165.48 64.84 165.48 C 65.76 165.48 66.51 166.18 66.51 167.04 Z M 202.62 167.04 C 202.62 167.45 202.45 167.85 202.13 168.14 C 201.82 168.43 201.4 168.6 200.95 168.6 C 200.03 168.59 199.29 167.9 199.29 167.04 C 199.29 166.18 200.03 165.48 200.95 165.48 C 201.4 165.48 201.82 165.64 202.13 165.94 C 202.45 166.23 202.62 166.62 202.62 167.04 Z M 159.59 164.54 L 164.59 164.54 L 164.59 166.1 L 159.59 166.1 Z M 160.25 167.98 L 163.59 167.98 L 163.59 169.54 L 160.25 169.54 Z M 155.59 166.42 L 157.59 166.42 L 157.59 167.98 L 155.59 167.98 Z M 143.68 164.54 L 148.69 164.54 L 148.69 166.1 L 143.68 166.1 Z M 144.35 167.98 L 147.69 167.98 L 147.69 169.54 L 144.35 169.54 Z M 139.69 166.42 L 141.68 166.42 L 141.68 167.98 L 139.69 167.98 Z M 127.67 164.65 L 132.68 164.65 L 132.68 166.21 L 127.67 166.21 Z M 128.34 168.08 L 131.68 168.08 L 131.68 169.64 L 128.34 169.64 Z M 123.67 166.52 L 125.67 166.52 L 125.67 168.08 L 123.67 168.08 Z M 111.77 164.65 L 116.78 164.65 L 116.78 166.21 L 111.77 166.21 Z M 112.43 168.08 L 115.78 168.08 L 115.78 169.64 L 112.43 169.64 Z M 107.77 166.52 L 109.77 166.52 L 109.77 168.08 L 107.77 168.08 Z M 91.87 166.42 L 93.87 166.42 L 93.87 167.98 L 91.87 167.98 Z M 96.53 167.98 L 99.87 167.98 L 99.87 169.54 L 96.53 169.54 Z M 95.87 164.54 L 100.87 164.54 L 100.87 166.1 L 95.87 166.1 Z" fill-opacity="0.644" fill="#000000" stroke="none" pointer-events="all" style="fill: light-dark(rgb(0, 0, 0), rgb(237, 237, 237));"/></g></g></g><g data-cell-id="Cld6ZzL28W5Yg86hF7aJ-4"><g id="cell-Cld6ZzL28W5Yg86hF7aJ-4"><g transform="translate(0.5,0.5)"><path d="M 53 174.2 L 53 189 L 215 189 L 215 174.2 Z" fill="#ffffff" stroke="none" pointer-events="all" style="fill: light-dark(rgb(255, 255, 255), rgb(18, 18, 18));"/><path d="M 169.93 182.77 L 197.62 182.77 L 197.62 185.59 L 169.93 185.59 Z M 169.93 177.48 L 197.62 177.48 L 197.62 180.28 L 169.93 180.28 Z M 69.52 182.77 L 141.9 182.77 L 141.9 185.59 L 69.52 185.59 Z M 69.52 177.48 L 141.9 177.48 L 141.9 180.28 L 69.52 180.28 Z" fill-opacity="0.233" fill="#000000" stroke="none" pointer-events="all" style="fill: light-dark(rgb(0, 0, 0), rgb(237, 237, 237));"/><rect x="53" y="174.2" width="0" height="0" fill="none" stroke="#000000" pointer-events="all" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/><rect x="144.91" y="177.78" width="23.02" height="7.8" fill="none" stroke="#000000" stroke-opacity="0.644" pointer-events="all" style="stroke: light-dark(rgb(0, 0, 0), rgb(237, 237, 237));"/><path d="M 53 174.2 L 53 174.66 L 53 189 L 215 189 L 215 174.2 Z M 62.34 175.59 L 205.29 175.59 L 205.29 176.74 C 204.07 176.93 202.99 177.36 202.26 178.13 C 201.35 179.07 200.92 180.31 200.92 181.53 C 200.92 182.75 201.35 183.98 202.26 184.94 C 202.99 185.7 204.07 186.12 205.29 186.31 L 205.29 187.61 L 62.34 187.61 L 62.34 186.31 C 63.56 186.12 64.64 185.7 65.37 184.94 C 66.28 183.98 66.72 182.75 66.72 181.53 C 66.72 180.31 66.28 179.07 65.37 178.13 C 64.64 177.36 63.56 176.93 62.34 176.74 Z" fill-opacity="0.642" fill="#000000" stroke="none" pointer-events="all" style="fill: light-dark(rgb(0, 0, 0), rgb(237, 237, 237));"/></g></g></g></g><g data-cell-id="ZJzga1j04mXXxQWd3HnJ-1"><g id="cell-ZJzga1j04mXXxQWd3HnJ-1"><g transform="translate(0.5,0.5)"><rect x="0" y="0" width="340" height="230" fill="none" stroke="none" pointer-events="all"/></g></g></g></g></g></g></svg>

Then in the Flow -> Panel Config section add the panel config to map the Prometheus blackbox exporter data to the svg elements:

panel-config.yaml
---
cellIdPreamble: "cell-"
cells: 
  google.com: # (1)!
    dataRef: '{__name__="probe_success", instance="blackbox-exporter-prometheus-blackbox-exporter.monitoring.svc.cluster.local:9115", job="blackbox-http", target="https://google.com"}' # (2)!
    label: &label
      separator: "colon"
      units: "none"
      decimalPoints: 0
      valueMappings: # (3)!
        - {value: 1, text: "UP"} 
        - {value: 0, text: "DOWN"}
    labelColor: &labelColor
      gradientMode: "hue"
      thresholds: # (4)!
        - {color: "red", level: 0}
        - {color: "green", level: 1}
  8.8.8.8: # (5)!
    dataRef: '{__name__="probe_success", instance="blackbox-exporter-prometheus-blackbox-exporter.monitoring.svc.cluster.local:9115", job="blackbox-ping", target="8.8.8.8"}'
    label: *label # (6)!
    labelColor: *labelColor # (7)!

  1. The cells list contains the list of draw.io elements to tie data to. google.com is the first element to configure.
  2. The dataRef attribute is the data source for the information. In this case the probe success up/down status from blackbox exporter.
  3. The valueMappings attribute can map the label depending on the data result. In this case, 1 and 0 from blackbox exporter map to the text UP and DOWN respectively.
  4. The labelColor:thresholds attribute can color the label depending on the data result. In this case, 0 and 1 map to red and green respectively.
  5. 8.8.8.8 is the second element to configure.
  6. The label attribute is reused from the google.com element using yaml anchors.
  7. The labelColor attribute is reused from the google.com element using yaml anchors.

The diagram labels should now be populated with data from Prometheus and show : UP similar to the image below:

Create Dashboard View

GitOps

This solution also supports a GitOps workflow as the helm charts, diagram, and dashboard are all text based. As an alternative to following the above manual steps of deployment, this solution can be deployed with a GitOps tool such as Fleet or ArgoCD.

An example GitOps project for this same live server rack diagram can be found here.

Troubleshooting

  • Labels aren't changing with the up/down status from Prometheus?
    • Ensure that the svgdata plugin has been enabled in draw.io and the svg data IDs match what is in the Flow panel config.
  • Labels are cutoff or not showing fully?
    • If the diagram is too small, the labels can render outside of the diagram and be cutoff. One workaround is to add a large transparent rectangle around the diagram to make it larger.
  • For more troubleshooting and debugging information check out the official Flow plugin documentation.

Sources