✨ feat: 添加流程图和甘特图的字体样式支持

2026-04-11 19:09:28 +08:00
parent 007425ce81
commit 7bae6d487d
4 changed files with 33 additions and 11 deletions
--- a/web/include/vditor-adapter.js
+++ b/web/include/vditor-adapter.js
@@ -39,6 +39,7 @@
      '.hustoj-vditor-hidden{display:none !important;}',
      '.hustoj-vditor-wrapper{width:100%;margin:0 0 12px;}',
      '.hustoj-vditor-code{--hustoj-vditor-font-size:18px;text-align:left;}',
+      '.hustoj-vditor-preview{--hustoj-diagram-font-family:"Microsoft YaHei","PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Source Han Sans SC","WenQuanYi Micro Hei",Arial,sans-serif;--hustoj-diagram-font-size:14px;}',
      '.hustoj-vditor-code .vditor-toolbar{display:none !important;}',
      '.hustoj-vditor-code .vditor-reset,',
      '.hustoj-vditor-code .vditor-content,',
@@ -70,7 +71,7 @@
      '.hustoj-vditor-preview .vditor-reset .language-mermaid .label div,',
      '.hustoj-vditor-preview .vditor-reset .language-flowchart .label div,',
      '.hustoj-vditor-preview .vditor-reset .language-mermaid .edgeLabel,',
-      '.hustoj-vditor-preview .vditor-reset .language-flowchart .edgeLabel{white-space:normal !important;line-height:1.4 !important;}',
+      '.hustoj-vditor-preview .vditor-reset .language-flowchart .edgeLabel{font-family:var(--hustoj-diagram-font-family) !important;font-size:var(--hustoj-diagram-font-size) !important;white-space:normal !important;line-height:1.4 !important;}',
      '.hustoj-vditor-preview .vditor-reset .language-mermaid .nodeLabel,',
      '.hustoj-vditor-preview .vditor-reset .language-flowchart .nodeLabel,',
      '.hustoj-vditor-preview .vditor-reset .language-mermaid .nodeLabel *,',
@@ -78,7 +79,7 @@
      '.hustoj-vditor-preview .vditor-reset .language-mermaid svg text,',
      '.hustoj-vditor-preview .vditor-reset .language-mermaid svg tspan,',
      '.hustoj-vditor-preview .vditor-reset .language-flowchart svg text,',
-      '.hustoj-vditor-preview .vditor-reset .language-flowchart svg tspan{font-family:"Cascadia Mono","JetBrains Mono",Consolas,"Noto Sans SC","Microsoft YaHei",sans-serif !important;font-variant-ligatures:none;letter-spacing:0.01em;text-rendering:geometricPrecision;}',
+      '.hustoj-vditor-preview .vditor-reset .language-flowchart svg tspan{font-family:var(--hustoj-diagram-font-family) !important;font-size:var(--hustoj-diagram-font-size) !important;font-variant-ligatures:none;text-rendering:geometricPrecision;}',
      '.hustoj-vditor-preview .vditor-reset .language-mermaid .nodeLabel p,',
      '.hustoj-vditor-preview .vditor-reset .language-flowchart .nodeLabel p{margin:0;line-height:1.4 !important;}'
    ].join('');
--- a/web/include/vditor/dist/index.js
+++ b/web/include/vditor/dist/index.js
@@ -2817,6 +2817,14 @@ var plantumlRenderAdapter = {
 /* harmony import */ var _adapterRender__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(781);
 /* harmony import */ var _util_function__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(446);
 var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
+
+var FLOWCHART_DIAGRAM_FONT_FAMILY = '"Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "WenQuanYi Micro Hei", Arial, sans-serif';
+var FLOWCHART_DIAGRAM_OPTIONS = {
+    "font-family": FLOWCHART_DIAGRAM_FONT_FAMILY,
+    "font-size": 14,
+    "font-weight": "normal"
+};
+
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -2997,7 +3005,7 @@ var flowchartRender = function (element, cdn) {
            }
            var flowchartObj = flowchart.parse(_adapterRender__WEBPACK_IMPORTED_MODULE_1__.flowchartRenderAdapter.getCode(item));
            item.innerHTML = "";
-            flowchartObj.drawSVG(item);
+            flowchartObj.drawSVG(item, FLOWCHART_DIAGRAM_OPTIONS);
            item.setAttribute("data-processed", "true");
        });
    });
@@ -3533,13 +3541,15 @@ var mermaidRender = function (element, cdn, theme) {
        return;
    }
    (0,_util_addScript__WEBPACK_IMPORTED_MODULE_2__/* .addScript */ .G)("".concat(cdn, "/dist/js/mermaid/mermaid.min.js"), "vditorMermaidScript").then(function () {
+        var mermaidFontFamily = '"Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "WenQuanYi Micro Hei", Arial, sans-serif';
        var config = {
            securityLevel: "loose",
-            altFontFamily: "sans-serif",
-            fontFamily: "sans-serif",
+            altFontFamily: mermaidFontFamily,
+            fontFamily: mermaidFontFamily,
+            fontSize: "14px",
            startOnLoad: false,
            flowchart: {
-                htmlLabels: true,
+                htmlLabels: false,
                useMaxWidth: !0
            },
            sequence: {
--- a/web/include/vditor/src/ts/markdown/flowchartRender.ts
+++ b/web/include/vditor/src/ts/markdown/flowchartRender.ts
@@ -2,8 +2,15 @@ import {Constants} from "../constants";
 import {addScript} from "../util/addScript";
 import {flowchartRenderAdapter} from "./adapterRender";

+const FLOWCHART_FONT_FAMILY = '"Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "WenQuanYi Micro Hei", Arial, sans-serif';
+const FLOWCHART_RENDER_OPTIONS: Record<string, string | number> = {
+    "font-family": FLOWCHART_FONT_FAMILY,
+    "font-size": 14,
+    "font-weight": "normal",
+};
+
 declare const flowchart: {
-    parse(text: string): { drawSVG: (type: HTMLElement) => void };
+    parse(text: string): { drawSVG: (type: HTMLElement, options?: Record<string, string | number>) => void };
 };

 export const flowchartRender = (element: HTMLElement, cdn = Constants.CDN) => {
@@ -18,7 +25,7 @@ export const flowchartRender = (element: HTMLElement, cdn = Constants.CDN) => {
            }
            const flowchartObj = flowchart.parse(flowchartRenderAdapter.getCode(item));
            item.innerHTML = "";
-            flowchartObj.drawSVG(item);
+            flowchartObj.drawSVG(item, FLOWCHART_RENDER_OPTIONS);
            item.setAttribute("data-processed", "true");
        });
    });
--- a/web/include/vditor/src/ts/markdown/mermaidRender.ts
+++ b/web/include/vditor/src/ts/markdown/mermaidRender.ts
@@ -3,6 +3,9 @@ import {addScript} from "../util/addScript";
 import {mermaidRenderAdapter} from "./adapterRender";
 import {genUUID} from "../util/function";

+const MERMAID_FONT_FAMILY = '"Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "WenQuanYi Micro Hei", Arial, sans-serif';
+const MERMAID_FONT_SIZE = "14px";
+
 declare const mermaid: {
    initialize(options: any): void,
    render(id: string, text: string): { svg: string }
@@ -16,11 +19,12 @@ export const mermaidRender = (element: HTMLElement, cdn = Constants.CDN, theme:
    addScript(`${cdn}/dist/js/mermaid/mermaid.min.js`, "vditorMermaidScript").then(() => {
        const config: any = {
            securityLevel: "loose", // 升级后无 https://github.com/siyuan-note/siyuan/issues/3587，可使用该选项
-            altFontFamily: "sans-serif",
-            fontFamily: "sans-serif",
+            altFontFamily: MERMAID_FONT_FAMILY,
+            fontFamily: MERMAID_FONT_FAMILY,
+            fontSize: MERMAID_FONT_SIZE,
            startOnLoad: false,
            flowchart: {
-                htmlLabels: true,
+                htmlLabels: false,
                useMaxWidth: !0
            },
            sequence: {