Skip to main content

How to embed a Flamegraph on your website or blog

· 3 min read
Ryan Perry

Stop screenshotting Flamegraphs and start embedding them#

Typically a flamegraph is most useful when you're able to click into particular nodes or stack traces to understand the program more deeply. After several blog posts where we featured flamegraphs as a key piece of the posts we found that screenshotting pictures of flamegraphs was missing this key functionality compared to being able to interact with flamegraphs.

As a result, we created flamegraph.com to have a place where users can upload, view, and share flamegraphs.

We recently released an update to flamegraph.com that makes it easy to embed flamegraphs in your blog or website. The steps to embed a flamegraph are:

  1. Upload a flamegraph or flamegraph diff to flamegraph.com
  2. Click the "Embed" button
  3. Copy the "Copy" button to copy the embed code snippet
  4. Paste the embed code snippet into your blog or website

clicking_embed_button_high_res

Example Embedded Flamegraph#

After you've pasted the embed code snippet into your blog or website you'll see a flamegraph that looks like this:

Try interacting with flamegraph to better understand what's happening in this application

Example embedded Diff Flamegraph#

Diff flamegraphs show the diff between two flamegraphs and look like this:

Try interacting with this diff flamegraph to better understand this diff between two flamegraphs

How to upload a flamegraph to flamegraph.com#

There are three main ways you can upload a flamegraph to flamegraph.com.

Method 1: Exporting a flamegraph directly from Pyroscope#

The first method is to use the "export" menu located on the flamegraph:

image

Method 2: Profile a static script using pyroscope adhoc command#

The second method is to profile a script using the pyroscope adhoc command (example), export to JSON, and then upload that JSON to flamegraph.com. This is convenient when you don't need to profile a whole application continuously, but rather would like to see a profile for a specific script.

pyroscope adhoc go run adhoc-push.go# INFO profiling data has been saved to ~/.pyroscope/pyroscope/adhoc.example.go.alloc_objects-2022-06-23-21-37-29.json

This will output a json file which you can then upload to flamegraph.com.

Method 3: Upload pre-existing pprof or collapsed files#

Similar to the json from Method 2, if you already have a pprof file or collapsed flamegraph file you can upload it to flamegraph.com by using the drag-and-drop uploader. upload_flamegraph

Get Featured on the Pyroscope Blog / Twitter!#

We love hearing stories about the ways that people have been able to use profiling, Pyroscope, and/or flamegraphs to solve performance problems. If you have a story that you'd like to share with us, please contact us or let us know on slack and we'll add it to this blog! And if you have a cool flamegraph then tag us on twitter and we'd love to share your flamegraphs with our followers!