代码修改

frontend-web/src/core/utils/files.tsx

@@ -94,10 +94,11 @@ const extensionMap: Record<string, string> = {
   ini: "ini",
   env: "dotenv",
 
-  // Markdown & Docs
-  md: "markdown",
-  mdx: "mdx",
-  rst: "rst",
+  // Markdown & Docs
+  md: "markdown",
+  mdx: "mdx",
+  mmd: "mermaid",
+  rst: "rst",
 
   // SQL
   sql: "sql",

frontend-web/src/core/utils/mermaid.ts

@@ -0,0 +1,75 @@
+import { getFileName } from "./files";
+
+let mermaidInitialized = false;
+
+export function isMermaidFile(filepath: string): boolean {
+  return /\.mmd$/i.test(filepath);
+}
+
+export function getMermaidImageFileName(filepath: string, extension = "svg"): string {
+  return getFileName(filepath).replace(/\.mmd$/i, `.${extension}`);
+}
+
+async function getMermaidModule() {
+  const mod = await import("mermaid");
+  const mermaid = mod.default;
+  if (!mermaidInitialized) {
+    mermaid.initialize({
+      startOnLoad: false,
+      securityLevel: "strict",
+    });
+    mermaidInitialized = true;
+  }
+  return mermaid;
+}
+
+export async function renderMermaidToSvg(source: string): Promise<string> {
+  const text = source.trim();
+  if (!text) {
+    throw new Error("Mermaid 内容为空，无法生成图片");
+  }
+
+  const mermaid = await getMermaidModule();
+  const renderId = `mermaid-preview-${Math.random().toString(36).slice(2, 10)}`;
+  const host = document.createElement("div");
+  host.style.position = "fixed";
+  host.style.left = "-10000px";
+  host.style.top = "-10000px";
+  host.style.pointerEvents = "none";
+  host.style.opacity = "0";
+  document.body.appendChild(host);
+
+  try {
+    const { svg, bindFunctions } = await mermaid.render(renderId, text);
+    host.innerHTML = svg;
+    bindFunctions?.(host);
+    return host.innerHTML;
+  } finally {
+    host.remove();
+  }
+}
+
+export async function openMermaidSvgInNewTab(source: string): Promise<void> {
+  const svg = await renderMermaidToSvg(source);
+  const blob = new Blob([svg], { type: "image/svg+xml;charset=utf-8" });
+  const objectUrl = URL.createObjectURL(blob);
+  const win = window.open(objectUrl, "_blank", "noopener,noreferrer");
+  if (win) {
+    win.opener = null;
+  }
+  window.setTimeout(() => URL.revokeObjectURL(objectUrl), 120_000);
+}
+
+export async function downloadMermaidSvgFile(source: string, filepath: string): Promise<void> {
+  const svg = await renderMermaidToSvg(source);
+  const blob = new Blob([svg], { type: "image/svg+xml;charset=utf-8" });
+  const objectUrl = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = objectUrl;
+  a.download = getMermaidImageFileName(filepath);
+  a.rel = "noopener";
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+  window.setTimeout(() => URL.revokeObjectURL(objectUrl), 30_000);
+}