chore(deps): bump mermaid from 11.16.1 to 12.1.0

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+- Web: update Mermaid to 12.1.0 while preserving the existing layout and appearance of published diagrams.
+
 - Use one shared autoreview installation from `openclaw/agent-skills`; repository entrypoints now receive upstream fixes without copied helpers or test suites.
 
 ## 0.24.0 - 2026-09-30

package.json

@@ -133,7 +133,7 @@
     "ignore": "7.0.6",
     "jose": "6.2.9",
     "lucide-react": "1.31.0",
-    "mermaid": "^11.16.1",
+    "mermaid": "12.1.0",
     "mime": "4.1.0",
     "monaco-editor": "0.56.0",
     "parse5": "8.0.1",

src/components/MarkdownPreview.test.tsx

@@ -196,11 +196,22 @@ describe("MarkdownPreview — standard markdown still renders", () => {
     expect(code?.textContent).toContain("const x = 1;");
   });
 
-  it("renders mermaid fenced code blocks as diagrams instead of plain code", () => {
+  it("keeps published Mermaid diagrams on their existing layout and look", async () => {
     const container = renderMarkdown("```mermaid\ngraph TD\n  A --> B\n```");
 
     expect(container.querySelector("[data-mermaid-diagram]")).not.toBeNull();
     expect(container.querySelector("pre code.language-mermaid")).toBeNull();
+
+    const { default: mermaid } = await import("mermaid");
+    await waitFor(() => {
+      expect(mermaid.mermaidAPI.getConfig()).toMatchObject({
+        theme: "neutral",
+        layout: "dagre",
+        look: "classic",
+        securityLevel: "strict",
+        startOnLoad: false,
+      });
+    });
   });
 
   it("cleans up temporary Mermaid nodes when rendering falls back", async () => {

src/components/MarkdownPreview.tsx

@@ -145,6 +145,9 @@ function loadMermaid(): Promise<MermaidApi> {
         startOnLoad: false,
         securityLevel: "strict",
         theme: "neutral",
+        // Published diagrams keep their appearance when Mermaid changes its defaults.
+        layout: "dagre",
+        look: "classic",
       });
       return mermaid;
     });