How to visualize workflows and business processes in Grafana: Introducing the Graphviz panel

Here's a scenario that will likely sound familiar:

You’re building an executive overview dashboard that you would put on a wall-mounted screen so the whole room can see how the business is doing at a glance. It’s for a Shopify online store, and displays a mix of business and application signals, including latency panels, error-rate panels, and a big stat panel for revenue-per-week. It looked great. But something is missing.

That’s because the majority of the audience don't think in panels; they think in flows. "Where does the payment actually get stuck?" "Which service is upstream of the checkout?" "How are customers and prospects of the last two weeks segmented?" Those are questions about the layout of the signals, not about any one metric. 

To address this gap, we introduced the Graphviz panel (currently in private preview in all editions of Grafana), which helps you visualize process flows and networks directly in Grafana. In this post, we’ll take a closer look at why we built Graphviz, how it works, and some common use cases to help you get started. The panel is built on the open source Graphviz project, and it renders standard DOT, the same graph-description language Graphviz has refined for over 30 years.

The gap we wanted to address

From time series and stat panels to state-timeline and heatmaps, Grafana supports a wide range of panels to depict a variety of signals. Yet we’ve seen growing demand for a panel that can specifically help you visualize workflows and business processes.

These could include:

• A payment pipeline where a transaction moves through checkout → authorization → fraud check → settlement.
• A network weathermap where a NOC engineer needs to see, at a glance, which link between two sites is saturated.
• A decision tree for an on-call runbook, an order-to-cash business flow, or a manufacturing line.

These are all graphs, consisting of nodes and edges. And until recently, the options for creating them in Grafana all had a catch:

• The canvas panel is a powerful visualization type, but building anything complex means placing every element by hand. There's no layout engine, so a 15-node diagram is an afternoon of nudging boxes and drawing connectors. Rename a node and you're back in there moving things around. 
• The old Angular-based FlowCharting plugin did the job for years, but Angular support ended with Grafana 12, and the community plugin is no longer maintained.

Graphviz: from manual drawing to describing the diagram

The Graphviz panel takes a completely different approach. Instead of drawing a diagram, you describe it, using a purpose-built language called DOT.

If you've never seen DOT, don't worry. Here is how you would use it to create a complete, working diagram:

Copy

digraph {
  Checkout -> Authorization -> "Fraud Check" -> Settlement
}

That's it. You don’t have to place a single box or draw a single arrow. Graphviz reads that description and lays it out for you, handling spacing, alignment, and arrow routing. If you rename a node, add a branch, or insert a step in the middle, the layout just re-flows. This is the magic: the diagram layout is derived automatically from the code.

DOT, which has been around since the late '80s, includes:

• Four layout engines for different use cases: dot for hierarchical top-down (or left-right) flows, neato and fdp for interconnected networks that arrange themselves organically, and circo for circular/radial relationships.
• Rich node and edge styling, including shapes, colors, HTML-like labels, record structures, and clusters/subgraphs to group things.
• Rank direction control (top-to-bottom, left-to-right, and so on) so the same graph can flow whichever way reads best.

And here's the part that matters most for Grafana: the panel binds your live data to that diagram.

Three ways to use Graphviz

The Graphviz panel meets you wherever you are, and there are three main ways to access it:

1. Builder mode: click to add nodes and edges, no code at all. Great for a first sketch.
2. Code mode: write DOT directly, with full control, including dashboard variables like ${service} so one diagram can pivot across environments.
3. Query mode: the data-driven mode where a column in your query returns DOT strings, so the diagram itself is generated from your data. Infrastructure as code, service registries, and dependency graphs can essentially draw themselves.

And because DOT is a well-known language, Grafana Assistant already has a solid foundation in understanding and executing related commands. You can describe the flow you want in natural language and let Assistant write the DOT, so you can go from whiteboard to dashboard in one step.

Let's look at what you can actually visualize with some examples. 

Example diagram types with Graphviz in Grafana

Diagram type 1: Payment flow

Who this is for: financial services and e-commerce teams, or anyone with a multi-step transaction pipeline.

This is the "see your business" diagram. It's a left-to-right flow of a payment moving through your system, and the color of every node reflects the health of that step: green is healthy, yellow is showing early signs of performance issues, and orange means a queue is backing up. One glance tells an ops leader exactly where the money is getting stuck.

Copy

digraph payment_flow {
  rankdir=LR;
  bgcolor="transparent";
  node [shape=box style="rounded,filled" fontname="Inter" fontcolor="white" penwidth=0];
  edge [color="#8e8e8e" fontname="Inter" fontsize=10 fontcolor="#c7c7c7"];

  Checkout     [label="Checkout\n1,240 tx/min"       fillcolor="#73BF69"];
  Authorize    [label="Authorization\n99.2% success"  fillcolor="#73BF69"];
  Fraud        [label="Fraud Check\np95 420ms"         fillcolor="#FADE2A"];
  Settlement   [label="Settlement\n1,180 tx/min"       fillcolor="#73BF69"];
  Payout       [label="Payout\nclearing"               fillcolor="#73BF69"];
  Review       [label="Manual Review\n8 queued"        fillcolor="#FF9830"];

  Checkout -> Authorize [label="1.2k/min"];
  Authorize -> Fraud    [label="99.4%"];
  Fraud -> Settlement   [label="99.4%"];
  Fraud -> Review       [label="0.6%" color="#FF9830"];
  Settlement -> Payout;
}

Below is a payment flow chart, using the Graphviz panel, dot engine, and rank direction left-to-right. Colors here are hard-coded so you can see the idea, but in a real panel, each node's fillcolor is driven by a threshold on a metric like success rate, latency, or queue depth, so the flow re-colors itself as conditions change. Edge labels carry live throughput.

The thing to notice: the fraud check is yellow and the manual-review queue is orange. Although manual reviews and backlogs are rarely taking a spot position in a dashboard of metrics panels, in a view like this, one can easily spot the bottlenecks.

Diagram type 2: Service map 

Who this is for: platform teams, SREs, or anyone running microservices or a service mesh.

Service maps are useful for illustrating how applications, APIs, databases, and supporting services relate to one another. With Graphviz, you define those relationships and render them as a custom service map, which can then be enriched with live telemetry from Grafana. 

Because service dependencies are a messy web rather than a neat line, this is a great fit for the dot engine's hierarchical layout, or neato if you want it to arrange itself organically. Node color is service health; edge width is request rate.

Copy

digraph service_map {
  rankdir=TB;
  bgcolor="transparent";
  node [shape=box style="rounded,filled" fontname="Inter" fontcolor="white" penwidth=0];
  edge [color="#8e8e8e"];

  gateway  [label="api-gateway\n2.1k req/s"   fillcolor="#73BF69"];
  web      [label="web\n1.4k req/s"           fillcolor="#73BF69"];
  checkout [label="checkout\np95 180ms"        fillcolor="#73BF69"];
  catalog  [label="catalog\np95 90ms"          fillcolor="#73BF69"];
  payments [label="payments\np95 890ms"        fillcolor="#FADE2A"];
  orders   [label="orders\np95 210ms"          fillcolor="#73BF69"];
  postgres [label="postgres\n96% conns"        fillcolor="#F2495C"];
  cache    [label="redis\n41% mem"             fillcolor="#73BF69"];

  gateway -> web      [penwidth=4];
  gateway -> catalog  [penwidth=2];
  web -> checkout     [penwidth=3];
  checkout -> payments[penwidth=3 color="#FADE2A"];
  checkout -> orders  [penwidth=2];
  payments -> postgres[penwidth=4 color="#F2495C"];
  orders -> postgres  [penwidth=3 color="#F2495C"];
  catalog -> cache    [penwidth=2];
}

Below is a service map, using the Graphviz panel with dot engine. penwidth on each edge is bound to the request rate, so the busiest paths are the thickest lines. Node fillcolor follows a health threshold.

Read that diagram bottom to top: postgres is magenta (connection pool almost exhausted), and you can trace the thick magenta edges straight up to see that payments and orders are the ones leaning on it—and payments is already going yellow as a result. 

Diagram type 3: Network weathermap

Who this is for: telecommunications companies, network operators, and every network operations center (NOC) that keeps a weathermap in a separate tool.

The classic network weathermap, which in this case depicts sites as nodes and links between them colored and labeled by utilization, is one of the oldest asks in ops visualization. Traditionally, users have had to maintain these visualizations outside of Grafana and then stitch back in via screenshots. With Graphviz, it's just a graph, and the neato engine keeps the geography readable.

Copy

graph weathermap {
  layout=neato;
  bgcolor="transparent";
  node [shape=circle style=filled fontname="Inter" fontcolor="white" width=0.9 penwidth=0];
  edge [fontname="Inter" fontsize=10 fontcolor="#c7c7c7" penwidth=3];

  NYC [label="NYC" fillcolor="#73BF69"];
  CHI [label="CHI" fillcolor="#73BF69"];
  DFW [label="DFW" fillcolor="#FADE2A"];
  LAX [label="LAX" fillcolor="#73BF69"];
  SEA [label="SEA" fillcolor="#73BF69"];
  MIA [label="MIA" fillcolor="#73BF69"];

  NYC -- CHI [label="97%"  color="#73BF69"];
  CHI -- DFW [label="88%"  color="#FF9830"];
  DFW -- LAX [label="61%"  color="#FADE2A"];
  LAX -- SEA [label="22%"  color="#73BF69"];
  NYC -- MIA [label="47%"  color="#73BF69"];
  CHI -- SEA [label="34%"  color="#F2495C"];
  MIA -- DFW [label="55%"  color="#FADE2A"];
 
}

Below is a network weathermap, built with the Graphviz panel and neato engine. Each link's color and label are bound to interface utilization. The CHI–NYC backbone is deep magenta at 97%; the saturated link jumps out without anyone hunting for it.

Notice this one uses graph and -- instead of digraph and -> (that's DOT for an undirected graph, which is exactly right for physical network links that carry traffic both ways).

Diagram type 4: Runbooks as decision trees

Who this is for: on-call engineers and anyone who was ever paged at 3 a.m. and had to remember what to check first.

Not every diagram is about live topology. Sometimes the most valuable thing you can put on a dashboard is a process: a decision tree that walks whoever's on call through "high latency alert → is it the database? → is it the cache? → escalate." The dot engine's diamond shapes and branching are made for this.

Copy

digraph runbook {
  rankdir=TB;
  bgcolor="transparent";
  node [fontname="Inter" style="filled" penwidth=0 fontcolor="white"];
  edge [fontname="Inter" fontsize=10 fontcolor="#c7c7c7"];

  alert   [shape=box style="rounded,filled" label="🚨 High latency alert" fillcolor="#F2495C"];
  db      [shape=diamond label="DB CPU\n> 80%?"   fillcolor="#5794F2"];
  cache   [shape=diamond label="Cache hit\n< 90%?" fillcolor="#5794F2"];
  scaledb [shape=box style="rounded,filled" label="Scale read replicas" fillcolor="#73BF69"];
  warm    [shape=box style="rounded,filled" label="Warm cache /\ncheck evictions" fillcolor="#73BF69"];
  esc     [shape=box style="rounded,filled" label="Page platform on-call" fillcolor="#FF9830"];

  alert -> db;
  db -> scaledb [label="yes" color="#73BF69"];
  db -> cache   [label="no"];
  cache -> warm [label="yes" color="#73BF69"];
  cache -> esc  [label="no"  color="#FF9830"];
}

The below incident decision tree,  built with the Graphviz panel and dot engine, is a mostly static structure. However, you can bind the decision nodes to live metrics so the branch that currently applies lights up, turning a flat runbook into a guided, data-aware one.

Diagram type 5: Pipeline and process flows

Who this is for: platform/DevOps teams (CI/CD) and ops leaders (business processes).

The same pattern scales to CI/CD pipelines: build → test → scan → deploy. Each stage has a color reflecting its last result and is labeled with duration, as well as order-to-cash/fulfillment flows on the business side. Anything you'd draw as boxes-and-arrows on a whiteboard, you can now describe in a few lines of DOT and back with live data.

Copy

digraph pipeline {
  rankdir=LR;
  bgcolor="transparent";
  node [shape=box style="rounded,filled" fontname="Inter" fontcolor="white" penwidth=0];

  build  [label="Build\n1m 42s"      fillcolor="#73BF69"];
  test   [label="Test\n4m 08s"       fillcolor="#73BF69"];
  scan   [label="Security scan\n2 findings" fillcolor="#FADE2A"];
  stage  [label="Deploy staging\n38s" fillcolor="#73BF69"];
  prod   [label="Deploy prod\nawaiting approval" fillcolor="#5794F2"];

  build -> test -> scan -> stage -> prod;
}

Below is a CI/CD pipeline visualization built with the Graphviz panel, dot engine, and a rank direction left-to-right.

How to visualize e-commerce store workflows in Grafana Cloud

Everything above is sample data, chosen to illustrate key use cases. But what about graphs with real data? Here’s a look at some Graphviz panels wired to a real Grafana Cloud stack where metrics and logs are shipped through Alloy, plus a live Shopify store. No mockups: every label and color below is computed from a real query at render time.

First, let’s look at the telemetry pipeline. The data flows from the host's node_exporter → Alloy → out to Grafana Cloud, fanning into metrics, logs, and traces. Node labels come from live queries (rate(...), up), and node color from a threshold; nothing is hand-set.

The first render told us something no dashboard had: the traces node is grey and reads "0 spans/s." Metrics and logs were flowing fine (green), but we weren’t shipping a single span—the tracing side of the pipeline was quietly idle. That's an insight a stat panel alone in a dashboard doesn't communicate effectively, because a metric sitting at zero doesn't draw the eye. A grey box in an otherwise-green pipeline does.

Then, there’s the host itself: CPU, memory, filesystem, disk, and network arranged as a hub around the machine, each colored by a live threshold.

You’ll notice memory is the one warm box; 84% used, while everything else sits healthy green. Better still, while we were building this, load1 crept past its threshold between two renders and the host node recolored itself from green to yellow on its own. That's the major benefit here: the diagram isn't a snapshot you need to update, it's a live view that reacts to your data.

And it isn't just infrastructure. We’ve pointed this same panel at a Shopify store, which we connected through Grafana's Infinity data source. We drew its customer value ladder as a vertical tree; the customer base branching by how many orders each person has placed. And it's no mockup: the numbers refresh live, because an Infinity group-by query buckets customers by order count server-side on every load.

Here is an example of orders data of the past two weeks. Read top-down: the base splits into prospects who've never ordered (160+), one-time buyers (66), and repeat buyers, which narrows again to just eight loyal customers with four or more orders. 

That prospect branch beside the loyal one is the growth conversation, and it's the kind of funnel a team usually rebuilds by hand in a slide deck. It refreshes itself, and its true value is that a non-technical audience that doesn't have access to multiple software platforms can have a birds-eye view from a shared screen on how sales are going. (Its companion "collection map" is live the same way: per-collection product counts pulled straight from Shopify on every refresh.)

How data actually gets inputted into the Graphviz panel

Everything above uses hard-coded colors and labels so you can read the DOT at a glance. In a real dashboard, those values come from your queries. 

The panel gives you a few complementary ways to bind data:

• Color by threshold: map a node's fill to a metric (CPU, success rate, queue depth) and reuse Grafana's named thresholds, so a node goes green → yellow → red on its own.
• Label templates: drop live values into node and edge labels with ${field} syntax, so "1,240 tx/min" is always current.
• Edge width by field: scale penwidth to throughput or connection count, so the busiest paths are the thickest.
• Rich tooltips and data links: hover for detail, click to drill down into the panel or dashboard behind a node.
• Dashboard variables: parameterize the whole diagram with ${service}, ${env}, ${region} so one panel serves every team.

And if you want the diagram itself to be generated from data, such as a service registry, a Terraform state, or a Kubernetes topology, that's query mode: return DOT strings in a column and the graph draws itself. Your infrastructure describes its own picture.

How to get started with the Graphviz panel in Grafana 

Here's the fastest path to get started:

1. Install the Graphviz panel from the Grafana plugin catalog (currently in private preview and requires Grafana 12.3+).
2. Add a panel, pick Graphviz, and paste one of the DOT snippets above into Code mode. You'll have a diagram instantly.
3. Switch a node's color to a threshold and point it at a real query. Watch it re-color with your data.
4. Stuck on the syntax? Ask Grafana Assistant to write the DOT for you. For example: "Draw me a left-to-right payment flow with five steps" and tweak from there.

Go build something, and show us what you make. We'd love to feature it on Grafana Play or Community Slack.

The Graphviz panel is currently in private preview in all editions of Grafana. Installing the panel plugin requires you to be on Grafana 12.3 or above. 

Explore live examples on the Graphviz panel showcase on Grafana Play, and check the plugin docs for the full list of options. DOT language reference lives at graphviz.org.