diff --git a/apps/web/src/ExportSettingsDrawer.tsx b/apps/web/src/ExportSettingsDrawer.tsx
index b64d82e..cda91da 100644
--- a/apps/web/src/ExportSettingsDrawer.tsx
+++ b/apps/web/src/ExportSettingsDrawer.tsx
@@ -1,10 +1,14 @@
import {
getPaperDimensionsMm,
paperFormatLabels,
+ supportedMermaidLayouts,
+ supportedMermaidLooks,
+ supportedMermaidThemes,
supportedPaperFormats,
type ExportConfig,
type FooterConfig,
- type HeaderConfig
+ type HeaderConfig,
+ type MermaidExportConfig
} from "@md-to-pdf/core";
import { useEffect, useState } from "react";
@@ -30,6 +34,48 @@ const pageNumberFormatLabels: Record
= {
custom: "自定义模板"
};
+const mermaidLayoutLabels: Record<
+ MermaidExportConfig["layout"],
+ string
+> = {
+ dagre: "Dagre",
+ elk: "ELK"
+};
+
+const mermaidThemeLabels: Record<
+ MermaidExportConfig["theme"],
+ string
+> = {
+ default: "Default",
+ base: "Base（可定制基础主题）",
+ dark: "Dark",
+ forest: "Forest",
+ neutral: "Neutral",
+ neo: "Neo",
+ "neo-dark": "Neo Dark",
+ redux: "Redux",
+ "redux-dark": "Redux Dark",
+ "redux-color": "Redux Color",
+ "redux-dark-color": "Redux Dark Color"
+};
+
+const mermaidLookLabels: Record<
+ MermaidExportConfig["look"],
+ string
+> = {
+ classic: "Classic",
+ handDrawn: "Hand-drawn",
+ neo: "Neo"
+};
+
+const mermaidFontFamilies = [
+ "Segoe UI, Microsoft YaHei, sans-serif",
+ "Microsoft YaHei, sans-serif",
+ "Arial, Helvetica, sans-serif",
+ "Georgia, Times New Roman, serif",
+ "Consolas, Microsoft YaHei, monospace"
+] as const;
+
function millimeters(value: string) {
return Number.parseFloat(value.replace(/mm$/i, ""));
}
@@ -99,6 +145,54 @@ function LengthInput({
);
}
+function MermaidFontInput({
+ value,
+ onChange
+}: {
+ value: string;
+ onChange: (value: string) => void;
+}) {
+ const [draft, setDraft] = useState(value);
+
+ useEffect(() => {
+ setDraft(value);
+ }, [value]);
+
+ function commit() {
+ const normalized = draft.trim();
+ if (!normalized) {
+ setDraft(value);
+ return;
+ }
+ setDraft(normalized);
+ onChange(normalized);
+ }
+
+ return (
+
+ );
+}
+
function updateHeaderSlot(
header: HeaderConfig,
slot: "left" | "center" | "right",
@@ -193,6 +287,16 @@ export function ExportSettingsDrawer({
});
}
+ function updateMermaid(mermaid: Partial) {
+ onChange({
+ ...config,
+ mermaid: {
+ ...config.mermaid,
+ ...mermaid
+ }
+ });
+ }
+
return (