Render Mermaid diagrams and worktree images in agent Markdown

2026-10-15 07:27:17 -07:00
parent 1f44bc6d91
commit 4ca6f88861
26 changed files with 5613 additions and 227 deletions
@@ -0,0 +1,55 @@
+import { errorText, h } from "./dom.js";
+let loading;
+let next = 0;
+function load() {
+    loading ??= new Promise((resolve, reject) => {
+        const script = h("script", { src: "/vendor/mermaid.min.js" });
+        script.onload = () => {
+            const m = window.mermaid;
+            const css = getComputedStyle(document.documentElement);
+            const v = (name) => css.getPropertyValue(name).trim();
+            m.initialize({
+                startOnLoad: false,
+                securityLevel: "strict",
+                suppressErrorRendering: true,
+                theme: "base",
+                fontFamily: v("--font"),
+                themeVariables: {
+                    fontFamily: v("--font"),
+                    fontSize: "13px",
+                    background: v("--bg"),
+                    primaryColor: v("--surface"),
+                    primaryTextColor: v("--text"),
+                    primaryBorderColor: v("--border"),
+                    secondaryColor: v("--accent-tint"),
+                    tertiaryColor: v("--raised"),
+                    lineColor: v("--muted"),
+                    textColor: v("--text"),
+                    noteBkgColor: v("--warn-tint"),
+                    noteTextColor: v("--text"),
+                    noteBorderColor: v("--border"),
+                },
+            });
+            resolve(m);
+        };
+        script.onerror = () => reject(new Error("couldn't load /vendor/mermaid.min.js"));
+        document.head.append(script);
+    });
+    return loading;
+}
+export function diagram(src) {
+    const el = h("div", { class: "mermaid-diagram" }, h("pre", { class: "mermaid-source" }, src));
+    void render(el, src);
+    return el;
+}
+async function render(el, src) {
+    try {
+        const m = await load();
+        const { svg } = await m.render(`mermaid-${next++}`, src);
+        el.innerHTML = svg;
+    }
+    catch (err) {
+        el.append(h("div", { class: "mermaid-error" }, `diagram not rendered: ${errorText(err)}`));
+    }
+}
+//# sourceMappingURL=mermaid.js.map