grafana-diagram

This is a Grafana panel plugin that provides a way to create flow-charts, sequence diagrams, and gantt charts by leveraging the mermaid.js library.

A diagram can be defined using the Mermaid JS syntax.
Metric series are used to color the background of the shape/node.
The target or 'alias' of the series is compared to the ID of the diagram node to find a match, then applies a 'fill' style to the shape.
Composites can be used to aggregate multiple series for a single node, with custom thresholds for each series.

**Note - Special characters in an alias are replace with an underscore.

Examples

Diagram

Diagram Definition

Display Options

Thresholds
Aggregation Options
Unbound Color Levels
Gradient Option for Heatmap style coloring
Series Specific Overrides are used to specify:
1. Threshold to apply to metric
2. Color Inversion
3. Value of metric to display (average/current/etc)
4. Value decimal precision
5. Unit Format

Diagram Display Options

With Gradient Coloring

Diagram Heatmap

Metrics

Graphite Datasource
Metrics

Prometheus

With prometheus, be sure to use the transformed alias [with underscores]
Metric
Metrics

Example Diagram -
Prometheus Diagram

InfluxDB

InfluxDB Metrics

Link Metrics

Mermaid Notation is the same, but now supports supplying a metric name in the "text".

Specify the metric name in double quotes (for escaping purposes), and optionally use a metric modifier.

Prefix Modifier For Composites

Modifier	Description	Example	Output
#	Raw Value of Series (no decimal limit)	"#metric"	8.123456789
!	Raw Value plus Metric Name	"!metric"	metric: 8.123456789
@	Formatted (Decimal Limited and Unit Format)	"@metric"	8.12 Mbps
&	Formatted (Decimal Limited, Unit Format, and Metric Name)	"&metric"	metric: 8.12 Mbps

Prefix Modifier For Series

Modifier	Description	Example	Output
#	Raw Value of Series (no decimal limit)	"#metric"	8.123456789
@	Formatted (Decimal Limited and Unit Format)	"@metric"	8.12 Mbps

Metric Composites

To reflect multiple metrics and their thresholds on a single node, use metric composites to specify a composite name, and the metrics to be evaluated for the composite.

Series specific overrides will be evaluated for each metric, and the "worst" state of the composite is displayed.

The composite name is evaluated in the Diagram definition.

For example, combining two series "A-series" and "B-series" into a single composite named "xyz", the following can be used:

Composite Editor

With series specific overrides for these two series:

Composite Overrides

When data is received for each series, the thresholds will be evaluated to find the "worst" threshold level, and the metrics and color value will be reflected in the "xyz" composite in the diagram.

Here are examples of the composite in action:

This diagram has "xyz" node, with "all green" threholds for both series A and B:

threshold0