feat: mermaid diagrams - #6455

Merged
Patrick-Erichsen merged 6 commits into
continuedev:mainfrom
uinstinct:mermaid-diagrams-2
Jul 9, 2025
Merged

feat: mermaid diagrams#6455
Patrick-Erichsen merged 6 commits into
continuedev:mainfrom
uinstinct:mermaid-diagrams-2

Conversation

@uinstinct

@uinstinctuinstinct commented Jul 4, 2025•
edited by Patrick-Erichsen
Loading

Copy link
Copy Markdown
Contributor

Description

Render mermaid diagrams into chat area.

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.

@uinstinct
rendering mermaid diagrams
b090f04
basic mermaid js implementation
add panzoom and change color theme variables
@uinstinct
uinstinct requested a review from a team as a code ownerJuly 4, 2025 16:44
@uinstinct
uinstinct requested review from Patrick-Erichsen and removed request for a teamJuly 4, 2025 16:44
@netlify

netlifyBot commented Jul 4, 2025•
edited
Loading

Copy link
Copy Markdown

👷 Deploy request for continuedev pending review.

Visit the deploys page to approve it

NameLink
🔨 Latest commit049fd21

@dosubotdosubotBot added the size:L This PR changes 100-499 lines, ignoring generated files. label Jul 4, 2025
@uinstinct
uinstinctforce-pushed the mermaid-diagrams-2 branch from 2257c73 to b090f04CompareJuly 4, 2025 16:44
@sestinj

sestinj commented Jul 5, 2025•
edited
Loading

Copy link
Copy Markdown
Contributor

@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
Patrick-Erichsen reviewed Jul 7, 2025
View reviewed changes
Comment threadgui/src/components/StyledMarkdownPreview/MermaidBlock.tsx Outdated
return (
<>
{isLoading && (
<div className="text-vsc-foreground text-sm">Generating diagram...</div>

@Patrick-ErichsenPatrick-ErichsenJul 7, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<divclassName="text-vsc-foreground text-sm">Generating diagram...</div>
<divclassName="text-vsc-foreground text-xs">Generating diagram...</div>

nitpick

Patrick-Erichsen
Patrick-Erichsen reviewed Jul 7, 2025
View reviewed changes
Comment threadgui/src/components/StyledMarkdownPreview/MermaidBlock.tsx
setIsLoading(true);
}, [code]);

useDebouncedEffect(

@Patrick-ErichsenPatrick-ErichsenJul 7, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Patrick-Erichsen
Patrick-Erichsen reviewed Jul 7, 2025
View reviewed changes
Comment threadgui/src/components/StyledMarkdownPreview/MermaidBlock.tsx

const MINIMUM_ZOOM_STEP = 0.05;

const MERMAID_THEME_COLORS = {

@Patrick-ErichsenPatrick-ErichsenJul 7, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

@uinstinctuinstinctJul 8, 2025

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you are right. I had tried this.

currently mermaid does not support var for colors
image

Patrick-Erichsen
Patrick-Erichsen reviewed Jul 7, 2025
View reviewed changes

@Patrick-ErichsenPatrick-Erichsen left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Few nitpick comments but this looks great!

Patrick-Erichsen
Patrick-Erichsen previously approved these changes Jul 8, 2025
View reviewed changes

@Patrick-ErichsenPatrick-Erichsen left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@dosubotdosubotBot added the lgtm This PR has been approved by a maintainer label Jul 8, 2025
@Patrick-Erichsen
Patrick-Erichsen merged commit c6b5eb3 into continuedev:mainJul 9, 2025
@github-actionsgithub-actionsBot locked and limited conversation to collaborators Jul 9, 2025
@uinstinct
uinstinct deleted the mermaid-diagrams-2 branch July 9, 2025 17:19
@sestinj

sestinj commented Jul 22, 2025

Copy link
Copy Markdown
Contributor

🎉 This PR is included in version 1.1.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for freeto subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

1 more reviewer
@Patrick-ErichsenPatrick-ErichsenPatrick-Erichsen approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

lgtmThis PR has been approved by a maintainerreleasedsize:LThis PR changes 100-499 lines, ignoring generated files.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@uinstinct@sestinj@Patrick-Erichsen
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
feat: mermaid diagrams - #6455
Merged
Patrick-Erichsen merged 6 commits into
continuedev:mainfrom 
uinstinct:mermaid-diagrams-2
Jul 9, 2025
Merged
feat: mermaid diagrams#6455
Patrick-Erichsen merged 6 commits into
continuedev:mainfrom 
uinstinct:mermaid-diagrams-2
Conversation
@uinstinct
@uinstinctuinstinct
commented
Jul 4, 2025•

edited by Patrick-Erichsen

Loading

Copy link


Copy Markdown

Contributor
Description
Render mermaid diagrams into chat area.
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.
@uinstinct
rendering mermaid diagrams
b090f04
basic mermaid js implementation
add panzoom and change color theme variables
@uinstinct
uinstinct
requested a review
from a team
as a code ownerJuly 4, 2025 16:44
@uinstinct
uinstinct
requested review from
Patrick-Erichsen
and removed request for
a teamJuly 4, 2025 16:44
@netlify
netlifyBot
commented
Jul 4, 2025•

edited

Loading

Copy link


Copy Markdown

👷 Deploy request for continuedev pending review.
Visit the deploys page to approve it
NameLink
🔨 Latest commit049fd21
@dosubotdosubotBot
added
the 
size:L
This PR changes 100-499 lines, ignoring generated files.
label
Jul 4, 2025
@uinstinct
uinstinctforce-pushed
the
mermaid-diagrams-2
branch
from
2257c73 to
b090f04CompareJuly 4, 2025 16:44
@sestinj
sestinj
commented
Jul 5, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
@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
Patrick-Erichsen
reviewed
Jul 7, 2025
View reviewed changes
Comment threadgui/src/components/StyledMarkdownPreview/MermaidBlock.tsx
Outdated

 return (
 <>
 {isLoading && (
 <div className="text-vsc-foreground text-sm">Generating diagram...</div>
@Patrick-ErichsenPatrick-ErichsenJul 7, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.


Suggested change

<divclassName="text-vsc-foreground text-sm">Generating diagram...</div>
<divclassName="text-vsc-foreground text-xs">Generating diagram...</div>
nitpick
Patrick-Erichsen
Patrick-Erichsen
reviewed
Jul 7, 2025
View reviewed changes
Comment threadgui/src/components/StyledMarkdownPreview/MermaidBlock.tsx
 setIsLoading(true);
 }, [code]);

 useDebouncedEffect(
@Patrick-ErichsenPatrick-ErichsenJul 7, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we use async/await here for readability/consistency with the rest of the codebase?
Patrick-Erichsen
Patrick-Erichsen
reviewed
Jul 7, 2025
View reviewed changes
Comment threadgui/src/components/StyledMarkdownPreview/MermaidBlock.tsx

const MINIMUM_ZOOM_STEP = 0.05;

const MERMAID_THEME_COLORS = {
@Patrick-ErichsenPatrick-ErichsenJul 7, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.
@uinstinctuinstinctJul 8, 2025

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you are right. I had tried this.
currently mermaid does not support var for colors
image
Patrick-Erichsen
Patrick-Erichsen
reviewed
Jul 7, 2025
View reviewed changes
@Patrick-ErichsenPatrick-Erichsen
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Few nitpick comments but this looks great!
Patrick-Erichsen
Patrick-Erichsen
previously approved these changes
Jul 8, 2025
View reviewed changes
@Patrick-ErichsenPatrick-Erichsen
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for making those changes! Bummer that mermaid doesn't support CSS vars.
@dosubotdosubotBot
added
the 
lgtm
This PR has been approved by a maintainer
label
Jul 8, 2025
@Patrick-Erichsen
Patrick-Erichsen
merged commit c6b5eb3
into
continuedev:mainJul 9, 2025
@github-actionsgithub-actionsBot
locked and limited conversation to collaborators
Jul 9, 2025
@uinstinct
uinstinct
deleted the

mermaid-diagrams-2

branch
July 9, 2025 17:19
@sestinj
sestinj
commented
Jul 22, 2025

Copy link


Copy Markdown

Contributor
🎉 This PR is included in version 1.1.0 🎉
The release is available on:
Your semantic-release bot 📦🚀
Sign up for freeto subscribe to this conversation on GitHub.
Already have an account?
Sign in.


Reviewers


1 more reviewer

@Patrick-ErichsenPatrick-ErichsenPatrick-Erichsen approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

lgtmThis PR has been approved by a maintainerreleasedsize:LThis PR changes 100-499 lines, ignoring generated files.

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

3 participants

@uinstinct@sestinj@Patrick-Erichsen

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat: mermaid diagrams - #6455
Merged
Patrick-Erichsen merged 6 commits into
continuedev:mainfrom 
uinstinct:mermaid-diagrams-2
Jul 9, 2025
Merged
feat: mermaid diagrams#6455
Patrick-Erichsen merged 6 commits into
continuedev:mainfrom 
uinstinct:mermaid-diagrams-2
Conversation
@uinstinct
@uinstinctuinstinct
commented
Jul 4, 2025•

edited by Patrick-Erichsen

Loading

Copy link


Copy Markdown

Contributor
Description
Render mermaid diagrams into chat area.
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.
@uinstinct
rendering mermaid diagrams
b090f04
basic mermaid js implementation
add panzoom and change color theme variables
@uinstinct
uinstinct
requested a review
from a team
as a code ownerJuly 4, 2025 16:44
@uinstinct
uinstinct
requested review from
Patrick-Erichsen
and removed request for
a teamJuly 4, 2025 16:44
@netlify
netlifyBot
commented
Jul 4, 2025•

edited

Loading

Copy link


Copy Markdown

👷 Deploy request for continuedev pending review.
Visit the deploys page to approve it
NameLink
🔨 Latest commit049fd21
@dosubotdosubotBot
added
the 
size:L
This PR changes 100-499 lines, ignoring generated files.
label
Jul 4, 2025
@uinstinct
uinstinctforce-pushed
the
mermaid-diagrams-2
branch
from
2257c73 to
b090f04CompareJuly 4, 2025 16:44
@sestinj
sestinj
commented
Jul 5, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
@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
Patrick-Erichsen
reviewed
Jul 7, 2025
View reviewed changes
Comment threadgui/src/components/StyledMarkdownPreview/MermaidBlock.tsx
Outdated

 return (
 <>
 {isLoading && (
 <div className="text-vsc-foreground text-sm">Generating diagram...</div>
@Patrick-ErichsenPatrick-ErichsenJul 7, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.


Suggested change

<divclassName="text-vsc-foreground text-sm">Generating diagram...</div>
<divclassName="text-vsc-foreground text-xs">Generating diagram...</div>
nitpick
Patrick-Erichsen
Patrick-Erichsen
reviewed
Jul 7, 2025
View reviewed changes
Comment threadgui/src/components/StyledMarkdownPreview/MermaidBlock.tsx
 setIsLoading(true);
 }, [code]);

 useDebouncedEffect(
@Patrick-ErichsenPatrick-ErichsenJul 7, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we use async/await here for readability/consistency with the rest of the codebase?
Patrick-Erichsen
Patrick-Erichsen
reviewed
Jul 7, 2025
View reviewed changes
Comment threadgui/src/components/StyledMarkdownPreview/MermaidBlock.tsx

const MINIMUM_ZOOM_STEP = 0.05;

const MERMAID_THEME_COLORS = {
@Patrick-ErichsenPatrick-ErichsenJul 7, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.
@uinstinctuinstinctJul 8, 2025

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you are right. I had tried this.
currently mermaid does not support var for colors
image
Patrick-Erichsen
Patrick-Erichsen
reviewed
Jul 7, 2025
View reviewed changes
@Patrick-ErichsenPatrick-Erichsen
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Few nitpick comments but this looks great!
Patrick-Erichsen
Patrick-Erichsen
previously approved these changes
Jul 8, 2025
View reviewed changes
@Patrick-ErichsenPatrick-Erichsen
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for making those changes! Bummer that mermaid doesn't support CSS vars.
@dosubotdosubotBot
added
the 
lgtm
This PR has been approved by a maintainer
label
Jul 8, 2025
@Patrick-Erichsen
Patrick-Erichsen
merged commit c6b5eb3
into
continuedev:mainJul 9, 2025
@github-actionsgithub-actionsBot
locked and limited conversation to collaborators
Jul 9, 2025
@uinstinct
uinstinct
deleted the

mermaid-diagrams-2

branch
July 9, 2025 17:19
@sestinj
sestinj
commented
Jul 22, 2025

Copy link


Copy Markdown

Contributor
🎉 This PR is included in version 1.1.0 🎉
The release is available on:
Your semantic-release bot 📦🚀
Sign up for freeto subscribe to this conversation on GitHub.
Already have an account?
Sign in.


Reviewers


1 more reviewer

@Patrick-ErichsenPatrick-ErichsenPatrick-Erichsen approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

lgtmThis PR has been approved by a maintainerreleasedsize:LThis PR changes 100-499 lines, ignoring generated files.

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

3 participants

@uinstinct@sestinj@Patrick-Erichsen

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat: mermaid diagrams - #6455
Merged
Patrick-Erichsen merged 6 commits into
continuedev:mainfrom 
uinstinct:mermaid-diagrams-2
Jul 9, 2025
Merged
feat: mermaid diagrams#6455
Patrick-Erichsen merged 6 commits into
continuedev:mainfrom 
uinstinct:mermaid-diagrams-2
Conversation
@uinstinct
@uinstinctuinstinct
commented
Jul 4, 2025•

edited by Patrick-Erichsen

Loading

Copy link


Copy Markdown

Contributor
Description
Render mermaid diagrams into chat area.
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.
@uinstinct
rendering mermaid diagrams
b090f04
basic mermaid js implementation
add panzoom and change color theme variables
@uinstinct
uinstinct
requested a review
from a team
as a code ownerJuly 4, 2025 16:44
@uinstinct
uinstinct
requested review from
Patrick-Erichsen
and removed request for
a teamJuly 4, 2025 16:44
@netlify
netlifyBot
commented
Jul 4, 2025•

edited

Loading

Copy link


Copy Markdown

👷 Deploy request for continuedev pending review.
Visit the deploys page to approve it
NameLink
🔨 Latest commit049fd21
@dosubotdosubotBot
added
the 
size:L
This PR changes 100-499 lines, ignoring generated files.
label
Jul 4, 2025
@uinstinct
uinstinctforce-pushed
the
mermaid-diagrams-2
branch
from
2257c73 to
b090f04CompareJuly 4, 2025 16:44
@sestinj
sestinj
commented
Jul 5, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
@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
Patrick-Erichsen
reviewed
Jul 7, 2025
View reviewed changes
Comment threadgui/src/components/StyledMarkdownPreview/MermaidBlock.tsx
Outdated

 return (
 <>
 {isLoading && (
 <div className="text-vsc-foreground text-sm">Generating diagram...</div>
@Patrick-ErichsenPatrick-ErichsenJul 7, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.


Suggested change

<divclassName="text-vsc-foreground text-sm">Generating diagram...</div>
<divclassName="text-vsc-foreground text-xs">Generating diagram...</div>
nitpick
Patrick-Erichsen
Patrick-Erichsen
reviewed
Jul 7, 2025
View reviewed changes
Comment threadgui/src/components/StyledMarkdownPreview/MermaidBlock.tsx
 setIsLoading(true);
 }, [code]);

 useDebouncedEffect(
@Patrick-ErichsenPatrick-ErichsenJul 7, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we use async/await here for readability/consistency with the rest of the codebase?
Patrick-Erichsen
Patrick-Erichsen
reviewed
Jul 7, 2025
View reviewed changes
Comment threadgui/src/components/StyledMarkdownPreview/MermaidBlock.tsx

const MINIMUM_ZOOM_STEP = 0.05;

const MERMAID_THEME_COLORS = {
@Patrick-ErichsenPatrick-ErichsenJul 7, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.
@uinstinctuinstinctJul 8, 2025

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you are right. I had tried this.
currently mermaid does not support var for colors
image
Patrick-Erichsen
Patrick-Erichsen
reviewed
Jul 7, 2025
View reviewed changes
@Patrick-ErichsenPatrick-Erichsen
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Few nitpick comments but this looks great!
Patrick-Erichsen
Patrick-Erichsen
previously approved these changes
Jul 8, 2025
View reviewed changes
@Patrick-ErichsenPatrick-Erichsen
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for making those changes! Bummer that mermaid doesn't support CSS vars.
@dosubotdosubotBot
added
the 
lgtm
This PR has been approved by a maintainer
label
Jul 8, 2025
@Patrick-Erichsen
Patrick-Erichsen
merged commit c6b5eb3
into
continuedev:mainJul 9, 2025
@github-actionsgithub-actionsBot
locked and limited conversation to collaborators
Jul 9, 2025
@uinstinct
uinstinct
deleted the

mermaid-diagrams-2

branch
July 9, 2025 17:19
@sestinj
sestinj
commented
Jul 22, 2025

Copy link


Copy Markdown

Contributor
🎉 This PR is included in version 1.1.0 🎉
The release is available on:
Your semantic-release bot 📦🚀
Sign up for freeto subscribe to this conversation on GitHub.
Already have an account?
Sign in.


Reviewers


1 more reviewer

@Patrick-ErichsenPatrick-ErichsenPatrick-Erichsen approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

lgtmThis PR has been approved by a maintainerreleasedsize:LThis PR changes 100-499 lines, ignoring generated files.

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

3 participants

@uinstinct@sestinj@Patrick-Erichsen

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
feat: mermaid diagrams - #6455
Merged
Patrick-Erichsen merged 6 commits into
continuedev:mainfrom 
uinstinct:mermaid-diagrams-2
Jul 9, 2025
Merged
feat: mermaid diagrams#6455
Patrick-Erichsen merged 6 commits into
continuedev:mainfrom 
uinstinct:mermaid-diagrams-2
Conversation
@uinstinct
@uinstinctuinstinct
commented
Jul 4, 2025•

edited by Patrick-Erichsen

Loading

Copy link


Copy Markdown

Contributor
Description
Render mermaid diagrams into chat area.
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.
@uinstinct
rendering mermaid diagrams
b090f04
basic mermaid js implementation
add panzoom and change color theme variables
@uinstinct
uinstinct
requested a review
from a team
as a code ownerJuly 4, 2025 16:44
@uinstinct
uinstinct
requested review from
Patrick-Erichsen
and removed request for
a teamJuly 4, 2025 16:44
@netlify
netlifyBot
commented
Jul 4, 2025•

edited

Loading

Copy link


Copy Markdown

👷 Deploy request for continuedev pending review.
Visit the deploys page to approve it
NameLink
🔨 Latest commit049fd21
@dosubotdosubotBot
added
the 
size:L
This PR changes 100-499 lines, ignoring generated files.
label
Jul 4, 2025
@uinstinct
uinstinctforce-pushed
the
mermaid-diagrams-2
branch
from
2257c73 to
b090f04CompareJuly 4, 2025 16:44
@sestinj
sestinj
commented
Jul 5, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
@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
Patrick-Erichsen
reviewed
Jul 7, 2025
View reviewed changes
Comment threadgui/src/components/StyledMarkdownPreview/MermaidBlock.tsx
Outdated

 return (
 <>
 {isLoading && (
 <div className="text-vsc-foreground text-sm">Generating diagram...</div>
@Patrick-ErichsenPatrick-ErichsenJul 7, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.


Suggested change

<divclassName="text-vsc-foreground text-sm">Generating diagram...</div>
<divclassName="text-vsc-foreground text-xs">Generating diagram...</div>
nitpick
Patrick-Erichsen
Patrick-Erichsen
reviewed
Jul 7, 2025
View reviewed changes
Comment threadgui/src/components/StyledMarkdownPreview/MermaidBlock.tsx
 setIsLoading(true);
 }, [code]);

 useDebouncedEffect(
@Patrick-ErichsenPatrick-ErichsenJul 7, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we use async/await here for readability/consistency with the rest of the codebase?
Patrick-Erichsen
Patrick-Erichsen
reviewed
Jul 7, 2025
View reviewed changes
Comment threadgui/src/components/StyledMarkdownPreview/MermaidBlock.tsx

const MINIMUM_ZOOM_STEP = 0.05;

const MERMAID_THEME_COLORS = {
@Patrick-ErichsenPatrick-ErichsenJul 7, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.
@uinstinctuinstinctJul 8, 2025

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you are right. I had tried this.
currently mermaid does not support var for colors
image
Patrick-Erichsen
Patrick-Erichsen
reviewed
Jul 7, 2025
View reviewed changes
@Patrick-ErichsenPatrick-Erichsen
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Few nitpick comments but this looks great!
Patrick-Erichsen
Patrick-Erichsen
previously approved these changes
Jul 8, 2025
View reviewed changes
@Patrick-ErichsenPatrick-Erichsen
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for making those changes! Bummer that mermaid doesn't support CSS vars.
@dosubotdosubotBot
added
the 
lgtm
This PR has been approved by a maintainer
label
Jul 8, 2025
@Patrick-Erichsen
Patrick-Erichsen
merged commit c6b5eb3
into
continuedev:mainJul 9, 2025
@github-actionsgithub-actionsBot
locked and limited conversation to collaborators
Jul 9, 2025
@uinstinct
uinstinct
deleted the

mermaid-diagrams-2

branch
July 9, 2025 17:19
@sestinj
sestinj
commented
Jul 22, 2025

Copy link


Copy Markdown

Contributor
🎉 This PR is included in version 1.1.0 🎉
The release is available on:
Your semantic-release bot 📦🚀
Sign up for freeto subscribe to this conversation on GitHub.
Already have an account?
Sign in.


Reviewers


1 more reviewer

@Patrick-ErichsenPatrick-ErichsenPatrick-Erichsen approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

lgtmThis PR has been approved by a maintainerreleasedsize:LThis PR changes 100-499 lines, ignoring generated files.

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

3 participants

@uinstinct@sestinj@Patrick-Erichsen

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat: mermaid diagrams - #6455
Merged
Patrick-Erichsen merged 6 commits into
continuedev:mainfrom 
uinstinct:mermaid-diagrams-2
Jul 9, 2025
Merged
feat: mermaid diagrams#6455
Patrick-Erichsen merged 6 commits into
continuedev:mainfrom 
uinstinct:mermaid-diagrams-2
Conversation
@uinstinct
@uinstinctuinstinct
commented
Jul 4, 2025•

edited by Patrick-Erichsen

Loading

Copy link


Copy Markdown

Contributor
Description
Render mermaid diagrams into chat area.
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.
@uinstinct
rendering mermaid diagrams
b090f04
basic mermaid js implementation
add panzoom and change color theme variables
@uinstinct
uinstinct
requested a review
from a team
as a code ownerJuly 4, 2025 16:44
@uinstinct
uinstinct
requested review from
Patrick-Erichsen
and removed request for
a teamJuly 4, 2025 16:44
@netlify
netlifyBot
commented
Jul 4, 2025•

edited

Loading

Copy link


Copy Markdown

👷 Deploy request for continuedev pending review.
Visit the deploys page to approve it
NameLink
🔨 Latest commit049fd21
@dosubotdosubotBot
added
the 
size:L
This PR changes 100-499 lines, ignoring generated files.
label
Jul 4, 2025
@uinstinct
uinstinctforce-pushed
the
mermaid-diagrams-2
branch
from
2257c73 to
b090f04CompareJuly 4, 2025 16:44
@sestinj
sestinj
commented
Jul 5, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
@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
Patrick-Erichsen
reviewed
Jul 7, 2025
View reviewed changes
Comment threadgui/src/components/StyledMarkdownPreview/MermaidBlock.tsx
Outdated

 return (
 <>
 {isLoading && (
 <div className="text-vsc-foreground text-sm">Generating diagram...</div>
@Patrick-ErichsenPatrick-ErichsenJul 7, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.


Suggested change

<divclassName="text-vsc-foreground text-sm">Generating diagram...</div>
<divclassName="text-vsc-foreground text-xs">Generating diagram...</div>
nitpick
Patrick-Erichsen
Patrick-Erichsen
reviewed
Jul 7, 2025
View reviewed changes
Comment threadgui/src/components/StyledMarkdownPreview/MermaidBlock.tsx
 setIsLoading(true);
 }, [code]);

 useDebouncedEffect(
@Patrick-ErichsenPatrick-ErichsenJul 7, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we use async/await here for readability/consistency with the rest of the codebase?
Patrick-Erichsen
Patrick-Erichsen
reviewed
Jul 7, 2025
View reviewed changes
Comment threadgui/src/components/StyledMarkdownPreview/MermaidBlock.tsx

const MINIMUM_ZOOM_STEP = 0.05;

const MERMAID_THEME_COLORS = {
@Patrick-ErichsenPatrick-ErichsenJul 7, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.
@uinstinctuinstinctJul 8, 2025

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you are right. I had tried this.
currently mermaid does not support var for colors
image
Patrick-Erichsen
Patrick-Erichsen
reviewed
Jul 7, 2025
View reviewed changes
@Patrick-ErichsenPatrick-Erichsen
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Few nitpick comments but this looks great!
Patrick-Erichsen
Patrick-Erichsen
previously approved these changes
Jul 8, 2025
View reviewed changes
@Patrick-ErichsenPatrick-Erichsen
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for making those changes! Bummer that mermaid doesn't support CSS vars.
@dosubotdosubotBot
added
the 
lgtm
This PR has been approved by a maintainer
label
Jul 8, 2025
@Patrick-Erichsen
Patrick-Erichsen
merged commit c6b5eb3
into
continuedev:mainJul 9, 2025
@github-actionsgithub-actionsBot
locked and limited conversation to collaborators
Jul 9, 2025
@uinstinct
uinstinct
deleted the

mermaid-diagrams-2

branch
July 9, 2025 17:19
@sestinj
sestinj
commented
Jul 22, 2025

Copy link


Copy Markdown

Contributor
🎉 This PR is included in version 1.1.0 🎉
The release is available on:
Your semantic-release bot 📦🚀
Sign up for freeto subscribe to this conversation on GitHub.
Already have an account?
Sign in.


Reviewers


1 more reviewer

@Patrick-ErichsenPatrick-ErichsenPatrick-Erichsen approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

lgtmThis PR has been approved by a maintainerreleasedsize:LThis PR changes 100-499 lines, ignoring generated files.

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

3 participants

@uinstinct@sestinj@Patrick-Erichsen

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat: mermaid diagrams - #6455
Merged
Patrick-Erichsen merged 6 commits into
continuedev:mainfrom 
uinstinct:mermaid-diagrams-2
Jul 9, 2025
Merged
feat: mermaid diagrams#6455
Patrick-Erichsen merged 6 commits into
continuedev:mainfrom 
uinstinct:mermaid-diagrams-2
Conversation
@uinstinct
@uinstinctuinstinct
commented
Jul 4, 2025•

edited by Patrick-Erichsen

Loading

Copy link


Copy Markdown

Contributor
Description
Render mermaid diagrams into chat area.
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.
@uinstinct
rendering mermaid diagrams
b090f04
basic mermaid js implementation
add panzoom and change color theme variables
@uinstinct
uinstinct
requested a review
from a team
as a code ownerJuly 4, 2025 16:44
@uinstinct
uinstinct
requested review from
Patrick-Erichsen
and removed request for
a teamJuly 4, 2025 16:44
@netlify
netlifyBot
commented
Jul 4, 2025•

edited

Loading

Copy link


Copy Markdown

👷 Deploy request for continuedev pending review.
Visit the deploys page to approve it
NameLink
🔨 Latest commit049fd21
@dosubotdosubotBot
added
the 
size:L
This PR changes 100-499 lines, ignoring generated files.
label
Jul 4, 2025
@uinstinct
uinstinctforce-pushed
the
mermaid-diagrams-2
branch
from
2257c73 to
b090f04CompareJuly 4, 2025 16:44
@sestinj
sestinj
commented
Jul 5, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
@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
Patrick-Erichsen
reviewed
Jul 7, 2025
View reviewed changes
Comment threadgui/src/components/StyledMarkdownPreview/MermaidBlock.tsx
Outdated

 return (
 <>
 {isLoading && (
 <div className="text-vsc-foreground text-sm">Generating diagram...</div>
@Patrick-ErichsenPatrick-ErichsenJul 7, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.


Suggested change

<divclassName="text-vsc-foreground text-sm">Generating diagram...</div>
<divclassName="text-vsc-foreground text-xs">Generating diagram...</div>
nitpick
Patrick-Erichsen
Patrick-Erichsen
reviewed
Jul 7, 2025
View reviewed changes
Comment threadgui/src/components/StyledMarkdownPreview/MermaidBlock.tsx
 setIsLoading(true);
 }, [code]);

 useDebouncedEffect(
@Patrick-ErichsenPatrick-ErichsenJul 7, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we use async/await here for readability/consistency with the rest of the codebase?
Patrick-Erichsen
Patrick-Erichsen
reviewed
Jul 7, 2025
View reviewed changes
Comment threadgui/src/components/StyledMarkdownPreview/MermaidBlock.tsx

const MINIMUM_ZOOM_STEP = 0.05;

const MERMAID_THEME_COLORS = {
@Patrick-ErichsenPatrick-ErichsenJul 7, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.
@uinstinctuinstinctJul 8, 2025

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you are right. I had tried this.
currently mermaid does not support var for colors
image
Patrick-Erichsen
Patrick-Erichsen
reviewed
Jul 7, 2025
View reviewed changes
@Patrick-ErichsenPatrick-Erichsen
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Few nitpick comments but this looks great!
Patrick-Erichsen
Patrick-Erichsen
previously approved these changes
Jul 8, 2025
View reviewed changes
@Patrick-ErichsenPatrick-Erichsen
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for making those changes! Bummer that mermaid doesn't support CSS vars.
@dosubotdosubotBot
added
the 
lgtm
This PR has been approved by a maintainer
label
Jul 8, 2025
@Patrick-Erichsen
Patrick-Erichsen
merged commit c6b5eb3
into
continuedev:mainJul 9, 2025
@github-actionsgithub-actionsBot
locked and limited conversation to collaborators
Jul 9, 2025
@uinstinct
uinstinct
deleted the

mermaid-diagrams-2

branch
July 9, 2025 17:19
@sestinj
sestinj
commented
Jul 22, 2025

Copy link


Copy Markdown

Contributor
🎉 This PR is included in version 1.1.0 🎉
The release is available on:
Your semantic-release bot 📦🚀
Sign up for freeto subscribe to this conversation on GitHub.
Already have an account?
Sign in.


Reviewers


1 more reviewer

@Patrick-ErichsenPatrick-ErichsenPatrick-Erichsen approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

lgtmThis PR has been approved by a maintainerreleasedsize:LThis PR changes 100-499 lines, ignoring generated files.

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

3 participants

@uinstinct@sestinj@Patrick-Erichsen

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
feat: mermaid diagrams - #6455
Merged
Patrick-Erichsen merged 6 commits into
continuedev:mainfrom 
uinstinct:mermaid-diagrams-2
Jul 9, 2025
Merged
feat: mermaid diagrams#6455
Patrick-Erichsen merged 6 commits into
continuedev:mainfrom 
uinstinct:mermaid-diagrams-2
Conversation
@uinstinct
@uinstinctuinstinct
commented
Jul 4, 2025•

edited by Patrick-Erichsen

Loading

Copy link


Copy Markdown

Contributor
Description
Render mermaid diagrams into chat area.
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.
@uinstinct
rendering mermaid diagrams
b090f04
basic mermaid js implementation
add panzoom and change color theme variables
@uinstinct
uinstinct
requested a review
from a team
as a code ownerJuly 4, 2025 16:44
@uinstinct
uinstinct
requested review from
Patrick-Erichsen
and removed request for
a teamJuly 4, 2025 16:44
@netlify
netlifyBot
commented
Jul 4, 2025•

edited

Loading

Copy link


Copy Markdown

👷 Deploy request for continuedev pending review.
Visit the deploys page to approve it
NameLink
🔨 Latest commit049fd21
@dosubotdosubotBot
added
the 
size:L
This PR changes 100-499 lines, ignoring generated files.
label
Jul 4, 2025
@uinstinct
uinstinctforce-pushed
the
mermaid-diagrams-2
branch
from
2257c73 to
b090f04CompareJuly 4, 2025 16:44
@sestinj
sestinj
commented
Jul 5, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
@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
Patrick-Erichsen
reviewed
Jul 7, 2025
View reviewed changes
Comment threadgui/src/components/StyledMarkdownPreview/MermaidBlock.tsx
Outdated

 return (
 <>
 {isLoading && (
 <div className="text-vsc-foreground text-sm">Generating diagram...</div>
@Patrick-ErichsenPatrick-ErichsenJul 7, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.


Suggested change

<divclassName="text-vsc-foreground text-sm">Generating diagram...</div>
<divclassName="text-vsc-foreground text-xs">Generating diagram...</div>
nitpick
Patrick-Erichsen
Patrick-Erichsen
reviewed
Jul 7, 2025
View reviewed changes
Comment threadgui/src/components/StyledMarkdownPreview/MermaidBlock.tsx
 setIsLoading(true);
 }, [code]);

 useDebouncedEffect(
@Patrick-ErichsenPatrick-ErichsenJul 7, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we use async/await here for readability/consistency with the rest of the codebase?
Patrick-Erichsen
Patrick-Erichsen
reviewed
Jul 7, 2025
View reviewed changes
Comment threadgui/src/components/StyledMarkdownPreview/MermaidBlock.tsx

const MINIMUM_ZOOM_STEP = 0.05;

const MERMAID_THEME_COLORS = {
@Patrick-ErichsenPatrick-ErichsenJul 7, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.
@uinstinctuinstinctJul 8, 2025

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you are right. I had tried this.
currently mermaid does not support var for colors
image
Patrick-Erichsen
Patrick-Erichsen
reviewed
Jul 7, 2025
View reviewed changes
@Patrick-ErichsenPatrick-Erichsen
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Few nitpick comments but this looks great!
Patrick-Erichsen
Patrick-Erichsen
previously approved these changes
Jul 8, 2025
View reviewed changes
@Patrick-ErichsenPatrick-Erichsen
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for making those changes! Bummer that mermaid doesn't support CSS vars.
@dosubotdosubotBot
added
the 
lgtm
This PR has been approved by a maintainer
label
Jul 8, 2025
@Patrick-Erichsen
Patrick-Erichsen
merged commit c6b5eb3
into
continuedev:mainJul 9, 2025
@github-actionsgithub-actionsBot
locked and limited conversation to collaborators
Jul 9, 2025
@uinstinct
uinstinct
deleted the

mermaid-diagrams-2

branch
July 9, 2025 17:19
@sestinj
sestinj
commented
Jul 22, 2025

Copy link


Copy Markdown

Contributor
🎉 This PR is included in version 1.1.0 🎉
The release is available on:
Your semantic-release bot 📦🚀
Sign up for freeto subscribe to this conversation on GitHub.
Already have an account?
Sign in.


Reviewers


1 more reviewer

@Patrick-ErichsenPatrick-ErichsenPatrick-Erichsen approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

lgtmThis PR has been approved by a maintainerreleasedsize:LThis PR changes 100-499 lines, ignoring generated files.

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

3 participants

@uinstinct@sestinj@Patrick-Erichsen