TIL:美人鱼甘特图非常适合在 Markdown 中显示分布式跟踪

主要观点:通过[@mitsuhiko]的推文发现 Mermaid Gantt 图很适合展示分布式跟踪信息,如 JaegerUI 中的信息,作者近期在使用 OpenTelemetry 且常在文档中用 JaegerUI 截图展示分布式跟踪,现在有了更适合 Markdown 和网页的替代。
关键信息:

  • Mermaid 有很好的文档(https://mermaid.js.org/intro/)。
  • Gantt 图通常用于沿共享时间线安排多个任务,用于展示分布式跟踪很合理。
  • Mermaid Gantt 图的基本语法及示例代码,如展示简单跟踪的代码和更真实示例的代码。
    重要细节:
  • 展示分布式跟踪的 Gantt 图通过指定dateFormatx(毫秒)和axisFormat%S.%L将时间尺度改为毫秒和秒带毫秒,且将每个服务分开成section,用:crit:done等标签区分跨度并应用默认样式。
  • 给出了简单跟踪和更真实的 Starfish Trace 的 Gantt 图示例代码及渲染效果。
阅读 11
0 条评论