Grafmaid

Grafana + Mermaid.js = Grafmaid

A Grafana panel plugin that renders Mermaid.js diagrams with live data from queries, dashboard variables, and threshold-based styling — turning static architecture diagrams into dynamic, data-driven visuals.

Screenshots

Features

• All Mermaid diagram types — Flowchart, Sequence, Class, State, ER, Gantt, Pie, Mindmap, Timeline, Git Graph, C4, and more
• Dashboard Variables — Use $variable / ${variable} syntax and {{#each var}} multi-value expansion
• Data Queries — Inject live metric values via ${__data.CPU_A:display} shorthand or ${__data.fields.X} full syntax
• Labels — Access metric labels with ${__data.CPU_A.labels.http_status}
• Field Config — Standard Options support: Units, Thresholds, Value Mappings, Color scheme, Decimals
• Threshold coloring — Color diagram nodes dynamically based on threshold values using ${__data.CPU_A:color}
• Special character escaping — Auto-escape [ ] { } | > < in variable values to prevent syntax errors
• Theme-aware — Auto-switches Mermaid theme based on Grafana dark/light mode
• Responsive — SVG diagrams auto-scale with panel dimensions

Requirements

• Grafana >= 12.3.0

Getting Started

1. Install the plugin from the Grafana plugin catalog
2. Add a new panel and select Grafmaid as the visualization
3. Write your Mermaid diagram in the Mermaid Content option
4. (Optional) Configure data source queries to inject live values

Configuration

Panel Options

Option	Default	Description
Mermaid Content	Example flowchart	Mermaid diagram definition with variable/data syntax
Escape special characters	true	Auto-escape Mermaid special characters in values
Max data rows	100	Max rows for {{#each data}} expansion (0 = unlimited)

Standard Options

The panel supports Grafana Standard Options via Field Config:

• Unit — Format numeric values (percent, bytes, etc.)
• Thresholds — Define color breakpoints (default: green base, red at 80)
• Value Mappings — Map values to custom text
• Color scheme — Defaults to "From thresholds (by value)"
• Decimals — Control decimal precision

Data Syntax Quick Reference

Syntax	Description
$variable	Dashboard variable substitution
{{#each var}}...{{value}}...{{/each}}	Multi-value variable expansion
${__data.CPU_A:display}	Formatted value from query (auto value field)
${__data.CPU_A:color}	Threshold color from query
${__data.CPU_A.labels.server}	Metric label value
${__data.fields.Value}	Explicit field access from series[0]
{{#each data.CPU_A}}...{{/each}}	Iterate over query rows

Example: Threshold-colored Diagram

graph LR
    A["${__data.CPU_A.labels.server}"] --> B["CPU: ${__data.CPU_A:display}"]
    style B fill:${__data.CPU_A:color},color:#fff

Documentation

For detailed documentation, see docs/README.md.

Contributing

• Report bugs: GitHub Issues
• Feature requests: GitHub Issues
• Source code: GitHub Repository

License

Apache License 2.0 — see LICENSE.

Third-Party Notices

This plugin bundles the following open-source software:

Package	License	Copyright
mermaid	MIT	© 2014-2022 Knut Sveidqvist
dagre-d3-es	MIT	© 2013 Chris Pettitt
dayjs	MIT	© 2018-present iamkun
lodash-es	MIT	© OpenJS Foundation
marked	MIT	© 2018+ MarkedJS
roughjs	MIT	© 2019 Preet Shihn
KaTeX	MIT	© 2013-2020 Khan Academy
stylis	MIT	© 2016-present Sultan Tarimo
uuid	MIT	© 2010-2020 Robert Kieffer
DOMPurify	MPL-2.0 OR Apache-2.0	© 2024 Cure53

Full license texts are available in the NOTICES file.

Version

1.0.6 (built on 2026-04-06)