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

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

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:

Full license texts are available in the NOTICES file.

Version

1.0.6 (built on 2026-04-06)