claude-code - 💡(How to fix) Fix [Claude Desktop] Mermaid code blocks not rendered in Claude Code tab [1 participants]

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.