feat: 完善 Mermaid 配置与预览缩放

README.md

@@ -14,7 +14,8 @@
 - 表格、任务列表、脚注、代码高亮、KaTeX 和 Mermaid；
 - iframe 隔离的真实分页预览、双向滚动同步与主题切换；
 - Chromium PDF 下载、精确 PDF.js 预览与导出性能观测；
-- 五种纸张、页边距、页眉、页码和浏览器配置缓存；
+- 五种纸张、页边距、页眉、页码、Mermaid 风格和浏览器配置缓存；
+- 快速预览与精确预览共用的 50%～400% 显示缩放；
 - 内置 Typora 风格主题，以及仅供本机使用的三套白色 Typora 默认主题导入工具；
 - 前端、Fastify、Nginx 和 Playwright Chromium 的 AIO 容器部署。
 
@@ -39,22 +40,49 @@ npm run dev
 
 编辑区和分页预览使用双向比例滚动同步。在任意一侧滚动时，另一侧会跟随到相同的全文阅读进度，方便定位并修改较长文档。
 
-## Mermaid 长标签
+预览工具栏支持滑块和手动百分比输入。缩放比例只改变浏览器显示，不改变纸张尺寸、分页结果或最终 PDF，并会单独保存在浏览器中。
 
-流程图节点标签的默认最大宽度为 320px。单个 Mermaid 区块可以通过 config frontmatter 覆盖：
+## Mermaid 配置与样式
+
+导出设置可以统一控制整篇文档的 Mermaid 布局、主题、外观和字体：
+
+- 布局：Dagre、ELK；
+- 主题：Mermaid 11.16.0 提供的 Default、Base、Dark、Forest、Neutral、Neo 和 Redux 系列；
+- 外观：Classic、Hand-drawn、Neo；
+- 字体：任意本地 CSS 字体族。
+
+未设置时使用 `dagre + default + classic`。单个 Mermaid 区块的 `config` Front Matter 优先于全局导出设置：
 
 ````markdown
 ```mermaid
 ---
 config:
+  layout: elk
+  theme: base
+  look: handDrawn
+  fontFamily: Microsoft YaHei
+  themeVariables:
+    primaryColor: "#dbeafe"
+    primaryBorderColor: "#2563eb"
   flowchart:
     wrappingWidth: 360
 ---
 flowchart TB
+  classDef important fill:#fee2e2,stroke:#dc2626
   A["较长的节点名称<br/>第二行说明"] --> B["下一个节点"]
+  style A fill:#dcfce7,stroke:#16a34a
+  class B important
 ```
 ````
 
+`style`、`classDef`、`linkStyle`、`themeVariables` 和图表专属配置均由 Mermaid 官方渲染器处理。原始 `themeCSS`、`securityLevel` 和资源限制属于安全配置，不能由 Markdown 代码块覆盖。
+
+ELK 使用官方 `@mermaid-js/layout-elk`，只有图表实际请求 ELK 时才加载核心布局代码。
+
+### Mermaid 长标签
+
+流程图节点标签的默认最大宽度为 320px，可以通过上例中的 `flowchart.wrappingWidth` 调整。
+
 需要自动换行时可以使用 Mermaid Markdown String：
 
 ````markdown