Mermaid Support

Jun 28, 2026

Traces now renders Mermaid diagrams inside your shared sessions. When your agent writes a flowchart, sequence diagram, or architecture diagram in Mermaid syntax, Traces draws it right in the trace view.

How it works

Ever piece of agent and user markdown in a trace flows through one shared Markdown component, which is built on Streamdown with the @streamdown/mermaid plugin wired in.

So, any fenced mermaid block an agent emits gets picked up and rendered as a real diagram. This uses the exact same path that renders assistant responses, user prompts, and sub-agent exchanges.

Diagrams render lazily: a block shows a spinner while its chunk loads and defers until it scrolls into view, so a trace full of diagrams stays fast.

More than flowcharts

Traces ships tuned config for a wide range of Mermaid diagram types, including sequence, state, class, ER, pie, quadrant, XY charts, gantt, journey, timeline, requirement, gitGraph, C4, sankey, mindmap, and kanban.

This gives you a direct path from your real trace data into the open-source model community.

Polished, native styling

Traces applies a custom theme so diagrams match the rest of the product:

Your app's type and colors. Diagrams use Inter at the app's font weight, transparent backgrounds, and a coordinated node.line/text palette.
Light and dark aware. Colors are driven by CSS variables (themeCSS), so a diagram repaints for light/dark without being regenerated.
A tuned chart palette. XY/plot charts use a hand-picked multi-color palette instead of Mermaid's defaults.
Header, copy, and fullscreen. Each diagram gets a block header, a copy button, and a fullscreen control (download and wheel/drag pan-zoom are intentionally off).
Graceful faiulres. If a diagram's syntax is invalid, Traces shows the raw chart source with an expandable error and a Retry button.

See it in action

Update your CLI and share a trace. Any Mermaid your agent writes now renders inline. Happy charting.