feat: mermaid diagrams

[uinstinct]

Description

Render mermaid diagrams into chat area.

• added library https://github.com/mermaid-js/mermaid (for mermaid diagram rendering)
• added library https://github.com/timmywil/panzoom (for panzooming)

Checklist

• [] I've read the contributing guide
• [] The relevant docs, if any, have been updated or created
• [] The relevant tests, if any, have been updated or created

Screenshots

feat.mp4

Tests

[ What tests were added or updated to ensure the changes work as expected? ]

---

Summary by cubic

Added support for rendering Mermaid diagrams in the chat area, including zoom and pan controls.

• Dependencies
  • Added mermaid and @panzoom/panzoom packages.

[netlify]

👷 Deploy request for continuedev pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	d6713d8

[sestinj]

@uinstinct this is beautiful 🤩

Seems like a couple of tests failing, maybe just with import problems?

Run cd gui
Error: src/components/StyledMarkdownPreview/MermaidBlock.tsx([6](https://github.com/continuedev/continue/actions/runs/16078012521/job/45377510205?pr=6455#step:11:7),21): error TS2307: Cannot find module '@panzoom/panzoom' or its corresponding type declarations.
Error: src/components/StyledMarkdownPreview/MermaidBlock.tsx(7,21): error TS230[7](https://github.com/continuedev/continue/actions/runs/16078012521/job/45377510205?pr=6455#step:11:8): Cannot find module 'mermaid' or its corresponding type declarations.
Error: src/components/StyledMarkdownPreview/MermaidBlock.tsx(99,18): error TS7031: Binding element 'svg' implicitly has an 'any' type.
Error: src/components/StyledMarkdownPreview/MermaidBlock.tsx(124,17): error TS7006: Parameter 'err' implicitly has an 'any' type.
Error: Process completed with exit code 2.

Super excited to get this merged, and you should demo it next week!

Edit: I think you just need to run npm i in order to get them into package-lock.json

[Patrick-Erichsen]

Suggested change

	<div className="text-vsc-foreground text-sm">Generating diagram...</div>
	<div className="text-vsc-foreground text-xs">Generating diagram...</div>

nitpick

[Patrick-Erichsen]

Could we use async/await here for readability/consistency with the rest of the codebase?

[Patrick-Erichsen]

Could we pull in any of the theme variables from our tailwind config here? At least for some things like background, primaryColor, etc, it should map pretty cleanly.

[uinstinct]

you are right. I had tried this.

currently mermaid does not support var for colors

[Patrick-Erichsen]

Few nitpick comments but this looks great!

[Patrick-Erichsen]

Thanks for making those changes! Bummer that mermaid doesn't support CSS vars.