主要观点:通过[@mitsuhiko]的推文发现 Mermaid Gantt 图很适合展示分布式跟踪信息,如 JaegerUI 中的信息,作者近期在使用 OpenTelemetry 且常在文档中用 JaegerUI 截图展示分布式跟踪,现在有了更适合 Markdown 和网页的替代。
关键信息:
- Mermaid 有很好的文档(https://mermaid.js.org/intro/)。
- Gantt 图通常用于沿共享时间线安排多个任务,用于展示分布式跟踪很合理。
- Mermaid Gantt 图的基本语法及示例代码,如展示简单跟踪的代码和更真实示例的代码。
重要细节: - 展示分布式跟踪的 Gantt 图通过指定
dateFormat
为x
(毫秒)和axisFormat
为%S.%L
将时间尺度改为毫秒和秒带毫秒,且将每个服务分开成section
,用:crit
、:done
等标签区分跨度并应用默认样式。 - 给出了简单跟踪和更真实的 Starfish Trace 的 Gantt 图示例代码及渲染效果。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。