Tutorial: using the Grafana flowchart plugin to create a process diagram

_{For those of you who don’t want to read through all the details, and just want to see the result, you can skip right to the live demo.}

Why we made this tutorial

Over the past few years, we have deployed many Grafana instances at customers in different industries like Food & Beverage, Technical Textiles, Steel, Energy, … Among these customers, the same question kept coming up:

Is it possible, next to graphs and tables and so on, to create **Process Diagrams** or **SCADA-like screens** in Grafana, and link them to actual data?

A random client

For those of you who are unfamiliar with industrial control systems, SCADA stands for Supervisory Control And Data Acquisition. The use of this kind of system is widespread in industry, as they tie together the different sensors and controllers of an automation system into a visual representation for the Process Operator. This is also the main reason why customers are asking to look at the data collected from their control systems in a similar fashion.

New Grafana flowchart plugin

On the question whether flowcharting was possible with Grafana, we were already getting used to answering “Not really, no…”.

That was until somewhere last year the open source Grafana Flowcharting Plugin was released. The Flowcharting plugin allows you to create any drawing in diagrams.net (which is also open-source) straight from Grafana, and then link it up to process data that was collected using Factry Historian or any other software that stores the data in a Grafana-compatible datasource.

Using this plugin, we can create a visual representation of the process (or a layout based on the P&ID), and then map the text and colors of the drawing to actual data of fill levels, flow rates, valve states and so on:

Creating a process diagram in Grafana

In practice, creating a process flowchart in Grafana is quite simple. We create a new panel in Grafana, choose flowchart as the visualisation type, and click the Edit Draw button which opens up the diagrams.net editor. After creating or editing your drawing, we save and go back to grafana. Under the Mapping section, we can link the elements of the drawing to the actual data. There are many possibilities:

• Replace a text element on the drawing with an actual value.
• Change the color of an object based on thresholds of a certain data point.
• Change the height/width of an object based on a value
• Blink when a critical value is reached
• And many more… see the docs for all the possibilities.

Replay! Taking it one step further…

When we showed this to our customers, they seemed to share our enthusiasm about this new plugin. But almost immediately they came up with a follow-up question:

THAT IS AWESOME! But uhm, can you replay it?

A random client, who can not get enough of Grafana

This is where things get a little hacky. After some research, we found out that you could hijack the Grafana time controls using JavaScript (thank you StackOverflow!): angular.element('grafana-app').injector().get('timeSrv');. The timeSrv object returned by this function call allows us to programmatically set the from and to timestamp from the Grafana timepicker using the timeSrv.setTime(...) function. A call to that function conveniently also refreshed the data in the dashboard with this new range, so all we had to do was implement some logic to continuously set the time based on the (re-)play speed from the dropdown menu.

You can find the complete script on GitHub, and play around with the live demo.

Our thoughts on the Grafana flowchart plugin

Combining the Grafana flowchart plugin with the replay script opens the possibility to create a visual representation of any process and replay historical data on top of it. A bit hacky, but nonetheless quite powerful!