@wenyan-md/core 3.0.6 → 3.0.7

package/dist/core.js

@@ -434,6 +434,28 @@ function createMarkedClient() {
       md.use(highlightExtension);
       md.use({
         extensions: [
+          // 宽松 link/image tokenizer，允许 URL 中包含空格（不要求用 <> 包裹）
+          {
+            name: "looseLink",
+            level: "inline",
+            start(src) {
+              return src.match(/!?\[/)?.index;
+            },
+            tokenizer(src) {
+              const rule = /^(!?)\[([^\]]*)\]\(([^)]+)\)/;
+              const match = rule.exec(src);
+              if (!match) return;
+              const isImage = !!match[1];
+              return {
+                type: isImage ? "image" : "link",
+                raw: match[0],
+                text: match[2],
+                href: match[3],
+                tokens: this.lexer.inlineTokens(match[2])
+              };
+            }
+          },
+          // 自定义图片语法扩展 ![](){...}
           {
             name: "attributeImage",
             level: "inline",
@@ -462,7 +484,8 @@ function createMarkedClient() {
             renderer(token) {
               const attrs = stringToMap(token.attrs);
               const styleStr = Array.from(attrs).map(([k, v]) => /^\d+$/.test(v) ? `${k}:${v}px` : `${k}:${v}`).join("; ");
-              return `<img src="${token.href}" alt="${token.text || ""}" title="${token.text || ""}" style="${styleStr}">`;
+              const href = normalizeHref(token.href);
+              return `<img src="${href}" alt="${token.text || ""}" title="${token.text || ""}" style="${styleStr}">`;
             }
           }
         ]
@@ -490,7 +513,12 @@ function createMarkedClient() {
           },
           // 重写普通图片 (处理标准 Markdown 图片)
           image(token) {
-            return `<img src="${token.href}" alt="${token.text || ""}" title="${token.title || token.text || ""}">`;
+            const href = normalizeHref(token.href);
+            return `<img src="${href}" alt="${token.text || ""}" title="${token.title || token.text || ""}">`;
+          },
+          link(token) {
+            const href = normalizeHref(token.href);
+            return `<a href="${href}">${this.parser.parseInline(token.tokens)}</a>`;
           }
         }
       });
@@ -503,10 +531,21 @@ function createMarkedClient() {
      */
     async parse(markdown) {
       await configure();
-      return md.parse(markdown);
+      return await md.parse(markdown);
     }
   };
 }
+function normalizeHref(href) {
+  href = href.trim();
+  if (href.startsWith("<") && href.endsWith(">")) {
+    href = href.slice(1, -1);
+  }
+  try {
+    return encodeURI(href);
+  } catch {
+    return href;
+  }
+}
 let htmlHandlerRegistered = false;
 function createMathJaxParser(options = {}) {
   const adaptor = liteAdaptor();
@@ -565,6 +604,36 @@ function createMathJaxParser(options = {}) {
     }
   };
 }
+function createMermaidParser(options) {
+  const resolvedOptions = resolveMermaidOptions(options);
+  return {
+    async parser(html) {
+      if (!resolvedOptions.enabled || !containsMermaidCodeBlock(html)) {
+        return html;
+      }
+      if (!resolvedOptions.renderer) {
+        throw new Error("Mermaid 渲染已启用，但未配置 renderer");
+      }
+      return await resolvedOptions.renderer.renderHtml(html);
+    }
+  };
+}
+function resolveMermaidOptions(options) {
+  if (options === void 0) {
+    return { enabled: false };
+  }
+  if (typeof options === "boolean") {
+    return { enabled: options };
+  }
+  return {
+    enabled: options.enabled ?? true,
+    renderer: options.renderer
+  };
+}
+function containsMermaidCodeBlock(html) {
+  return html.includes("language-mermaid");
+}
+const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
 function wechatPostRender(element) {
   const mathElements = element.querySelectorAll("mjx-container");
   mathElements.forEach((mathContainer) => {
@@ -583,6 +652,13 @@ function wechatPostRender(element) {
       }
     }
   });
+  const mermaidSvgs = element.querySelectorAll('[data-wenyan-diagram="mermaid"] svg');
+  mermaidSvgs.forEach((svg) => {
+    svg.style.maxWidth = "100%";
+    svg.style.height = "auto";
+    inlineMermaidSvgStyles(svg);
+    flattenMermaidMarkers(svg);
+  });
   const codeElements = element.querySelectorAll("pre code");
   codeElements.forEach((codeEl) => {
     codeEl.innerHTML = codeEl.innerHTML.replace(/\n/g, "<br>").replace(/(>[^<]+)|(^[^<]+)/g, (str) => str.replace(/\s/g, "&nbsp;"));
@@ -599,6 +675,268 @@ function wechatPostRender(element) {
   element.style.color = "rgb(0, 0, 0)";
   element.style.caretColor = "rgb(0, 0, 0)";
 }
+function inlineMermaidSvgStyles(svg) {
+  const styleElements = Array.from(svg.querySelectorAll("style"));
+  styleElements.forEach((styleElement) => {
+    applyInlineStylesFromCss(svg, styleElement.textContent ?? "");
+    styleElement.remove();
+  });
+}
+function flattenMermaidMarkers(svg) {
+  const convertedMarkerIds = /* @__PURE__ */ new Set();
+  const markedElements = Array.from(svg.querySelectorAll("[marker-start], [marker-end]"));
+  markedElements.forEach((markedElement) => {
+    convertMarkerReference(svg, markedElement, "start", convertedMarkerIds);
+    convertMarkerReference(svg, markedElement, "end", convertedMarkerIds);
+  });
+  convertedMarkerIds.forEach((markerId) => {
+    findMarkerById(svg, markerId)?.remove();
+  });
+  svg.querySelectorAll("defs").forEach((defs) => {
+    if (!defs.children.length) {
+      defs.remove();
+    }
+  });
+}
+function convertMarkerReference(svg, sourceElement, position, convertedMarkerIds) {
+  const markerAttribute = `marker-${position}`;
+  const markerValue = sourceElement.getAttribute(markerAttribute);
+  if (!markerValue) {
+    return;
+  }
+  const markerId = extractMarkerId(markerValue);
+  if (!markerId) {
+    return;
+  }
+  const marker = findMarkerById(svg, markerId);
+  if (!marker) {
+    return;
+  }
+  const flattenedMarker = createFlattenedMarker(svg, sourceElement, marker, position);
+  if (!flattenedMarker) {
+    return;
+  }
+  sourceElement.parentNode?.appendChild(flattenedMarker);
+  sourceElement.removeAttribute(markerAttribute);
+  convertedMarkerIds.add(markerId);
+}
+function createFlattenedMarker(svg, sourceElement, marker, position) {
+  const terminalPoints = getTerminalPoints(sourceElement, position);
+  if (!terminalPoints) {
+    return null;
+  }
+  const ownerDocument = svg.ownerDocument;
+  const markerGroup = ownerDocument.createElementNS(SVG_NAMESPACE, "g");
+  const markerStyle = marker.getAttribute("style");
+  const angle = getMarkerAngleDegrees(position, terminalPoints.anchor, terminalPoints.reference, marker);
+  markerGroup.setAttribute("data-wenyan-marker", position);
+  markerGroup.setAttribute("transform", buildMarkerTransform(marker, terminalPoints.anchor, angle, position));
+  if (markerStyle) {
+    markerGroup.setAttribute("style", markerStyle);
+  }
+  Array.from(marker.children).forEach((child) => {
+    markerGroup.appendChild(child.cloneNode(true));
+  });
+  return markerGroup;
+}
+function getTerminalPoints(sourceElement, position) {
+  const points = getEdgePoints(sourceElement);
+  if (points.length < 2) {
+    return null;
+  }
+  if (position === "end") {
+    const anchor2 = points.at(-1);
+    if (!anchor2) {
+      return null;
+    }
+    const reference2 = findDistinctPoint(points, points.length - 2, -1, anchor2);
+    return reference2 ? { anchor: anchor2, reference: reference2 } : null;
+  }
+  const anchor = points[0];
+  if (!anchor) {
+    return null;
+  }
+  const reference = findDistinctPoint(points, 1, 1, anchor);
+  return reference ? { anchor, reference } : null;
+}
+function getEdgePoints(sourceElement) {
+  const encodedPoints = sourceElement.getAttribute("data-points");
+  if (encodedPoints) {
+    const decodedPoints = decodeMermaidPoints(sourceElement, encodedPoints);
+    if (decodedPoints.length >= 2) {
+      return decodedPoints;
+    }
+  }
+  const polyPoints = sourceElement.getAttribute("points");
+  if (polyPoints) {
+    return parseCoordinatePairs(polyPoints);
+  }
+  const pathData = sourceElement.getAttribute("d");
+  if (pathData) {
+    return parseCoordinatePairs(pathData);
+  }
+  return [];
+}
+function decodeMermaidPoints(sourceElement, encodedPoints) {
+  const defaultView = sourceElement.ownerDocument.defaultView;
+  try {
+    const decoded = defaultView?.atob?.(encodedPoints) ?? (typeof atob === "function" ? atob(encodedPoints) : "");
+    const parsed = JSON.parse(decoded);
+    return parsed.filter((point) => typeof point.x === "number" && typeof point.y === "number").map((point) => ({
+      x: point.x,
+      y: point.y
+    }));
+  } catch {
+    return [];
+  }
+}
+function parseCoordinatePairs(value) {
+  const matches = Array.from(value.matchAll(/-?\d*\.?\d+(?:e[-+]?\d+)?/gi), (match) => Number(match[0]));
+  const points = [];
+  for (let index = 0; index + 1 < matches.length; index += 2) {
+    points.push({
+      x: matches[index],
+      y: matches[index + 1]
+    });
+  }
+  return points;
+}
+function findDistinctPoint(points, startIndex, step, anchor) {
+  for (let index = startIndex; index >= 0 && index < points.length; index += step) {
+    const point = points[index];
+    if (!point) {
+      continue;
+    }
+    if (point.x !== anchor.x || point.y !== anchor.y) {
+      return point;
+    }
+  }
+  return null;
+}
+function getMarkerAngleDegrees(position, anchor, reference, marker) {
+  const baseAngle = position === "end" ? Math.atan2(anchor.y - reference.y, anchor.x - reference.x) : Math.atan2(reference.y - anchor.y, reference.x - anchor.x);
+  const orient = marker.getAttribute("orient")?.trim();
+  let angle = baseAngle * 180 / Math.PI;
+  if (orient === "auto-start-reverse" && position === "start") {
+    angle += 180;
+  } else if (orient && orient !== "auto") {
+    const offset = Number.parseFloat(orient);
+    if (Number.isFinite(offset)) {
+      angle += offset;
+    }
+  }
+  return angle;
+}
+function buildMarkerTransform(marker, anchor, angle, position) {
+  const viewBox = parseViewBox(marker.getAttribute("viewBox"));
+  const markerWidth = parseNumericAttribute(marker.getAttribute("markerWidth"), viewBox?.width ?? 1);
+  const markerHeight = parseNumericAttribute(marker.getAttribute("markerHeight"), viewBox?.height ?? 1);
+  const viewBoxWidth = viewBox?.width ?? markerWidth;
+  const viewBoxHeight = viewBox?.height ?? markerHeight;
+  const scaleX = viewBoxWidth === 0 ? 1 : markerWidth / viewBoxWidth;
+  const scaleY = viewBoxHeight === 0 ? 1 : markerHeight / viewBoxHeight;
+  const offsetX = parseNumericAttribute(marker.getAttribute("refX")) + (viewBox?.minX ?? 0);
+  const offsetY = parseNumericAttribute(marker.getAttribute("refY")) + (viewBox?.minY ?? 0);
+  const adjustedAnchor = adjustMarkerAnchor(anchor, angle, scaleX, viewBox, offsetX, position);
+  return [
+    `translate(${adjustedAnchor.x} ${adjustedAnchor.y})`,
+    `rotate(${angle})`,
+    `scale(${scaleX} ${scaleY})`,
+    `translate(${-offsetX} ${-offsetY})`
+  ].join(" ");
+}
+function adjustMarkerAnchor(anchor, angle, scaleX, viewBox, refX, position) {
+  const minX = viewBox?.minX ?? 0;
+  const maxX = viewBox ? viewBox.minX + viewBox.width : refX;
+  const overlap = position === "start" ? Math.max(0, refX - minX) : Math.max(0, maxX - refX);
+  if (overlap === 0) {
+    return anchor;
+  }
+  const distance = overlap * scaleX;
+  const radians = angle * Math.PI / 180;
+  const direction = position === "start" ? 1 : -1;
+  return {
+    x: anchor.x + Math.cos(radians) * distance * direction,
+    y: anchor.y + Math.sin(radians) * distance * direction
+  };
+}
+function parseViewBox(viewBoxValue) {
+  if (!viewBoxValue) {
+    return null;
+  }
+  const values = viewBoxValue.trim().split(/[\s,]+/).map((value) => Number.parseFloat(value));
+  if (values.length !== 4 || values.some((value) => !Number.isFinite(value))) {
+    return null;
+  }
+  return {
+    minX: values[0],
+    minY: values[1],
+    width: values[2],
+    height: values[3]
+  };
+}
+function parseNumericAttribute(value, fallback = 0) {
+  if (!value) {
+    return fallback;
+  }
+  const parsed = Number.parseFloat(value);
+  return Number.isFinite(parsed) ? parsed : fallback;
+}
+function extractMarkerId(markerValue) {
+  const match = markerValue.match(/url\(#([^)]+)\)/);
+  return match?.[1] ?? null;
+}
+function findMarkerById(svg, markerId) {
+  return Array.from(svg.querySelectorAll("marker")).find((marker) => marker.getAttribute("id") === markerId);
+}
+function applyInlineStylesFromCss(svg, cssText) {
+  const ast = csstree.parse(cssText, parseOptions);
+  csstree.walk(ast, {
+    visit: "Rule",
+    enter(node) {
+      if (node.prelude.type !== "SelectorList") return;
+      const declarations = node.block.children.toArray().filter((decl) => decl.type === "Declaration");
+      if (declarations.length === 0) return;
+      node.prelude.children.forEach((selectorNode) => {
+        const selector = csstree.generate(selectorNode).trim();
+        if (!selector || selector.includes("::")) return;
+        const targets = resolveInlineTargets(svg, selector);
+        targets.forEach((target) => {
+          declarations.forEach((decl) => {
+            const value = csstree.generate(decl.value);
+            const priority = decl.important ? "important" : "";
+            target.style.setProperty(decl.property, value, priority);
+          });
+        });
+      });
+    }
+  });
+}
+function resolveInlineTargets(svg, selector) {
+  if (selector === ":root") {
+    return [svg];
+  }
+  if (selector.includes(":")) {
+    return [];
+  }
+  const targets = /* @__PURE__ */ new Set();
+  if (svg.matches(selector)) {
+    targets.add(svg);
+  }
+  svg.querySelectorAll(selector).forEach((node) => {
+    if (isInlineStyleTarget(node)) {
+      targets.add(node);
+    }
+  });
+  return Array.from(targets);
+}
+function isInlineStyleTarget(node) {
+  const defaultView = node.ownerDocument.defaultView;
+  if (!defaultView) {
+    return false;
+  }
+  return node instanceof defaultView.SVGElement || node instanceof defaultView.HTMLElement;
+}
 const themeModifier = createCssModifier({});
 function renderTheme(wenyanElement, themeCss) {
   const modifiedCss = themeModifier(themeCss);
@@ -1169,10 +1507,104 @@ function getContentForToutiao(wenyanElement) {
   });
   return wenyanElement.outerHTML;
 }
+const DEFAULT_MERMAID_CONFIG = {
+  htmlLabels: false,
+  flowchart: {
+    htmlLabels: false
+  }
+};
+async function replaceMermaidCodeBlocks(root, renderDiagram) {
+  const codeBlocks = Array.from(root.querySelectorAll("pre > code.language-mermaid"));
+  if (codeBlocks.length === 0) {
+    return false;
+  }
+  const ownerDocument = getOwnerDocument(root);
+  for (const [index, codeBlock] of codeBlocks.entries()) {
+    const pre = codeBlock.parentElement;
+    const parent = pre?.parentElement;
+    if (!pre || !parent) {
+      continue;
+    }
+    const code = codeBlock.textContent ?? "";
+    const svg = await renderDiagram({
+      id: `wenyan-mermaid-${index + 1}`,
+      code
+    });
+    const figure = ownerDocument.createElement("figure");
+    figure.setAttribute("data-wenyan-diagram", "mermaid");
+    figure.innerHTML = svg.trim();
+    pre.replaceWith(figure);
+  }
+  return true;
+}
+function createBrowserMermaidRenderer(options = {}) {
+  let mermaidModulePromise = null;
+  return {
+    async renderHtml(html) {
+      if (typeof DOMParser === "undefined") {
+        throw new Error("当前环境不支持浏览器 Mermaid 渲染");
+      }
+      const parser = new DOMParser();
+      const document = parser.parseFromString(`<body>${html}</body>`, "text/html");
+      const root = document.body;
+      const mermaid = await getMermaidModule();
+      mermaid.initialize(createMermaidConfig(options.mermaidConfig));
+      try {
+        await replaceMermaidCodeBlocks(root, async ({ id, code }) => {
+          const { svg } = await mermaid.render(id, code);
+          return svg;
+        });
+      } catch (error) {
+        throw createMermaidRenderError(error);
+      }
+      return root.innerHTML;
+    }
+  };
+  async function getMermaidModule() {
+    if (!mermaidModulePromise) {
+      mermaidModulePromise = import("mermaid");
+    }
+    const module = await mermaidModulePromise;
+    return module.default;
+  }
+}
+function createMermaidRenderError(error) {
+  const message = error instanceof Error ? error.message : String(error);
+  return new Error(`Mermaid 图表渲染失败: ${message}`);
+}
+function createMermaidConfig(overrides = {}) {
+  const flowchartOverrides = getRecord(overrides.flowchart);
+  return {
+    ...DEFAULT_MERMAID_CONFIG,
+    startOnLoad: false,
+    securityLevel: "strict",
+    ...overrides,
+    flowchart: {
+      ...getRecord(DEFAULT_MERMAID_CONFIG.flowchart),
+      ...flowchartOverrides
+    }
+  };
+}
+function getOwnerDocument(root) {
+  if ("createElement" in root) {
+    return root;
+  }
+  if ("ownerDocument" in root && root.ownerDocument) {
+    return root.ownerDocument;
+  }
+  throw new Error("无法获取 Mermaid 渲染所需的 Document");
+}
+function getRecord(value) {
+  if (typeof value === "object" && value !== null && !Array.isArray(value)) {
+    return value;
+  }
+  return {};
+}
 async function createWenyanCore(options = {}) {
-  const { isConvertMathJax = true, isWechat = true } = options;
+  const { isConvertMathJax = true, isWechat = true, mermaid } = options;
   const markedClient = createMarkedClient();
   const mathJaxParser = createMathJaxParser();
+  const mermaidParser = createMermaidParser(mermaid);
   registerAllBuiltInThemes();
   registerBuiltInHlThemes();
   registerBuiltInMacStyle();
@@ -1181,11 +1613,11 @@ async function createWenyanCore(options = {}) {
       return await handleFrontMatter(markdown);
     },
     async renderMarkdown(markdown) {
-      const html = await markedClient.parse(markdown);
+      let html = await markedClient.parse(markdown);
       if (isConvertMathJax) {
-        return mathJaxParser.parser(html);
+        html = mathJaxParser.parser(html);
       }
-      return html;
+      return await mermaidParser.parser(html);
     },
     async applyStylesWithTheme(wenyanElement, options2 = {}) {
       const {
@@ -1288,7 +1720,10 @@ const DEFAULT_CSS_UPDATES = {
 };
 export {
   addFootnotes,
+  createBrowserMermaidRenderer,
   createCssModifier,
+  createMermaidConfig,
+  createMermaidRenderError,
   createWenyanCore,
   getAllGzhThemes,
   getAllHlThemes,
@@ -1305,6 +1740,7 @@ export {
   registerHlTheme,
   registerMacStyle,
   registerTheme,
+  replaceMermaidCodeBlocks,
   sansSerif,
   serif
 };

package/dist/types/core/index.d.ts

@@ -1,7 +1,9 @@
-import { StyledContent } from "../node/types.js";
+import { type FrontMatterResult } from "./parser/frontMatterParser.js";
+import type { MermaidOptions } from "./mermaid.js";
 export interface WenyanOptions {
     isConvertMathJax?: boolean;
     isWechat?: boolean;
+    mermaid?: boolean | MermaidOptions;
 }
 export interface ApplyStylesOptions {
     themeId?: string;
@@ -12,7 +14,7 @@ export interface ApplyStylesOptions {
     isAddFootnote?: boolean;
 }
 export declare function createWenyanCore(options?: WenyanOptions): Promise<{
-    handleFrontMatter(markdown: string): Promise<StyledContent>;
+    handleFrontMatter(markdown: string): Promise<FrontMatterResult>;
     renderMarkdown(markdown: string): Promise<string>;
     applyStylesWithTheme(wenyanElement: HTMLElement, options?: ApplyStylesOptions): Promise<string>;
     applyStylesWithResolvedCss(wenyanElement: HTMLElement, options: {
@@ -31,4 +33,6 @@ export * from "./platform/medium.js";
 export * from "./platform/zhihu.js";
 export * from "./platform/toutiao.js";
 export { addFootnotes } from "./renderer/footnotesRender.js";
+export * from "./mermaid.js";
 export type WenyanCoreInstance = Awaited<ReturnType<typeof createWenyanCore>>;
+export type { FrontMatterResult } from "./parser/frontMatterParser.js";

package/dist/types/core/mermaid.d.ts

@@ -0,0 +1,19 @@
+export interface MermaidDiagram {
+    id: string;
+    code: string;
+}
+export type MermaidDiagramRenderer = (diagram: MermaidDiagram) => Promise<string>;
+export interface MermaidRenderer {
+    renderHtml(html: string): Promise<string>;
+}
+export interface MermaidOptions {
+    enabled?: boolean;
+    renderer?: MermaidRenderer;
+}
+export interface MermaidRendererFactoryOptions {
+    mermaidConfig?: Record<string, unknown>;
+}
+export declare function replaceMermaidCodeBlocks(root: ParentNode, renderDiagram: MermaidDiagramRenderer): Promise<boolean>;
+export declare function createBrowserMermaidRenderer(options?: MermaidRendererFactoryOptions): MermaidRenderer;
+export declare function createMermaidRenderError(error: unknown): Error;
+export declare function createMermaidConfig(overrides?: Record<string, unknown>): Record<string, unknown>;

package/dist/types/core/parser/mermaidParser.d.ts

@@ -0,0 +1,9 @@
+import type { MermaidOptions, MermaidRenderer } from "../mermaid.js";
+export interface ResolvedMermaidOptions {
+    enabled: boolean;
+    renderer?: MermaidRenderer;
+}
+export declare function createMermaidParser(options?: boolean | MermaidOptions): {
+    parser(html: string): Promise<string>;
+};
+export declare function resolveMermaidOptions(options?: boolean | MermaidOptions): ResolvedMermaidOptions;

package/dist/types/node/mermaidRenderer.d.ts

@@ -0,0 +1,2 @@
+import { type MermaidRenderer, type MermaidRendererFactoryOptions } from "../core/mermaid.js";
+export declare function createNodeMermaidRenderer(options?: MermaidRendererFactoryOptions): MermaidRenderer;

package/dist/types/node/render.d.ts

@@ -1,4 +1,4 @@
-import { ApplyStylesOptions } from "../core/index.js";
+import { ApplyStylesOptions, WenyanCoreInstance } from "../core/index.js";
 import { GetInputContentFn, RenderContext, RenderOptions } from "./types.js";
-export declare function renderStyledContent(content: string, options?: ApplyStylesOptions): Promise<string>;
+export declare function renderStyledContent(content: string, options?: ApplyStylesOptions, coreInstance?: WenyanCoreInstance): Promise<string>;
 export declare function prepareRenderContext(inputContent: string | undefined, options: RenderOptions, getInputContent: GetInputContentFn): Promise<RenderContext>;

package/dist/types/node/types.d.ts

@@ -1,3 +1,4 @@
+import { FrontMatterResult } from "../core/parser/frontMatterParser.js";
 export interface RenderOptions {
     file?: string;
     theme?: string;
@@ -5,6 +6,7 @@ export interface RenderOptions {
     highlight: string;
     macStyle: boolean;
     footnote: boolean;
+    mermaid?: boolean;
 }
 export interface PublishOptions extends RenderOptions {
     appId?: string;
@@ -18,17 +20,7 @@ export interface RenderContext {
     gzhContent: StyledContent;
     absoluteDirPath: string | undefined;
 }
-export interface StyledContent {
-    content: string;
-    title?: string;
-    description?: string;
-    cover?: string;
-    author?: string;
-    source_url?: string;
-    need_open_comment?: boolean;
-    only_fans_can_comment?: boolean;
-    image_list?: string[];
-}
+export type StyledContent = FrontMatterResult;
 export type GetInputContentFn = (inputContent?: string, filePath?: string) => Promise<{
     content: string;
     absoluteDirPath?: string;

package/dist/wrapper.js

@@ -10,7 +10,7 @@ import { FormDataEncoder } from "form-data-encoder";
 import { FormData } from "formdata-node";
 import { Readable } from "node:stream";
 import { defaultTokenCache, defaultCredential, WechatPublisher, CredentialStore } from "./publish.js";
-import { createWenyanCore, getAllGzhThemes } from "./core.js";
+import { replaceMermaidCodeBlocks, createMermaidRenderError, createMermaidConfig, createWenyanCore, getAllGzhThemes } from "./core.js";
 const configDir = (() => {
   if (process.env.XDG_CONFIG_HOME) {
     return path.join(process.env.XDG_CONFIG_HOME, "wenyan-md");
@@ -660,7 +660,169 @@ class ConfigStore {
   }
 }
 const configStore = new ConfigStore();
-const wenyanCoreInstance = await createWenyanCore();
+function createNodeMermaidRenderer(options = {}) {
+  const dom = new JSDOM("<body></body>", { pretendToBeVisual: true });
+  const runtimeWindow = dom.window;
+  let renderQueue = Promise.resolve();
+  let mermaidPromise = null;
+  installMermaidGlobals(runtimeWindow);
+  return {
+    async renderHtml(html) {
+      const task = renderQueue.then(async () => {
+        const mermaid = await getMermaid();
+        dom.window.document.body.innerHTML = html;
+        try {
+          await replaceMermaidCodeBlocks(dom.window.document.body, async ({ id, code }) => {
+            const { svg } = await mermaid.render(id, code);
+            return svg;
+          });
+          return dom.window.document.body.innerHTML;
+        } catch (error) {
+          throw createMermaidRenderError(error);
+        } finally {
+          dom.window.document.body.innerHTML = "";
+        }
+      });
+      renderQueue = task.then(
+        () => void 0,
+        () => void 0
+      );
+      return await task;
+    }
+  };
+  async function getMermaid() {
+    if (!mermaidPromise) {
+      mermaidPromise = import("mermaid").then((module) => module.default);
+    }
+    const mermaid = await mermaidPromise;
+    mermaid.initialize(createMermaidConfig(options.mermaidConfig));
+    return mermaid;
+  }
+}
+function installMermaidGlobals(window) {
+  ensureSvgPolyfills(window);
+  const globals = [
+    ["window", window],
+    ["document", window.document],
+    ["navigator", window.navigator],
+    ["Element", window.Element],
+    ["HTMLElement", window.HTMLElement],
+    ["SVGElement", window.SVGElement],
+    ["Node", window.Node],
+    ["Document", window.Document],
+    ["DOMParser", window.DOMParser],
+    ["XMLSerializer", window.XMLSerializer],
+    ["getComputedStyle", window.getComputedStyle.bind(window)]
+  ];
+  for (const [key, value] of globals) {
+    Object.defineProperty(globalThis, key, {
+      configurable: true,
+      writable: true,
+      value
+    });
+  }
+}
+function ensureSvgPolyfills(window) {
+  const svgElementPrototype = window.SVGElement.prototype;
+  if (!svgElementPrototype.getBBox) {
+    Object.defineProperty(svgElementPrototype, "getBBox", {
+      configurable: true,
+      writable: true,
+      value() {
+        const tagName = this.tagName.toLowerCase();
+        if (tagName === "text" || tagName === "tspan") {
+          const text = this.textContent ?? "";
+          const width = Math.max(text.length * 8, 16);
+          return {
+            x: 0,
+            y: -16,
+            width,
+            height: 16,
+            top: -16,
+            right: width,
+            bottom: 0,
+            left: 0,
+            toJSON() {
+              return this;
+            }
+          };
+        }
+        if (tagName === "style" || tagName === "defs" || tagName === "marker") {
+          return { x: 0, y: 0, width: 0, height: 0, top: 0, right: 0, bottom: 0, left: 0, toJSON() {
+            return this;
+          } };
+        }
+        if (tagName === "rect" || tagName === "image") {
+          const w = parseFloat(this.getAttribute("width") || "0");
+          const h = parseFloat(this.getAttribute("height") || "0");
+          const x = parseFloat(this.getAttribute("x") || "0");
+          const y = parseFloat(this.getAttribute("y") || "0");
+          return { x, y, width: w, height: h, top: y, right: x + w, bottom: y + h, left: x, toJSON() {
+            return this;
+          } };
+        }
+        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+        let hasChildren = false;
+        for (let i = 0; i < this.children.length; i++) {
+          const child = this.children[i];
+          if (!child.getBBox) continue;
+          const childBox = child.getBBox();
+          if (childBox.width === 0 && childBox.height === 0) continue;
+          let tx = 0, ty = 0;
+          const transform = child.getAttribute("transform");
+          if (transform) {
+            const match = transform.match(/translate\(([-0-9.]+)(?:[,\s]+([-0-9.]+))?\)/);
+            if (match) {
+              tx = parseFloat(match[1]);
+              ty = match[2] ? parseFloat(match[2]) : 0;
+            }
+          }
+          minX = Math.min(minX, childBox.x + tx);
+          minY = Math.min(minY, childBox.y + ty);
+          maxX = Math.max(maxX, childBox.x + childBox.width + tx);
+          maxY = Math.max(maxY, childBox.y + childBox.height + ty);
+          hasChildren = true;
+        }
+        if (!hasChildren) {
+          return { x: 0, y: 0, width: 0, height: 0, top: 0, right: 0, bottom: 0, left: 0, toJSON() {
+            return this;
+          } };
+        }
+        return {
+          x: minX,
+          y: minY,
+          width: maxX - minX,
+          height: maxY - minY,
+          top: minY,
+          right: maxX,
+          bottom: maxY,
+          left: minX,
+          toJSON() {
+            return this;
+          }
+        };
+      }
+    });
+  }
+  if (!svgElementPrototype.getComputedTextLength) {
+    Object.defineProperty(svgElementPrototype, "getComputedTextLength", {
+      configurable: true,
+      writable: true,
+      value() {
+        const text = this.textContent ?? "";
+        return Math.max(text.length * 8, 16);
+      }
+    });
+  }
+}
+const nodeMermaidRenderer = createNodeMermaidRenderer();
+const wenyanCoreInstance = await createWenyanCore({
+  mermaid: {
+    enabled: true,
+    renderer: nodeMermaidRenderer
+  }
+});
+const wenyanCoreInstanceWithoutMermaid = await createWenyanCore();
 async function renderWithTheme(markdownContent, options) {
   if (!markdownContent) {
     throw new Error("No content provided for rendering.");
@@ -676,21 +838,22 @@ async function renderWithTheme(markdownContent, options) {
   if (!handledCustomTheme && !theme) {
     throw new Error(`theme "${theme}" not found.`);
   }
+  const coreInstance = options.mermaid === false ? wenyanCoreInstanceWithoutMermaid : wenyanCoreInstance;
   const gzhContent = await renderStyledContent(markdownContent, {
     themeId: theme,
     hlThemeId: highlight,
     isMacStyle: macStyle,
     isAddFootnote: footnote,
     themeCss: handledCustomTheme
-  });
+  }, coreInstance);
   return gzhContent;
 }
-async function renderStyledContent(content, options = {}) {
-  const html = await wenyanCoreInstance.renderMarkdown(content);
+async function renderStyledContent(content, options = {}, coreInstance = wenyanCoreInstance) {
+  const html = await coreInstance.renderMarkdown(content);
   const dom = new JSDOM(`<body><section id="wenyan">${html}</section></body>`);
   const document = dom.window.document;
   const wenyan = document.getElementById("wenyan");
-  const result = await wenyanCoreInstance.applyStylesWithTheme(wenyan, options);
+  const result = await coreInstance.applyStylesWithTheme(wenyan, options);
   return result;
 }
 async function prepareRenderContext(inputContent, options, getInputContent) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wenyan-md/core",
-  "version": "3.0.6",
+  "version": "3.0.7",
   "description": "Core library for Wenyan markdown rendering & publishing",
   "author": "Lei <caol64@gmail.com> (https://github.com/caol64)",
   "license": "Apache-2.0",
@@ -65,7 +65,8 @@
     "highlight.js": "11.10.0",
     "marked": "^15.0.12",
     "marked-highlight": "^2.2.1",
-    "mathjax-full": "3.2.2"
+    "mathjax-full": "3.2.2",
+    "mermaid": "11.14.0"
   },
   "peerDependencies": {
     "form-data-encoder": "^4.1.0",