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.
- Thresholds
- Aggregation Options
- Unbound Color Levels
- Gradient Option for Heatmap style coloring
- Series Specific Overrides are used to specify:
- Threshold to apply to metric
- Color Inversion
- Value of metric to display (average/current/etc)
- Value decimal precision
- Unit Format
Graphite Datasource
With prometheus, be sure to use the transformed alias [with underscores]
Metric
Example Diagram -
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.
| 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 |
| Modifier | Description | Example | Output |
|---|---|---|---|
| # | Raw Value of Series (no decimal limit) | "#metric" | 8.123456789 |
| @ | Formatted (Decimal Limited and Unit Format) | "@metric" | 8.12 Mbps |
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:
With series specific overrides for these two series:
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:
This diagram has "xyz" node, where the A-series is green, but B-Series is yellow. The diagram node shows yellow, along with the value:
This diagram has "xyz" node, where the A-series is green, but B-Series is red. The diagram node shows red, along with the value:
This diagram has "xyz" node, where the A-series is yellow, and B-Series is green. The diagram node shows yellow, along with the value:
- [suggest something]
Add an empty 'gradient' object to the panel json 'legend' object
"legend": { "avg": true, "current": true, "max": true, "min": false, "show": true, "total": false, "gradient": {} },
Special thanks to the Mermaid contributors -
https://github.com/knsv/mermaid/graphs/contributors
https://knsv.github.io/mermaid/
and the D3 contributors -
https://github.com/d3/d3/graphs/contributors
And especially the Grafana contributors -
https://github.com/grafana/grafana/graphs/contributors
http://grafana.org/