@bytechain.cn/colamd 1.5.0 → 1.5.1-beta.2

package/src/renderer/editor/plugins/mermaid-plugin.ts

@@ -10,9 +10,22 @@ import './mermaid-plugin-dark.css'
 import './mermaid-plugin-elegant.css'
 import './mermaid-plugin-newsprint.css'
 import './mermaid-plugin-custom.css'
+// import './themes/components/mermaid/variables.css'
 
 ;(window as any).mermaid = mermaid
 
+// Track pending mermaid render promises for export synchronization
+const pendingRenders = new Set<Promise<void>>()
+
+/**
+ * Wait for all currently pending mermaid render() calls to settle.
+ * Called before PDF/HTML export to ensure all diagrams are rendered.
+ */
+export function awaitAllMermaidRenders(): Promise<void> {
+  const promises = Array.from(pendingRenders)
+  return Promise.allSettled(promises).then(() => {})
+}
+
 function getMermaidTheme(): string {
   const cls = document.body.className
   if (cls.includes('theme-dark')) return 'dark'
@@ -25,19 +38,23 @@ function getMermaidTheme(): string {
   return 'default'
 }
 
-function readCustomVar(name: string, fallback: string): string {
-  const style = getComputedStyle(document.body)
+function getCustomMermaidCSS(): CSSStyleDeclaration {
+  return getComputedStyle(document.body)
+}
+
+function readCustomVar(style: CSSStyleDeclaration, name: string, fallback: string): string {
   return style.getPropertyValue(name).trim() || fallback
 }
 
 function getCustomMermaidFontSize(): number {
-  const raw = readCustomVar('--mermaid-font-size', '')
+  const raw = getCustomMermaidCSS().getPropertyValue('--mermaid-font-size').trim()
   const n = parseInt(raw, 10)
   return Number.isFinite(n) && n > 0 ? n : 12
 }
 
 function getCustomMermaidThemeVariables(): Record<string, string> {
-  const v = (name: string, fallback: string) => readCustomVar(name, fallback)
+  const style = getCustomMermaidCSS()
+  const v = (name: string, fallback: string) => readCustomVar(style, name, fallback)
   const baseFont = '-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif'
   const font = v('--mermaid-font-family', baseFont)
   const darkMode = v('--mermaid-dark-mode', 'false')
@@ -45,7 +62,7 @@ function getCustomMermaidThemeVariables(): Record<string, string> {
     darkMode,
     background: v('--mermaid-background', v('--bg-color', '#ffffff')),
     primaryColor: v('--mermaid-primary-color', v('--code-block-bg', '#f6f8fa')),
-    primaryBorderColor: v('--mermaid-primary-border-color', v('--border-color', '#d0d7de')),
+    primaryBorderColor: v('--mermaid-node-stroke', v('--border-color', '#d0d7de')),
     primaryTextColor: v('--mermaid-primary-text-color', v('--text-color', '#24292f')),
     secondaryColor: v('--mermaid-secondary-color', v('--code-bg', '#f6f8fa')),
     secondaryBorderColor: v('--mermaid-secondary-border-color', v('--border-color', '#d0d7de')),
@@ -53,21 +70,21 @@ function getCustomMermaidThemeVariables(): Record<string, string> {
     tertiaryColor: v('--mermaid-tertiary-color', v('--bg-color', '#ffffff')),
     tertiaryBorderColor: v('--mermaid-tertiary-border-color', v('--border-color', '#d0d7de')),
     tertiaryTextColor: v('--mermaid-tertiary-text-color', v('--text-color', '#24292f')),
-    lineColor: v('--mermaid-line-color', v('--border-color', '#d0d7de')),
-    textColor: v('--mermaid-text-color', v('--text-color', '#24292f')),
+    lineColor: v('--mermaid-edge-stroke', v('--border-color', '#d0d7de')),
+    textColor: v('--mermaid-label-text', v('--text-color', '#24292f')),
     mainBkg: v('--mermaid-main-bkg', v('--code-block-bg', '#f6f8fa')),
     secondBkg: v('--mermaid-second-bkg', v('--code-bg', '#f6f8fa')),
     mainContrastColor: v('--mermaid-primary-text-color', v('--text-color', '#24292f')),
     labelBackground: v('--mermaid-label-background', v('--code-block-bg', '#f6f8fa')),
     labelTextColor: v('--mermaid-label-text-color', v('--text-color', '#24292f')),
-    nodeBorder: v('--mermaid-node-border', v('--border-color', '#d0d7de')),
+    nodeBorder: v('--mermaid-node-stroke', v('--border-color', '#d0d7de')),
     nodeBkg: v('--mermaid-node-bkg', v('--code-block-bg', '#f6f8fa')),
     clusterBkg: v('--mermaid-cluster-bkg', v('--code-bg', '#f6f8fa')),
-    clusterBorder: v('--mermaid-cluster-border', v('--border-color', '#d0d7de')),
-    defaultLinkColor: v('--mermaid-line-color', v('--border-color', '#d0d7de')),
+    clusterBorder: v('--mermaid-cluster-stroke', v('--border-color', '#d0d7de')),
+    defaultLinkColor: v('--mermaid-edge-stroke', v('--border-color', '#d0d7de')),
     edgeLabelBackground: v('--mermaid-edge-label-background', v('--code-block-bg', '#f6f8fa')),
-    arrowheadColor: v('--mermaid-arrowhead-color', v('--mermaid-line-color', v('--border-color', '#d0d7de'))),
-    personBorder: v('--mermaid-person-border', v('--border-color', '#d0d7de')),
+    arrowheadColor: v('--mermaid-edge-stroke', v('--border-color', '#d0d7de')),
+    personBorder: v('--mermaid-person-stroke', v('--border-color', '#d0d7de')),
     personBkg: v('--mermaid-person-bkg', v('--code-block-bg', '#f6f8fa')),
     fontFamily: font,
     cScale0: v('--mermaid-cscale0', '#2d5f8a'),
@@ -87,7 +104,8 @@ function getCustomMermaidThemeVariables(): Record<string, string> {
 }
 
 function getCustomMermaidC4Config(): Record<string, string> {
-  const v = (name: string, fallback: string) => readCustomVar(name, fallback)
+  const style = getCustomMermaidCSS()
+  const v = (name: string, fallback: string) => readCustomVar(style, name, fallback)
   const baseFont = '-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif'
   const font = v('--mermaid-font-family', baseFont)
   return {
@@ -98,45 +116,45 @@ function getCustomMermaidC4Config(): Record<string, string> {
     boundaryFontFamily: font,
     messageFontFamily: font,
     person_bg_color: v('--mermaid-c4-person-bg', '#2d5f8a'),
-    person_border_color: v('--mermaid-c4-person-border', '#4a7aaa'),
+    person_border_color: v('--mermaid-c4-person-stroke', '#4a7aaa'),
     external_person_bg_color: v('--mermaid-c4-ext-person-bg', '#4a5568'),
-    external_person_border_color: v('--mermaid-c4-ext-person-border', '#6b7a8a'),
+    external_person_border_color: v('--mermaid-c4-ext-person-stroke', '#6b7a8a'),
     system_bg_color: v('--mermaid-c4-system-bg', '#3d7a5a'),
-    system_border_color: v('--mermaid-c4-system-border', '#5a9a7a'),
+    system_border_color: v('--mermaid-c4-system-stroke', '#5a9a7a'),
     system_db_bg_color: v('--mermaid-c4-system-bg', '#3d7a5a'),
-    system_db_border_color: v('--mermaid-c4-system-border', '#5a9a7a'),
+    system_db_border_color: v('--mermaid-c4-system-stroke', '#5a9a7a'),
     system_queue_bg_color: v('--mermaid-c4-system-bg', '#3d7a5a'),
-    system_queue_border_color: v('--mermaid-c4-system-border', '#5a9a7a'),
+    system_queue_border_color: v('--mermaid-c4-system-stroke', '#5a9a7a'),
     external_system_bg_color: v('--mermaid-c4-ext-system-bg', '#6b4a7a'),
-    external_system_border_color: v('--mermaid-c4-ext-system-border', '#8a6a9a'),
+    external_system_border_color: v('--mermaid-c4-ext-system-stroke', '#8a6a9a'),
     external_system_db_bg_color: v('--mermaid-c4-ext-system-bg', '#6b4a7a'),
-    external_system_db_border_color: v('--mermaid-c4-ext-system-border', '#8a6a9a'),
+    external_system_db_border_color: v('--mermaid-c4-ext-system-stroke', '#8a6a9a'),
     external_system_queue_bg_color: v('--mermaid-c4-ext-system-bg', '#6b4a7a'),
-    external_system_queue_border_color: v('--mermaid-c4-ext-system-border', '#8a6a9a'),
+    external_system_queue_border_color: v('--mermaid-c4-ext-system-stroke', '#8a6a9a'),
     container_bg_color: v('--mermaid-c4-container-bg', '#8a6b3c'),
-    container_border_color: v('--mermaid-c4-container-border', '#aa8a5c'),
+    container_border_color: v('--mermaid-c4-container-stroke', '#aa8a5c'),
     container_db_bg_color: v('--mermaid-c4-container-bg', '#8a6b3c'),
-    container_db_border_color: v('--mermaid-c4-container-border', '#aa8a5c'),
+    container_db_border_color: v('--mermaid-c4-container-stroke', '#aa8a5c'),
     container_queue_bg_color: v('--mermaid-c4-container-bg', '#8a6b3c'),
-    container_queue_border_color: v('--mermaid-c4-container-border', '#aa8a5c'),
+    container_queue_border_color: v('--mermaid-c4-container-stroke', '#aa8a5c'),
     external_container_bg_color: v('--mermaid-c4-ext-container-bg', '#5a5a6a'),
-    external_container_border_color: v('--mermaid-c4-ext-container-border', '#7a7a8a'),
+    external_container_border_color: v('--mermaid-c4-ext-container-stroke', '#7a7a8a'),
     external_container_db_bg_color: v('--mermaid-c4-ext-container-bg', '#5a5a6a'),
-    external_container_db_border_color: v('--mermaid-c4-ext-container-border', '#7a7a8a'),
+    external_container_db_border_color: v('--mermaid-c4-ext-container-stroke', '#7a7a8a'),
     external_container_queue_bg_color: v('--mermaid-c4-ext-container-bg', '#5a5a6a'),
-    external_container_queue_border_color: v('--mermaid-c4-ext-container-border', '#7a7a8a'),
+    external_container_queue_border_color: v('--mermaid-c4-ext-container-stroke', '#7a7a8a'),
     component_bg_color: v('--mermaid-c4-component-bg', '#3c7a6b'),
-    component_border_color: v('--mermaid-c4-component-border', '#5c9a8b'),
+    component_border_color: v('--mermaid-c4-component-stroke', '#5c9a8b'),
     component_db_bg_color: v('--mermaid-c4-component-bg', '#3c7a6b'),
-    component_db_border_color: v('--mermaid-c4-component-border', '#5c9a8b'),
+    component_db_border_color: v('--mermaid-c4-component-stroke', '#5c9a8b'),
     component_queue_bg_color: v('--mermaid-c4-component-bg', '#3c7a6b'),
-    component_queue_border_color: v('--mermaid-c4-component-border', '#5c9a8b'),
+    component_queue_border_color: v('--mermaid-c4-component-stroke', '#5c9a8b'),
     external_component_bg_color: v('--mermaid-c4-ext-component-bg', '#6a6a6a'),
-    external_component_border_color: v('--mermaid-c4-ext-component-border', '#8a8a8a'),
+    external_component_border_color: v('--mermaid-c4-ext-component-stroke', '#8a8a8a'),
     external_component_db_bg_color: v('--mermaid-c4-ext-component-bg', '#6a6a6a'),
-    external_component_db_border_color: v('--mermaid-c4-ext-component-border', '#8a8a8a'),
+    external_component_db_border_color: v('--mermaid-c4-ext-component-stroke', '#8a8a8a'),
     external_component_queue_bg_color: v('--mermaid-c4-ext-component-bg', '#6a6a6a'),
-    external_component_queue_border_color: v('--mermaid-c4-ext-component-border', '#8a8a8a'),
+    external_component_queue_border_color: v('--mermaid-c4-ext-component-stroke', '#8a8a8a'),
   }
 }
 
@@ -432,9 +450,8 @@ const mermaidBlockSchema = $nodeSchema('mermaid_block', () => ({
   toDOM: (node) => {
     const container = document.createElement('div')
     container.className = 'mermaid-block'
-    container.dataset.mermaid = node.attrs.text as string
-
     const text = (node.attrs.text as string || '').trim()
+    container.dataset.mermaid = text
 
     if (node.attrs.mode === 'raw') {
       const el = document.createElement('pre')
@@ -444,39 +461,7 @@ const mermaidBlockSchema = $nodeSchema('mermaid_block', () => ({
       return { dom: el }
     }
 
-    if (!text) {
-      container.innerHTML = '<div class="mermaid-preview"><div class="mermaid-loading">Empty diagram</div></div>'
-      return { dom: container }
-    }
-
-    const mermaidLib = (window as any).mermaid
-    if (!mermaidLib || typeof mermaidLib.render !== 'function') {
-      container.innerHTML = '<div class="mermaid-preview"><div class="mermaid-error">Mermaid not loaded</div></div>'
-      return { dom: container }
-    }
-
     container.innerHTML = '<div class="mermaid-preview"><div class="mermaid-loading">Rendering...</div></div>'
-    const id = 'mermaid-' + (++renderCounter)
-    try {
-      mermaidLib.render(id, text).then((result: { svg: string; bindFunctions?: (el: Element) => void }) => {
-        const preview = container.querySelector('.mermaid-preview')
-        if (preview) {
-          preview.innerHTML = result.svg
-          const svg = preview.querySelector('svg') as SVGSVGElement | null
-          if (svg) adjustNodeHeights(svg)
-          if (result.bindFunctions) result.bindFunctions(container)
-        }
-      }).catch((e: Error) => {
-        const preview = container.querySelector('.mermaid-preview')
-        if (preview) {
-          const msg = e.message.replace(/&/g, '&amp;').replace(/</g, '&lt;')
-          preview.innerHTML = '<div class="mermaid-error">Error: ' + msg + '</div>'
-        }
-      })
-    } catch (e: any) {
-      container.innerHTML = '<div class="mermaid-preview"><div class="mermaid-error">' + String(e.message || e) + '</div></div>'
-    }
-
     return { dom: container }
   },
   parseMarkdown: {
@@ -532,7 +517,7 @@ function renderMermaidBlock(dom: HTMLElement, node: any, renderIdRef: { current:
   dom.innerHTML = '<div class="mermaid-preview"><div class="mermaid-loading">Rendering...</div></div>'
   const id = 'mermaid-' + (++renderCounter)
 
-  mermaidLib.render(id, text).then((result: { svg: string; bindFunctions?: (el: Element) => void }) => {
+  const renderPromise = mermaidLib.render(id, text).then((result: { svg: string; bindFunctions?: (el: Element) => void }) => {
     if (currentRenderId !== renderIdRef.current) return
     const preview = dom.querySelector('.mermaid-preview')
     if (preview) {
@@ -548,7 +533,8 @@ function renderMermaidBlock(dom: HTMLElement, node: any, renderIdRef: { current:
       const msg = e.message.replace(/&/g, '&amp;').replace(/</g, '&lt;')
       preview.innerHTML = '<div class="mermaid-error">Error: ' + msg + '</div>'
     }
-  })
+  }).finally(() => { pendingRenders.delete(renderPromise) })
+  pendingRenders.add(renderPromise)
 }
 
 const mermaidBlockView = $view(mermaidBlockSchema, (_ctx): NodeViewConstructor => {
@@ -649,10 +635,12 @@ export const mermaidPlugin: RendererPlugin = {
     const fontSize = isCustom ? getCustomMermaidFontSize() : 14
     mermaid.initialize({
       startOnLoad: false,
-      theme: getMermaidTheme(),
+      theme: getMermaidTheme() as any,
       themeVariables: getMermaidThemeVariables(),
       c4: getMermaidC4Config(),
       securityLevel: 'loose',
+      logLevel: 'error',
+      suppressErrorRendering: true,
       fontSize,
     })
   },
@@ -662,13 +650,16 @@ export const mermaidPlugin: RendererPlugin = {
     const fontSize = isCustom ? getCustomMermaidFontSize() : 16
     mermaid.initialize({
       startOnLoad: false,
-      theme: getMermaidTheme(),
+      theme: getMermaidTheme() as any,
       themeVariables: getMermaidThemeVariables(),
       c4: getMermaidC4Config(),
       securityLevel: 'loose',
+      logLevel: 'error',
+      suppressErrorRendering: true,
       fontSize,
     })
   },
+  ensureRendered: awaitAllMermaidRenders,
 }
 
 registerPluginModule({

package/src/renderer/editor/plugins/themes/base/dark.css

@@ -0,0 +1,23 @@
+/*
+ * ColaMD 主题系统：Dark 主题变量
+ * 依赖：foundation.css
+ */
+body.theme-dark {
+  --color-bg: #0d1117;
+  --color-text: #e6edf3;
+  --color-text-muted: #8b949e;
+  --color-border: #30363d;
+  --color-link: #58a6ff;
+  --color-accent: #58a6ff;
+  --color-accent-dark: #1f6feb;
+  --color-accent-light: rgba(88, 166, 255, 0.15);
+  --color-selection-bg: rgba(88, 166, 255, 0.2);
+  --code-bg: rgba(110, 118, 129, 0.3);
+  --code-block-bg: #161b22;
+  --code-block-text: #e6edf3;
+  --blockquote-border: #30363d;
+  --table-header-bg: #161b22;
+  --table-border: #30363d;
+  --scrollbar-thumb: #30363d;
+  --scrollbar-thumb-hover: #484f58;
+}

package/src/renderer/editor/plugins/themes/base/elegant.css

@@ -0,0 +1,32 @@
+/*
+ * ColaMD 主题系统：Elegant 主题变量 (典雅暖调)
+ * 依赖：foundation.css
+ */
+body.theme-elegant {
+  --color-bg: #f0edea;
+  --color-text: #2c2c2c;
+  --color-text-muted: #777;
+  --color-border: #d8d3ce;
+  --color-link: #c44b2b;
+  --color-accent: #c44b2b;
+  --color-accent-dark: #a33d22;
+  --color-accent-light: #d8d3ce;
+  --color-selection-bg: rgba(196, 75, 43, 0.2);
+  --code-bg: #e8e4df;
+  --code-color: #c44b2b;
+  --code-block-bg: #2c2c2c;
+  --code-block-text: #e0dcd7;
+  --blockquote-bg: #eae6e1;
+  --blockquote-border: #c44b2b;
+  --blockquote-color: #444;
+  --table-header-bg: #eae6e1;
+  --table-border: #d8d3ce;
+  --scrollbar-thumb: #ccc8c2;
+  --scrollbar-thumb-hover: #b5b0aa;
+  --hr-color: #d8d3ce;
+
+  /* Elegant 特有的字体系统 */
+  --font-family-base: "LXGW WenKai", "Noto Serif SC", "Source Han Serif SC", "Songti SC", Georgia, "Times New Roman", serif;
+  --font-family-heading: var(--font-family-base);
+  --line-height-base: 1.9;
+}

package/src/renderer/editor/plugins/themes/base/light.css

@@ -0,0 +1,20 @@
+/*
+ * ColaMD 主题系统：Light 主题变量
+ * 依赖：foundation.css
+ * 仅包含变量覆盖，无样式选择器
+ */
+body.theme-light, body:not([class*="theme-"]) {
+  --color-bg: #ffffff;
+  --color-text: #24292f;
+  --color-text-muted: #656d76;
+  --color-border: #d0d7de;
+  --color-link: #0969da;
+  --color-accent: #0969da;
+  --color-accent-dark: #0550ae;
+  --color-accent-light: #ddf4ff;
+  --color-selection-bg: rgba(9, 105, 218, 0.15);
+  --code-bg: rgba(175, 184, 193, 0.2);
+  --code-block-bg: #f6f8fa;
+  --blockquote-border: #d0d7de;
+  --table-header-bg: #f6f8fa;
+}

package/src/renderer/editor/plugins/themes/base/newsprint.css

@@ -0,0 +1,27 @@
+/*
+ * ColaMD 主题系统：Newsprint 主题变量 (报纸打印风格)
+ * 依赖：foundation.css
+ */
+body.theme-newsprint {
+  --color-bg: #f5f2eb;
+  --color-text: #1a1a1a;
+  --color-text-muted: #666;
+  --color-border: #d4d0c8;
+  --color-link: #2c5f8a;
+  --color-accent: #2c5f8a;
+  --color-accent-dark: #1e4060;
+  --color-accent-light: rgba(44, 95, 138, 0.12);
+  --color-selection-bg: rgba(44, 95, 138, 0.15);
+  --code-bg: rgba(0, 0, 0, 0.05);
+  --code-block-bg: #eae6de;
+  --blockquote-border: #999;
+  --table-header-bg: #eae6de;
+  --table-border: #d4d0c8;
+  --hr-color: #d4d0c8;
+  --scrollbar-thumb: #ccc8c2;
+  --scrollbar-thumb-hover: #b5b0aa;
+
+  /* Newsprint 字体：衬线 */
+  --font-family-base: "PT Serif", Georgia, "Times New Roman", "Songti SC", serif;
+  --font-family-heading: var(--font-family-base);
+}

package/src/renderer/editor/plugins/themes/components/mermaid/academic.css

@@ -0,0 +1,43 @@
+/*
+ * ColaMD 主题系统：Mermaid Academic 配色方案 (莫兰迪灰系)
+ * 依赖：foundation.css → mermaid/variables.css
+ * 适用场景：学术论文打印，浅灰度色块 + 深灰边框
+ */
+[data-mermaid-theme="academic"],
+body.theme-custom[data-mermaid-theme="academic"] {
+  --mermaid-font-family: "SimHei", "Heiti SC", "Source Han Sans SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
+  --mermaid-font-size: 9pt;
+  --mermaid-node-stroke: #333333;
+  --mermaid-node-fill: #E3E3E3;
+  --mermaid-node-text: #1a1a1a;
+  --mermaid-node-stroke-width: 1px;
+  --mermaid-edge-stroke: #333333;
+  --mermaid-edge-stroke-width: 1px;
+  --mermaid-cluster-stroke: #4a4a4a;
+  --mermaid-cluster-fill: #F0F0F0;
+  --mermaid-cluster-dasharray: none;
+  --mermaid-label-text: #1a1a1a;
+  --mermaid-edge-label-bg: #ffffff;
+  --mermaid-edge-label-text: #1a1a1a;
+  --mermaid-title-text: #1a1a1a;
+  --mermaid-axis-text: #555555;
+  --mermaid-highlight: #333333;
+  --mermaid-background: #ffffff;
+  --mermaid-border-color: #cccccc;
+  --mermaid-border-radius: 0px;
+  --mermaid-label-offset-y: 0px;
+
+  /* 色板：莫兰迪灰色阶 */
+  --mermaid-cscale0: #A8A8A8;
+  --mermaid-cscale1: #8C8E90;
+  --mermaid-cscale2: #B0B0B0;
+  --mermaid-cscale3: #787878;
+  --mermaid-cscale4: #9E9E9E;
+  --mermaid-cscale5: #949698;
+  --mermaid-cscale6: #6E6E6E;
+  --mermaid-cscale7: #A0A0A0;
+  --mermaid-cscale8: #848688;
+  --mermaid-cscale9: #AAAAAA;
+  --mermaid-cscale10: #7A7A7C;
+  --mermaid-cscale11: #929294;
+}

package/src/renderer/editor/plugins/themes/components/mermaid/dark.css

@@ -0,0 +1,20 @@
+/*
+ * ColaMD 主题系统：Mermaid Dark 配色方案
+ * 依赖：foundation.css → mermaid/variables.css
+ */
+body.theme-dark {
+  --mermaid-node-stroke: #8b949e;
+  --mermaid-node-fill: #21262d;
+  --mermaid-node-text: #e6edf3;
+  --mermaid-edge-stroke: #8b949e;
+  --mermaid-cluster-stroke: #30363d;
+  --mermaid-cluster-fill: rgba(110, 118, 129, 0.1);
+  --mermaid-label-text: #e6edf3;
+  --mermaid-edge-label-bg: #161b22;
+  --mermaid-edge-label-text: #8b949e;
+  --mermaid-title-text: #e6edf3;
+  --mermaid-axis-text: #8b949e;
+  --mermaid-highlight: #58a6ff;
+  --mermaid-background: #161b22;
+  --mermaid-border-color: #30363d;
+}

package/src/renderer/editor/plugins/themes/components/mermaid/elegant.css

@@ -0,0 +1,24 @@
+/*
+ * ColaMD 主题系统：Mermaid Elegant 配色方案 (典雅暖调)
+ * 依赖：foundation.css → mermaid/variables.css
+ */
+body.theme-elegant {
+  --mermaid-font-family: "LXGW WenKai", "Noto Serif SC", "Source Han Serif SC", "Songti SC", Georgia, serif;
+  --mermaid-font-size: 14px;
+  --mermaid-node-stroke: #c44b2b;
+  --mermaid-node-fill: #eae6e1;
+  --mermaid-node-text: #2c2c2c;
+  --mermaid-edge-stroke: #999;
+  --mermaid-cluster-stroke: #c44b2b;
+  --mermaid-cluster-fill: rgba(196, 75, 43, 0.04);
+  --mermaid-cluster-dasharray: 4,4;
+  --mermaid-label-text: #2c2c2c;
+  --mermaid-edge-label-bg: #f7f5f2;
+  --mermaid-edge-label-text: #555;
+  --mermaid-title-text: #2c2c2c;
+  --mermaid-axis-text: #777;
+  --mermaid-highlight: #c44b2b;
+  --mermaid-background: #f7f5f2;
+  --mermaid-border-color: #d8d3ce;
+  --mermaid-label-offset-y: -3px;
+}

package/src/renderer/editor/plugins/themes/components/mermaid/light.css

@@ -0,0 +1,21 @@
+/*
+ * ColaMD 主题系统：Mermaid Light 配色方案
+ * 依赖：foundation.css → mermaid/variables.css
+ * 覆盖：仅覆盖 Mermaid 相关的颜色变量
+ */
+body.theme-light, body:not([class*="theme-"]) {
+  --mermaid-node-stroke: #6366f1;
+  --mermaid-node-fill: #e0e7ff;
+  --mermaid-node-text: #1e1b4b;
+  --mermaid-edge-stroke: #a78bfa;
+  --mermaid-cluster-stroke: #8b5cf6;
+  --mermaid-cluster-fill: rgba(99, 102, 241, 0.06);
+  --mermaid-label-text: #1e1b4b;
+  --mermaid-edge-label-bg: #f8f9fb;
+  --mermaid-edge-label-text: #374151;
+  --mermaid-title-text: #1e1b4b;
+  --mermaid-axis-text: #6b7280;
+  --mermaid-highlight: #6366f1;
+  --mermaid-background: #f8f9fb;
+  --mermaid-border-color: #e5e7eb;
+}

package/src/renderer/editor/plugins/themes/components/mermaid/newsprint.css

@@ -0,0 +1,26 @@
+/*
+ * ColaMD 主题系统：Mermaid Newsprint 配色方案 (报纸打印风格)
+ * 依赖：foundation.css → mermaid/variables.css
+ */
+body.theme-newsprint {
+  --mermaid-font-family: "PT Serif", Georgia, "Times New Roman", "Songti SC", serif;
+  --mermaid-font-size: 13px;
+  --mermaid-node-stroke: #d4d0c8;
+  --mermaid-node-fill: #f5f2eb;
+  --mermaid-node-text: #1a1a1a;
+  --mermaid-edge-stroke: #999;
+  --mermaid-cluster-stroke: #999;
+  --mermaid-cluster-fill: rgba(0, 0, 0, 0.03);
+  --mermaid-cluster-dasharray: none;
+  --mermaid-label-text: #1a1a1a;
+  --mermaid-edge-label-bg: #f5f2eb;
+  --mermaid-edge-label-text: #666;
+  --mermaid-title-text: #1a1a1a;
+  --mermaid-axis-text: #999;
+  --mermaid-highlight: #2c5f8a;
+  --mermaid-background: #ffffff;
+  --mermaid-border-color: #d4d0c8;
+  --mermaid-border-radius: 0px;
+  --mermaid-node-stroke-width: 1px;
+  --mermaid-edge-stroke-width: 1px;
+}