Mermaid Gantt charts for traces

last updated: Oct 20, 2023

https://brycemecum.com/2023/03/31/til-mermaid-tracing/

clever re-use of gantt charts as trace diagrams.

Today I noticed via a tweet by @mitsuhiko that Mermaid Gantt diagrams are great for displaying distributed trace information like what you’d get from JaegerUI.

gantt title Trace Showing Attached and Detached Spans dateFormat x axisFormat %S.%L section Frontend /checkout :crit, 0, 500ms App :300, 180ms POST /api/analytics :done, 450, 70ms GET /assistant/poll :done, 450, 120ms POST /api/analytics :done, 580, 70ms
↑ up