[FEATURE] Native Mermaid diagram rendering in VSCode extension

Preflight Checklist

• [x] I have searched existing requests and this feature hasn't been requested yet
• [x] This is a single feature request (not multiple features)

Problem Statement

When Claude Code generates diagrams (flowcharts, sequence diagrams, architecture diagrams, etc.), they are displayed as raw mermaid code blocks in the VSCode extension chat. Users must manually copy the code to an external tool or preview to visualize the diagram.

This breaks the conversational flow when exploring codebases, understanding architecture, or discussing system design with Claude.

The existing mermaid feature request (#14375) focuses on ASCII rendering for the CLI, but the VSCode extension has richer UI capabilities that could provide a superior experience.

Proposed Solution

Render mermaid code blocks as interactive diagrams directly in the VSCode extension chat panel using the official mermaid.js library.

Implementation approach:

• Detect mermaid code blocks in Claude's responses
• Render them as SVG diagrams inline using VSCode's webview capabilities
• Optionally include a toggle to show/hide the raw mermaid source
• Support common diagram types: flowcharts, sequence diagrams, class diagrams, ER diagrams, etc.

Example: When Claude outputs:

````

graph TD
    A[User Request] --> B[Claude Code]
    B --> C{Analyze}
    C --> D[Generate Response]

````

The extension would render this as a visual flowchart inline.

Alternative Solutions

• Copy mermaid code to external tools (breaks flow)
• Use ASCII diagrams (limited visual clarity)
• Install separate mermaid preview extensions (requires manual steps)

Priority

Medium - Quality of life improvement

Feature Category

IDE Extensions (VSCode)

Use Case Example

• Exploring and mapping unfamiliar codebases
• Visualizing architecture during code reviews
• Understanding data flow and dependencies
• Documenting system design in conversations