Grafana Canvas Panel Design Prompt

You are a senior observability engineer who designs Grafana Canvas panels — free-form layouts where elements (icons, metrics, shapes) are placed on a background and bound to live data.

I will provide:
- The diagram/topology to represent (architecture, rack, pipeline)
- The metrics that should drive each element
- The background image or layout constraints

Your job:

1. **Layout**: add a Canvas panel, set a background (color or image via `background.image`), and place elements; use absolute vs constraint-based positioning (`constraint.horizontal/vertical`) so it scales.
2. **Element types**: use `metric-value` for live numbers, `text`, `icon`, `ellipse`/`rectangle` for nodes, and `server` icons for topology.
3. **Bind data**: set an element's `config.text.field` or `config.value` to a query field (`fieldName`) so it shows live values; use fixed vs field-driven modes.
4. **Dynamic styling**: drive `background.color`/`border.color` by thresholds via field config so a node turns red when unhealthy — data-driven color, not static.
5. **Data links on elements**: attach `links` to elements so clicking a node opens its dashboard (carry `${__url_time_range}`).
6. **Connections**: draw connections between elements to show flow; style them by data where supported.
7. **Inline editing**: use "Set background", element list ordering (z-index), and lock the layout when done to prevent accidental drag.
8. **Performance**: keep element count reasonable; each bound element runs off the same query results, so shape queries efficiently.

Mark DESTRUCTIVE: none — Canvas is display-only. Flag element data links that hit state-changing external actions.

---

Diagram/topology: [DESCRIBE]
Metrics per element: [DESCRIBE]
Background/layout: [DESCRIBE]

Why this prompt works

Canvas is Grafana’s most flexible visualization and the easiest to build badly — elements pinned with absolute coordinates, colors hardcoded instead of threshold-driven, fields mistyped so values silently blank. This prompt anchors layout with constraints, binds each element to a real field, and makes color data-driven so the diagram actually reflects health.

How to use it

1. Sketch the topology and list each node’s metric.
2. Provide the background so element placement is deterministic.
3. Bind color to thresholds, not fixed values.
4. Lock the layout after authoring, but document how to unlock.

Useful commands

# Export the Canvas panel model to review element bindings
curl -s -H "Authorization: Bearer $TOKEN" \
  http://localhost:3000/api/dashboards/uid/topology \
  | jq '.dashboard.panels[] | select(.type=="canvas") | .options.root.elements'

Example config

Canvas panel with a threshold-colored, data-bound node:

{
  "type": "canvas",
  "title": "Payments Topology",
  "options": {
    "root": {
      "background": { "color": { "fixed": "#0b0c0e" } },
      "elements": [
        {
          "type": "metric-value",
          "name": "api-node",
          "config": {
            "text": { "field": "api_qps", "mode": "field" },
            "size": 20,
            "align": "center"
          },
          "background": {
            "color": { "field": "api_health", "fixed": "green" }
          },
          "placement": { "top": 40, "left": 60, "width": 120, "height": 60 },
          "constraint": { "horizontal": "left", "vertical": "top" },
          "links": [
            { "title": "API dashboard", "url": "/d/api/api?${__url_time_range}" }
          ]
        }
      ]
    }
  },
  "fieldConfig": {
    "defaults": {
      "thresholds": { "mode": "absolute", "steps": [
        { "color": "red", "value": null }, { "color": "green", "value": 1 } ] },
      "color": { "mode": "thresholds" }
    }
  }
}

Common findings this catches

• Misrendered on other screens → absolute positioning without constraints.
• Blank elements → bound field name doesn’t match the query.
• Healthy-looking failures → static color instead of thresholds.
• Slow panel → too many elements on one heavy query.
• Bloated JSON → oversized inline background image.
• Dead links → element link missing time range/UID.

When to escalate

• Complex live topology that outgrows Canvas — consider Node Graph.
• Shared architecture diagrams across teams — observability lead.
• Performance issues from many bound elements — query optimization.