savantly.net

Marketplace Downloads License

Release CI (main)

Known Vulnerabilities

Vote for new features

Or help feed my hungry children by donating a few bucks :sweat_smile:
paypal

I’m also available for custom plugin development contracts [and other technology projects]

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.

**Note - Special characters in an alias are replace with an underscore. See character replacement below

Quick Start

A diagram definition uses a Markdown like syntax called Mermaid
This is a simple flow chart definition -

graph LR
      A --> B

Producing this graph

default

Supposing you have 2 series with aliases A-series and B-series
In the diagram plugin, you can modify the definition to match the identities of the data -

default

Character Replacement

The following characters in metric names are automatically replaced with an underscore.

" , ; = : { }

TODO

You can add additional metric replacements in the Display tab, under the section Metric Character Replacement:  
A single character can be specified or a regular expression, along with the text to be used for the replacement (the default is underscore).

Examples

With Subgraph

Simple

With custom shapes, aliases, and icons

graph LR
      LB[Load Balancer] -- route1 --> web1
      LB[Load Balancer] --> web2
      web1 --> app1(fa:fa-check app1)
      web1 ==> app2
      web2 ==> app2(fa:fa-ban app2)
      web2 --> app1
      app1 --> D[(database)]

Diagram

Field Options

Diagram

Field Overrides

Diagram

Custom Theme

Diagram

CSS Override

Diagram

Using Variables

Using background as indicator

Diagram

Options

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).

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/Field 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.

Diagram

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

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

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:

threshold1

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:

threshold2

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:

threshold3

Value or Range to Text Mapping

Value and range mapping can be used to replace numeric values by human readable text.
In the diagram the value of the matching series will be mapped to text:

Diagram

Roadmap

Development

See Here

Thanks!

Special thanks to the Mermaid contributors -
https://github.com/mermaid-js/mermaid/graphs/contributors
https://mermaid-js.github.io/

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/

Learn more