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.

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

Graphite Datasource

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

Example Diagram -

• [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/