feat: mermaid diagrams #6455

uinstinct · 2025-07-04T16:44:38Z

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.

basic mermaid js implementation add panzoom and change color theme variables

netlify · 2025-07-04T16:44:42Z

👷 Deploy request for continuedev pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	`049fd21`

sestinj · 2025-07-05T00:41:47Z

@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 · 2025-07-07T18:19:31Z

gui/src/components/StyledMarkdownPreview/MermaidBlock.tsx

+  return (
+    <>
+      {isLoading && (
+        <div className="text-vsc-foreground text-sm">Generating diagram...</div>


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 · 2025-07-07T18:20:30Z

gui/src/components/StyledMarkdownPreview/MermaidBlock.tsx

+    setIsLoading(true);
+  }, [code]);
+
+  useDebouncedEffect(


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

Patrick-Erichsen · 2025-07-07T18:22:27Z

gui/src/components/StyledMarkdownPreview/MermaidBlock.tsx

+
+const MINIMUM_ZOOM_STEP = 0.05;
+
+const MERMAID_THEME_COLORS = {


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.

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.

sestinj · 2025-07-22T05:10:28Z

🎉 This PR is included in version 1.1.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

rendering mermaid diagrams

b090f04

basic mermaid js implementation add panzoom and change color theme variables

uinstinct requested a review from a team as a code owner July 4, 2025 16:44

uinstinct requested review from Patrick-Erichsen and removed request for a team July 4, 2025 16:44

github-project-automation bot added this to Issues and PRs Jul 4, 2025

github-project-automation bot moved this to Todo in Issues and PRs Jul 4, 2025

dosubot bot added the size:L This PR changes 100-499 lines, ignoring generated files. label Jul 4, 2025

uinstinct force-pushed the mermaid-diagrams-2 branch from 2257c73 to b090f04 Compare July 4, 2025 16:44

uinstinct added 2 commits July 7, 2025 08:51

Merge branch 'main' into mermaid-diagrams-2

4e3a6b3

package-lock update

8302ddc

Patrick-Erichsen reviewed Jul 7, 2025

View reviewed changes

uinstinct added 2 commits July 8, 2025 09:19

Merge branch 'main' into mermaid-diagrams-2

de9399e

review fixes

d6713d8

Patrick-Erichsen previously approved these changes Jul 8, 2025

View reviewed changes

github-project-automation bot moved this from Todo to In Progress in Issues and PRs Jul 8, 2025

dosubot bot added the lgtm This PR has been approved by a maintainer label Jul 8, 2025

Merge branch 'main' into mermaid-diagrams-2

049fd21

uinstinct dismissed Patrick-Erichsen’s stale review via 049fd21 July 9, 2025 03:18

Patrick-Erichsen approved these changes Jul 9, 2025

View reviewed changes

Patrick-Erichsen merged commit c6b5eb3 into continuedev:main Jul 9, 2025
68 of 71 checks passed

github-project-automation bot moved this from In Progress to Done in Issues and PRs Jul 9, 2025

github-actions bot locked and limited conversation to collaborators Jul 9, 2025

uinstinct deleted the mermaid-diagrams-2 branch July 9, 2025 17:19

sestinj added the released label Jul 22, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: mermaid diagrams #6455

feat: mermaid diagrams #6455

Uh oh!

uinstinct commented Jul 4, 2025 •

edited by Patrick-Erichsen

Loading

Uh oh!

netlify bot commented Jul 4, 2025 •

edited

Loading

Uh oh!

sestinj commented Jul 5, 2025 •

edited

Loading

Uh oh!

Patrick-Erichsen Jul 7, 2025

Uh oh!

Patrick-Erichsen Jul 7, 2025

Uh oh!

Patrick-Erichsen Jul 7, 2025

Uh oh!

uinstinct Jul 8, 2025

Uh oh!

Patrick-Erichsen left a comment

Uh oh!

Patrick-Erichsen left a comment

Uh oh!

Uh oh!

sestinj commented Jul 22, 2025

Uh oh!

Uh oh!

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


		const MINIMUM_ZOOM_STEP = 0.05;

		const MERMAID_THEME_COLORS = {

feat: mermaid diagrams #6455

feat: mermaid diagrams #6455

Uh oh!

Conversation

uinstinct commented Jul 4, 2025 • edited by Patrick-Erichsen Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checklist

Screenshots

Tests

Summary by cubic

Uh oh!

netlify bot commented Jul 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

👷 Deploy request for continuedev pending review.

Uh oh!

sestinj commented Jul 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Patrick-Erichsen Jul 7, 2025

Choose a reason for hiding this comment

Uh oh!

Patrick-Erichsen Jul 7, 2025

Choose a reason for hiding this comment

Uh oh!

Patrick-Erichsen Jul 7, 2025

Choose a reason for hiding this comment

Uh oh!

uinstinct Jul 8, 2025

Choose a reason for hiding this comment

Uh oh!

Patrick-Erichsen left a comment

Choose a reason for hiding this comment

Uh oh!

Patrick-Erichsen left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

sestinj commented Jul 22, 2025

Uh oh!

Uh oh!

uinstinct commented Jul 4, 2025 •

edited by Patrick-Erichsen

Loading

netlify bot commented Jul 4, 2025 •

edited

Loading

sestinj commented Jul 5, 2025 •

edited

Loading