+ 文档可能已移动，或链接地址有误。请使用顶部搜索查找内容，也可以返回中文首页。
+ The page may have moved, or the link may be incorrect. Use the search bar or return to the English home page.
+
diff --git a/src/plugins/rehype-mermaid.mjs b/src/plugins/rehype-mermaid.mjs
new file mode 100644
index 0000000..1b6e5a9
--- /dev/null
+++ b/src/plugins/rehype-mermaid.mjs
@@ -0,0 +1,119 @@
+import { createHash } from 'node:crypto';
+import rehypeMermaid from 'rehype-mermaid';
+
+// Use installed sans-serif fonts when measuring labels. Linux CI needs a CJK
+// font (e.g. fonts-noto-cjk); rendering must not depend on a remote font CDN.
+const fontFamily = 'Arial, "Noto Sans CJK SC", "Microsoft YaHei", "PingFang SC", sans-serif';
+function theme(dark) {
+ return {
+ startOnLoad: false,
+ securityLevel: 'strict',
+ theme: 'base',
+ fontFamily,
+ htmlLabels: false,
+ flowchart: { htmlLabels: false, useMaxWidth: false },
+ themeVariables: {
+ fontFamily,
+ darkMode: dark,
+ background: dark ? '#1a1a1a' : '#ffffff',
+ primaryColor: dark ? '#401820' : '#ffeaed',
+ primaryTextColor: dark ? '#eeeeee' : '#292929',
+ primaryBorderColor: dark ? '#d65a70' : '#c21932',
+ lineColor: dark ? '#c4c4c4' : '#5c5c5c',
+ secondaryColor: dark ? '#303030' : '#f4f4f4',
+ tertiaryColor: dark ? '#242424' : '#fafafa',
+ clusterBkg: dark ? '#242424' : '#fafafa',
+ clusterBorder: dark ? '#5c5c5c' : '#b8b8b8',
+ edgeLabelBackground: dark ? '#242424' : '#ffffff',
+ },
+ };
+}
+
+function element(tagName, properties, children) {
+ return { type: 'element', tagName, properties, children };
+}
+
+// Expose config as plugin options so Astro's content cache sees theme changes.
+export const mermaidThemes = { light: theme(false), dark: theme(true) };
+
+// Some diagram types use fixed IDs (e.g. sequence arrows). Mermaid's root
+// prefix alone does not namespace these, so rewrite their local references too.
+function namespaceSvg(svg) {
+ const ids = new Map();
+ const walk = (node, fn) => {
+ fn(node);
+ node.children?.forEach((child) => walk(child, fn));
+ };
+ walk(svg, (node) => {
+ if (node !== svg && node.properties?.id) {
+ const id = String(node.properties.id);
+ ids.set(id, `${svg.properties.id}--${id}`);
+ }
+ });
+ const rewriteUrls = (value) => value.replace(/url\(\s*(['"]?)#([^\s)'"<>]+)\1\s*\)/g,
+ (match, quote, id) => ids.has(id) ? `url(#${ids.get(id)})` : match);
+ walk(svg, (node) => {
+ if (node.type !== 'element') return;
+ for (const [key, value] of Object.entries(node.properties)) {
+ if (key === 'id') node.properties[key] = ids.get(String(value)) ?? value;
+ else if ((key === 'href' || key === 'xLinkHref') && String(value).startsWith('#')) {
+ node.properties[key] = ids.has(String(value).slice(1)) ? `#${ids.get(String(value).slice(1))}` : value;
+ } else if (key === 'ariaLabelledBy' || key === 'ariaDescribedBy') {
+ const tokens = Array.isArray(value) ? value : String(value).split(/\s+/);
+ node.properties[key] = tokens.map((id) => ids.get(id) ?? id);
+ } else if (typeof value === 'string') node.properties[key] = rewriteUrls(value);
+ }
+ if (node.tagName === 'style') {
+ for (const child of node.children) {
+ if (child.type === 'text') child.value = rewriteUrls(child.value)
+ .replace(/#([\w-]+)/g, (match, id) => ids.has(id) ? `#${ids.get(id)}` : match);
+ }
+ }
+ });
+}
+
+/** Compile both themes to inline SVG; CSS follows Starlight's manual theme. */
+export default function rehypeStaticMermaid({ themes = mermaidThemes } = {}) {
+ return async (tree, file) => {
+ const diagrams = [];
+ function visit(node) {
+ if (node.type === 'element' && node.properties?.className?.includes('mermaid-diagram')) {
+ diagrams.push(node);
+ return;
+ }
+ node.children?.forEach(visit);
+ }
+ visit(tree);
+ if (!diagrams.length) return;
+
+ // Prefix SVG IDs to prevent collisions across themes and documents.
+ const prefix = createHash('sha256').update(String(file.path ?? '') + JSON.stringify(diagrams)).digest('hex').slice(0, 12);
+ const rendered = await Promise.all(['light', 'dark'].map(async (mode) => {
+ const root = { type: 'root', children: diagrams.map((node) => structuredClone(node.children[0])) };
+ await rehypeMermaid({
+ strategy: 'inline-svg',
+ prefix: `mermaid-${prefix}-${mode}`,
+ mermaidConfig: themes[mode],
+ })(root, file);
+ return root.children;
+ }));
+
+ diagrams.forEach((diagram, index) => {
+ const variants = ['light', 'dark'].map((mode, modeIndex) => {
+ const svg = rendered[modeIndex][index];
+ namespaceSvg(svg);
+ // Keep the measured font instead of swapping to an optional webfont.
+ const viewBox = String(svg.properties.viewBox).trim().split(/[\s,]+/).map(Number);
+ return element('div', {
+ className: ['mermaid-variant', `mermaid-${mode}`],
+ style: `--mermaid-width: ${viewBox[2]}px`,
+ }, [svg]);
+ });
+ diagram.properties['data-rendered'] = 'static';
+ diagram.children = [element('div', {
+ className: ['mermaid-canvas'],
+ tabIndex: 0,
+ }, variants)];
+ });
+ };
+}
diff --git a/src/plugins/remark-mermaid.mjs b/src/plugins/remark-mermaid.mjs
index b330642..b486216 100644
--- a/src/plugins/remark-mermaid.mjs
+++ b/src/plugins/remark-mermaid.mjs
@@ -1,4 +1,4 @@
-/** Render standard fenced Mermaid blocks without requiring MDX components. */
+/** Reserve Mermaid fences before code highlighting, in both Markdown and MDX. */
export default function remarkMermaid() {
return (tree) => {
const visit = (parent) => {
@@ -6,9 +6,10 @@ export default function remarkMermaid() {
parent.children = parent.children.map((node) => {
if (node.type === 'code' && node.lang === 'mermaid') {
// HAST data works in both Markdown and MDX, without injecting raw HTML.
- // Text nodes safely preserve the source as the no-JavaScript fallback.
+ // rehype-mermaid renders this source during compilation.
return {
type: 'paragraph',
+ position: node.position,
children: [],
data: {
hName: 'div',
@@ -16,7 +17,8 @@ export default function remarkMermaid() {
hChildren: [{
type: 'element',
tagName: 'pre',
- properties: { className: ['mermaid-source'] },
+ properties: { className: ['mermaid'] },
+ position: node.position,
children: [{ type: 'text', value: node.value }],
}],
},
diff --git a/src/scripts/mermaid.ts b/src/scripts/mermaid.ts
index d60e413..a0da7de 100644
--- a/src/scripts/mermaid.ts
+++ b/src/scripts/mermaid.ts
@@ -1,113 +1,39 @@
-// Only diagram pages load Mermaid. Authors use ordinary fenced code blocks.
-const sources = new WeakMap