ui: Mermaid Diagrams in chat + interactive preview by allozaur · Pull Request #24032 · ggml-org/llama.cpp

allozaur · 2026-06-02T16:02:29Z

Overview

Close #23477

Features

MermaidPreview component that renders diagrams as SVG
Rendering mermaid diagrams inside of code block with copy to clipboard and preview icons
DialogMermaidPreview component allowing to zoom in/out, move around the diagram and download the SVG

Demo

mermaid-demo.mp4

Downloaded SVG File

Requirements

I have read and agree with the contributing guidelines
AI usage disclosure: YES, refactoring

Copilot

Pull request overview

Adds initial Mermaid diagram rendering support to the UI markdown renderer by transforming Mermaid code blocks into Mermaid-compatible <pre class="mermaid"> nodes and running Mermaid client-side after markdown updates.

Changes:

Introduces a new rehypeMermaidPre plugin to convert language-mermaid code blocks into <pre class="mermaid">…</pre>.
Adds lazy-loaded Mermaid rendering in MarkdownContent.svelte, plus styling and special handling for streaming Mermaid blocks.
Adds mermaid as a UI dependency (and updates the lockfile accordingly).

Reviewed changes

Copilot reviewed 3 out of 4 changed files in this pull request and generated 3 comments.

File	Description
tools/ui/src/lib/components/app/content/MarkdownContent/plugins/rehype/mermaid-pre.ts	New rehype transform to convert Mermaid code fences into Mermaid-renderable `<pre>` nodes.
tools/ui/src/lib/components/app/content/MarkdownContent/MarkdownContent.svelte	Runs Mermaid rendering after markdown updates and adds Mermaid-specific styling/streaming UI.
tools/ui/package.json	Adds Mermaid dependency.
tools/ui/package-lock.json	Lockfile updates for Mermaid and its transitive dependencies.

Files not reviewed (1)

tools/ui/package-lock.json: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

allozaur · 2026-06-03T09:50:58Z

+function createButton(
+	className: string,
+	title: string,
+	iconSvg: string,
+	mermaidId: string
+): Element {
+	return {
+		type: 'element',
+		tagName: 'button',
+		properties: {
+			className: [className],
+			'data-mermaid-id': mermaidId,
+			title,
+			type: 'button'
+		},
+		children: [createIconElement(iconSvg)]
+	};
+}
+
+function createCopyButton(mermaidId: string): Element {
+	return createButton(COPY_CODE_BTN_CLASS, 'Copy mermaid syntax', COPY_ICON_SVG, mermaidId);
+}
+
+function createPreviewButton(mermaidId: string): Element {
+	return createButton(PREVIEW_CODE_BTN_CLASS, 'Preview diagram', PREVIEW_ICON_SVG, mermaidId);
+}
+
+function createHeader(mermaidId: string): Element {
+	return {
+		type: 'element',
+		tagName: 'div',
+		properties: { className: [CODE_BLOCK_HEADER_CLASS] },
+		children: [
+			{
+				type: 'element',
+				tagName: 'span',
+				properties: { className: [CODE_LANGUAGE_CLASS] },
+				children: [{ type: 'text', value: 'mermaid' }]
+			},
+			{
+				type: 'element',
+				tagName: 'div',
+				properties: { className: [CODE_BLOCK_ACTIONS_CLASS] },
+				children: [createCopyButton(mermaidId), createPreviewButton(mermaidId)]
+			}
+		]
+	};
+}


This is the same stuff as we have for Code blocks. let's DRY the code for generating the kind of wrappers for enhanced code blocks as well as mermaid blocks

…hancement

…ndering

…ment

ServeurpersoCom · 2026-06-03T13:46:42Z

It's a must-have, I'm going to test it on my server before you merge it.

ServeurpersoCom · 2026-06-03T14:08:50Z

In addition, we can follow-up for raw SVG blocks if we want another time:) I haven't seen any regressions or edge cases.

allozaur · 2026-06-03T14:55:25Z

In addition, we can follow-up for raw SVG blocks if we want another time:) I haven't seen any regressions or edge cases.

@ServeurpersoCom nit sure if there's an issue for that already. If not - can u please create it?

ServeurpersoCom · 2026-06-03T15:03:25Z

In addition, we can follow-up for raw SVG blocks if we want another time:) I haven't seen any regressions or edge cases.

@ServeurpersoCom nit sure if there's an issue for that already. If not - can u please create it?

I've already written the code because you've already done most of the work inside this PR, but the models have a tendency to use an XML block, but if you ask it "put it in an SVG block" it does.

ServeurpersoCom · 2026-06-03T15:06:19Z

In addition, I'm looking into whether we can do real-time SVG rendering as the tokens are generated, but it's really an optional fun feature.

StrikeOner · 2026-06-03T20:23:01Z

Happy to see this landed the day i returned to my computer! Worth noting - statically loading mermaid adds ~5MB to the bundle size; Would have been nice to get credited in some way for it aswell but nevertheless. Good work!

engrtipusultan · 2026-06-04T05:08:27Z

@allozaur I am observing following error in build. Should I open an issue ?

Build Error

vite v7.3.2 building ssr environment for production...
transforming...
✓ 3885 modules transformed.
-- UI: npm run build failed (1)
--   stderr: ✗ Build failed in 6.39s
error during build:
[vite]: Rollup failed to resolve import "mermaid" from "/home/tipu/Development/GH/llama.cpp/tools/ui/src/lib/components/app/content/MarkdownContent/MarkdownContent.svelte".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
    at viteLog (file:///home/tipu/Development/GH/llama.cpp/tools/ui/node_modules/vite/dist/node/chunks/config.js:33639:57)
    at file:///home/tipu/Development/GH/llama.cpp/tools/ui/node_modules/vite/dist/node/chunks/config.js:33673:73
    at onwarn (file:///home/tipu/Development/GH/llama.cpp/tools/ui/node_modules/@sveltejs/kit/src/exports/vite/index.js:963:10)
    at file:///home/tipu/Development/GH/llama.cpp/tools/ui/node_modules/vite/dist/node/chunks/config.js:33673:28
    at onRollupLog (file:///home/tipu/Development/GH/llama.cpp/tools/ui/node_modules/vite/dist/node/chunks/config.js:33668:63)
    at onLog (file:///home/tipu/Development/GH/llama.cpp/tools/ui/node_modules/vite/dist/node/chunks/config.js:33471:4)
    at file:///home/tipu/Development/GH/llama.cpp/tools/ui/node_modules/rollup/dist/es/shared/node-entry.js:21369:32
    at Object.logger [as onLog] (file:///home/tipu/Development/GH/llama.cpp/tools/ui/node_modules/rollup/dist/es/shared/node-entry.js:23364:9)
    at ModuleLoader.handleInvalidResolvedId (file:///home/tipu/Development/GH/llama.cpp/tools/ui/node_modules/rollup/dist/es/shared/node-entry.js:22108:26)
    at ModuleLoader.resolveDynamicImport (file:///home/tipu/Development/GH/llama.cpp/tools/ui/node_modules/rollup/dist/es/shared/node-entry.js:22166:58)

engrtipusultan · 2026-06-04T07:14:56Z

@allozaur I am observing following error in build. Should I open an issue ?
Build Error

Deleting existing llama.cpp/tools/ui/package-lock.json and node_modules folder resolved the issue.

allozaur · 2026-06-04T07:51:37Z

Yeah, @ggerganov sent me that error yesterday, will push a fix later today

engrtipusultan · 2026-06-04T09:56:46Z

Can you kindly confirm what does the following do.

Enable thinking

Enable model thinking/reasoning for each request. When off, the model will skip the thinking phase and go straight to the response.

It does not seem to do anything for me. If I start server with reason either off or on. Reasoning budget button overrides it. What does this option add?

allozaur · 2026-06-04T11:05:27Z

Can you kindly confirm what does the following do.
Enable thinking

Enable model thinking/reasoning for each request. When off, the model will skip the thinking phase and go straight to the response.
It does not seem to do anything for me. If I start server with reason either off or on. Reasoning budget button overrides it. What does this option add?

yeah, it's a deprecated setting, should be removed

allozaur · 2026-06-04T11:07:07Z

Happy to see this landed the day i returned to my computer! Worth noting - statically loading mermaid adds ~5MB to the bundle size; Would have been nice to get credited in some way for it aswell but nevertheless. Good work!

hey! I was almost certain we were both authors of the first commit in this PR, but somehow it got lost! sorry for this!

(cherry picked from commit ee4cf70)

allozaur mentioned this pull request Jun 2, 2026

feat(ui): add lazy-loaded mermaid diagram rendering #23475

Closed

github-actions Bot added examples server/ui labels Jun 2, 2026

allozaur requested review from ServeurpersoCom and ggerganov June 3, 2026 06:55

allozaur marked this pull request as ready for review June 3, 2026 06:55

allozaur requested a review from a team as a code owner June 3, 2026 06:55

Copilot AI review requested due to automatic review settings June 3, 2026 06:55

Copilot started reviewing on behalf of allozaur June 3, 2026 06:55 View session

Copilot AI reviewed Jun 3, 2026

View reviewed changes

Comment thread tools/ui/src/lib/components/app/content/MarkdownContent/plugins/rehype/mermaid-pre.ts Outdated

Comment thread tools/ui/src/lib/components/app/content/MarkdownContent/MarkdownContent.svelte

Comment thread tools/ui/src/lib/components/app/content/MarkdownContent/MarkdownContent.svelte

allozaur force-pushed the 23477-mermaid-diagrams branch from 2a8f56e to 531c6d1 Compare June 3, 2026 07:53

allozaur commented Jun 3, 2026

View reviewed changes

allozaur force-pushed the 23477-mermaid-diagrams branch from 4200215 to 36716a3 Compare June 3, 2026 09:41

allozaur commented Jun 3, 2026

View reviewed changes

allozaur force-pushed the 23477-mermaid-diagrams branch 2 times, most recently from 1c8ac20 to d8423ac Compare June 3, 2026 11:00

allozaur added 14 commits June 3, 2026 14:03

feat: Mermaid Preview + Dialog components

2729a96

chore: add constants for mermaid block wrapper classes

9c8c132

feat: create rehypeEnhanceMermaidBlocks plugin for mermaid diagram en…

04fa383

…hancement

feat: integrate mermaid enhancement plugin and add button click handling

85eebe9

feat: add CSS styling for enhanced mermaid block wrappers

81fef03

fix: update mermaid initialization config and fix incomplete block re…

86dabce

…ndering

chore: formatting

cc8d8cf

fix: prevent concurrent Mermaid diagram rendering during streaming

647e561

refactor: recursively extract text content in mermaid-pre plugin

8888537

refactor: MermaidPreviewControls component

39d9e5f

centralize SVG icon constants in shared constants module

3508a3e

refactor: Cleanup

4b0c3eb

fix: replace state-based guard with immediate node marking

e2d5a29

refactor: Extract markdown handlers and utilities into dedicated modules

1c155b0

allozaur added 2 commits June 3, 2026 14:03

refactor: Cleanup

731d2c8

refactor: Extract shared utilities for code and mermaid block enhance…

4627f4f

…ment

allozaur force-pushed the 23477-mermaid-diagrams branch from d8423ac to 4627f4f Compare June 3, 2026 12:04

ggerganov approved these changes Jun 3, 2026

View reviewed changes

ServeurpersoCom approved these changes Jun 3, 2026

View reviewed changes

allozaur merged commit ee4cf70 into ggml-org:master Jun 3, 2026
6 checks passed

ServeurpersoCom mentioned this pull request Jun 3, 2026

UI/svg block rendering #24080

Open

allozaur deleted the 23477-mermaid-diagrams branch June 4, 2026 12:40

jimbothigpen pushed a commit to jimbothigpen/llama.cpp that referenced this pull request Jun 6, 2026

ui: Mermaid Diagrams in chat + interactive preview (ggml-org#24032)

5057369

(cherry picked from commit ee4cf70)

Conversation

allozaur commented Jun 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Overview

Features

Demo

Downloaded SVG File

Requirements

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

allozaur Jun 3, 2026

Choose a reason for hiding this comment

Uh oh!

ServeurpersoCom commented Jun 3, 2026

Uh oh!

ServeurpersoCom commented Jun 3, 2026

Uh oh!

allozaur commented Jun 3, 2026

Uh oh!

Uh oh!

ServeurpersoCom commented Jun 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ServeurpersoCom commented Jun 3, 2026

Uh oh!

StrikeOner commented Jun 3, 2026

Uh oh!

engrtipusultan commented Jun 4, 2026

Uh oh!

engrtipusultan commented Jun 4, 2026

Uh oh!

allozaur commented Jun 4, 2026

Uh oh!

engrtipusultan commented Jun 4, 2026

Uh oh!

allozaur commented Jun 4, 2026

Uh oh!

allozaur commented Jun 4, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

allozaur commented Jun 2, 2026 •

edited

Loading

ServeurpersoCom commented Jun 3, 2026 •

edited

Loading