Rendering half-written Mermaid blocks in an agent chat

[bobleer]

Hey all — Mermaid output from a coding agent is a slightly weird integration because the source arrives token by token. For a moment you have sequenceD, then one participant, then half an arrow. Calling render on every chunk made the chat flash parse errors while the model was still typing.

In BitFun we ended up showing the source + cursor while the block is streaming. Once the block closes, we wait 200 ms, parse it, then render. A newer chunk wins over any older render result; completed SVGs are cached by source + theme revision; a real parse failure leaves the source visible instead of eating the block.

The small React component is here: MermaidBlock.tsx. It lives in BitFun, the desktop agent we work on.

Curious what other live/AI integrations do here: keep a last-known-good SVG, debounce harder, or just wait for the fence to close?

[pastelsky]

Nice write-up. I work on Pretty Fish, an open-source Mermaid editor, and this is exactly the kind of agent workflow we have been trying to make less awkward.\n\nIn browsers that support WebMCP, an agent can work with the current canvas through page-registered tools. For other MCP clients there is a direct MCP connection, so the agent can create or update diagrams while the source and preview stay visible to the person using it. We also put effort into themes and exports because these diagrams tend to end up in docs and slides, not only in a chat.\n\nIt is still early, but I would genuinely be interested in how others handle partial diagrams and when they decide a streamed block is stable enough to render. The code is here if useful: https://github.com/pastelsky/prettyfish

[bobleer]

Pretty Fish looks like a much nicer place to solve this than a chat renderer :)

Our “stable enough” signal is intentionally boring: the closing fence. The 200 ms wait is only there to coalesce a final source/theme change, not to guess whether a partial diagram happens to parse. While the fence is open we keep showing source, because a last-known-good SVG can quietly lie about what the agent is currently writing.

For the MCP path, do your tools replace the whole Mermaid document or edit structured nodes/edges? If it is the latter, you can probably avoid this state entirely and render after each complete tool call.