Documentationbreadcrumb arrow Pluginsbreadcrumb arrow Business Textbreadcrumb arrow Use casesbreadcrumb arrow Mermaid
Grafana Cloud Enterprise Open source

Mermaid

Mermaid is a popular JavaScript-based diagramming and charting tool that dynamically creates and modifies diagrams using Markdown-defined text definitions.

Note

Previously, two Business Text (formerly Dynamic Text) plugin builds were maintained: one with an embedded Mermaid library and one without.

The Mermaid library size was the primary reason for maintaining two builds. After the addition of the External Resources feature, maintaining two builds is no longer necessary. You can now import the Mermaid library as an external resource.

Mermaid diagrams displayed using the Business Text panel.

Example

Mermaid diagrams example.

Use the following external library

md 
https://esm.sh/mermaid

Code to copy

Use the following for the Content (when your data source is set to return something) or in the Default Content (when your data source returns nothing):

diagram 
<pre class="mermaid">
    graph LR
    A --- B
    B-->C[fa:fa-ban {{data.0.test}}]
    B-->D(fa:fa-spinner);
</pre>

After Content Ready

Warning

Plug-in libraries may change their versions and the code in the example may not work or cause an error.

Use the following for the JavaScript > After Content Ready:

js 
import("https://esm.sh/mermaid").then(({ default: mermaid }) => {
  mermaid.initialize({ startOnLoad: true });

  mermaid.run({
    querySelector: ".mermaid",
    suppressErrors: false,
  });
});