ti.sil/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2025-12-18 07:15:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refac/fix: mermaid

Browse source
This commit is contained in:
Timothy Jaeryang Baek 2025-10-21 17:03:04 -04:00
parent 0a78ceef6d
commit 9942de8011
2 changed files with 20 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/lib/components/chat/Messages/CodeBlock.svelte
View file

@ -6,7 +6,12 @@
import PyodideWorker from '$lib/workers/pyodide.worker?worker'; import PyodideWorker from '$lib/workers/pyodide.worker?worker';
import { executeCode } from '$lib/apis/utils'; import { executeCode } from '$lib/apis/utils';
import { copyToClipboard, renderMermaidDiagram, renderVegaVisualization } from '$lib/utils'; import {
copyToClipboard,
initMermaid,
renderMermaidDiagram,
renderVegaVisualization
} from '$lib/utils';
import 'highlight.js/styles/github-dark.min.css'; import 'highlight.js/styles/github-dark.min.css';
@ -323,11 +328,19 @@
}; };
}; };
let mermaid = null;
const renderMermaid = async (code) => {
if (!mermaid) {
mermaid = await initMermaid();
}
return await renderMermaidDiagram(mermaid, code);
};
const render = async () => { const render = async () => {
onUpdate(token); onUpdate(token);
if (lang === 'mermaid' && (token?.raw ?? '').slice(-4).includes('```')) { if (lang === 'mermaid' && (token?.raw ?? '').slice(-4).includes('```')) {
try { try {
mermaidHtml = await renderMermaidDiagram(code); mermaidHtml = await renderMermaid(code);
} catch (error) { } catch (error) {
console.error('Failed to render mermaid diagram:', error); console.error('Failed to render mermaid diagram:', error);
const errorMsg = error instanceof Error ? error.message : String(error); const errorMsg = error instanceof Error ? error.message : String(error);

6
src/lib/utils/index.ts
View file

@ -1593,13 +1593,17 @@ export const decodeString = (str: string) => {
} }
}; };
export const renderMermaidDiagram = async (code: string) => { export const initMermaid = async () => {
const { default: mermaid } = await import('mermaid'); const { default: mermaid } = await import('mermaid');
mermaid.initialize({ mermaid.initialize({
startOnLoad: false, // Should be false when using render API startOnLoad: false, // Should be false when using render API
theme: document.documentElement.classList.contains('dark') ? 'dark' : 'default', theme: document.documentElement.classList.contains('dark') ? 'dark' : 'default',
securityLevel: 'loose' securityLevel: 'loose'
}); });
return mermaid;
};
export const renderMermaidDiagram = async (mermaid, code: string) => {
const parseResult = await mermaid.parse(code, { suppressErrors: false }); const parseResult = await mermaid.parse(code, { suppressErrors: false });
if (parseResult) { if (parseResult) {
const { svg } = await mermaid.render(`mermaid-${uuidv4()}`, code); const { svg } = await mermaid.render(`mermaid-${uuidv4()}`, code);