update

frontend/src/markdown.js

@@ -6,6 +6,17 @@ import katex from 'katex'
 import 'katex/dist/katex.min.css'
 import DOMPurify from 'dompurify'
 
+// Mermaid lazy laden (schwere Lib): erst beim ersten Diagramm, hält das Initial-Bundle klein.
+// startOnLoad:false → wir rendern gezielt; securityLevel strict: kein HTML/JS in Graphen.
+let _mermaid = null
+async function getMermaid() {
+  if (!_mermaid) {
+    _mermaid = (await import('mermaid')).default
+    _mermaid.initialize({ startOnLoad: false, securityLevel: 'strict', theme: 'default', flowchart: { htmlLabels: false } })
+  }
+  return _mermaid
+}
+
 marked.use(markedHighlight({
   langPrefix: 'hljs language-',
   highlight(code, lang) {
@@ -49,7 +60,33 @@ const inlineMath = {
   renderer(token) { return renderTex(token.text, false) },
 }
 
-marked.use({ extensions: [blockMath, inlineMath] })
+// ```mermaid → <pre class="mermaid">…</pre> (Quelltext escaped; mermaid.run liest den textContent).
+const mermaidBlock = {
+  name: 'mermaidBlock',
+  level: 'block',
+  start(src) { const i = src.indexOf('```mermaid'); return i < 0 ? undefined : i },
+  tokenizer(src) {
+    const m = /^```mermaid[^\n]*\n([\s\S]+?)\n```/.exec(src)
+    if (m) return { type: 'mermaidBlock', raw: m[0], text: m[1] }
+  },
+  renderer(token) {
+    const esc = token.text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+    return `<pre class="mermaid">${esc}</pre>`
+  },
+}
+
+marked.use({ extensions: [blockMath, inlineMath, mermaidBlock] })
+
+// Mermaid-Knoten in einem Container rendern (nach v-html). Idempotent: bereits
+// verarbeitete (data-processed) überspringt mermaid.run; defekte Graphen bleiben als Text.
+export async function renderMermaid(root) {
+  const nodes = root?.querySelectorAll?.('pre.mermaid:not([data-processed="true"])')
+  if (!nodes || !nodes.length) return
+  try {
+    const m = await getMermaid()
+    await m.run({ nodes })
+  } catch { /* defektes Diagramm → Quelltext bleibt sichtbar */ }
+}
 
 // Rohes HTML im Markdown (z. B. <p>, <img> ohne Backticks aus Agenten-Output)
 // als Text anzeigen statt rendern — sonst verschluckt der Browser den Inhalt.