The article directories

    • Introduction to the
    • 1. General
    • 2. Metrics
    • 3. Diagram
    • 4. Display
    • 5. Metric Composites
    • 6. Value Mappings
    • 7. Time range
    • Example 8.
    • Project recommend

The Address portal requires an additional plugin to be installed

Introduction to the

Diagram is a Grafana panel plug-in that provides a way to create flowcharts, sequence diagrams, and Gantt diagrams using the merde.js library.

  • You can define the diagram using the Avi JS syntax.
  • The metric series is used to color the background of shapes/nodes.
  • Compare the target or alias of the series to the ID of the chart node to find a match, and then apply a “fill” style to the shape.
  • Composition can be used to aggregate multiple families of a single node, each with a custom threshold.

Note – special characters in aliases are replaced with underscores

See cli installation or ZIP installation on the official website

grafana-cli plugins install jdbranham-diagram-panel
Copy the code

1. General

Page properties are the same as graph,Graph tutorial portal

2. Metrics

Page properties are the same as graph,Graph tutorial portal

3. Diagram



Use Mermaid JS syntax definition figure, Mermaid JS is very simple, see to learnBlog.csdn.net/fenghuizhid…

Blog.csdn.net/Cribug8080/…

There are two ways to define it:

  1. HTTP: Calling the HTTP interface returns a s03E01 JS string. Note that the response type istext/plain
  2. For example, the A in the figure corresponds to the alias of the Metrics query so that the value is displayed on the node

4. Display



5. Metric Composites



Multiple indicators can be combined into a new indicator that displays the smaller or larger value. (Personal practice, the official website can not understand)

For example, combine indicators A and B to form indicator XYZ

6. Value Mappings

7. Time range

Page properties are the same as graph,Graph tutorial portal

Example 8.

The ES data source is used

Metrics

Diagram



Display



Value Mappings



The effect