Diagram

Panel

Diagram panel for grafana

Build Status

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.

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

Examples

Diagram

Diagram

Diagram Definition

Diagram Definition

Display Options

  • Thresholds
  • Aggregation Options
  • Unbound Color Levels
  • Gradient Option for Heatmap style coloring

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

Roadmap

  • [suggest something]

Upgrading

v1.2 to >1.3.x

Cannot read property 'enabled' of undefined

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": {} },

Thanks!

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/

Install Plugin

Version

Dependencies:
  • Grafana 3.x.x