[Claude Desktop] Mermaid code blocks not rendered in Claude Code tab
Related Work
Related to #14375 but scoped differently:
- #14375 targets the terminal TUI (Claude Code running in iTerm/Ghostty/etc.) and proposes ASCII rendering via
mermaid-ascii - This issue targets the GUI host — the built-in Claude Code tab inside the Claude Desktop app — where native SVG rendering (mermaid.js) is feasible and should produce a much better experience than ASCII fallback
Environment
- Claude Desktop with the built-in Claude Code tab
Current Behavior
In the Claude Code tab within Claude Desktop, when the AI response contains a mermaid-tagged fenced code block (triple backticks with the mermaid language identifier), it is displayed as raw source text instead of being rendered into a visual diagram.
Expected Behavior
Mermaid code blocks in AI responses should be rendered as diagrams, consistent with the claude.ai web experience.
Scope (MVP)
Render only mermaid blocks from AI responses. Other sources (file reads, Bash tool output, user input) can be handled in later iterations — AI responses cover the primary use case.
UI Suggestion
Adopt a Code / Preview toggle similar to Claude.ai artifacts, defaulting to Preview:
- Preserves the ability to copy or inspect the source (useful for debugging / re-using the diagram elsewhere)
- Matches existing Anthropic product interaction patterns, so users have no mental-model switching cost
- Satisfies the core need (seeing the diagram, not the source)
Why this matters
Mermaid is a common format for architecture diagrams, flowcharts, data-flow diagrams, and sequence diagrams in AI-assisted workflows. Not rendering them in the Claude Code tab breaks parity with claude.ai and forces users to copy the source into an external tool (mermaid.live, Obsidian, etc.) to visualize — which disrupts the flow of the conversation the tab is designed to support.
Showing cached comments. Read the full discussion on GitHub ↗
6 Comments
Still highly relevant — would appreciate this being prioritized over the
stalelabel.Mermaid is becoming the de-facto format for AI-generated structural output
(architecture diagrams, sequence flows, state machines, dependency graphs).
Modern AI assistants emit them frequently, and other chat UIs (claude.ai web,
ChatGPT, GitHub PR/Issue render, VS Code with bierner.markdown-mermaid)
already visualize them inline.
In the Claude Code tab today, those same blocks display as raw text, which:
reading experience depending on where you happen to be running it.
defeats the chat UI's main value proposition: keeping the thought
in-place.
because the response is unreadable here. That's a quiet
capability-loss, not a neutral one.
Suggested minimum viable scope:
mermaidfenced blocks(toggle, click-to-expand, or hover button)
Happy to test a beta build if there's an internal flag.
+1 We need this too. Important ability to display diagrams. They save on token space and are easier for humans to understand. Hope to see this happen soon!
+1 to this issue. Highly valuable feature unfortunately doesn't work
+1 I use Mermaid quite a bit, and having to copy the code into another tool just to see the diagram gets old pretty quickly
+1 — cross-client consistency matters. The same ```mermaid block renders on
claude.ai web but not in the Desktop Code tab or the CLI. Whatever the
solution lands on (#64643 passthrough for CLI, #13600 renderer), Desktop
should reuse it so behavior is identical across web / desktop / CLI. Right
now the same model response produces different output depending on which
surface the user is in, which is confusing and breaks shared workflows.
+1. We don't want to open other apps to visualize our mermaid flows (eg Cursor).