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

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('');

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",
+            altFontFamily: mermaidFontFamily,
-            fontFamily: "sans-serif",
+            fontFamily: mermaidFontFamily,
+            fontSize: "14px",
             startOnLoad: false,
             flowchart: {
-                htmlLabels: true,
+                htmlLabels: false,
                 useMaxWidth: !0
             },
             sequence: {

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");
         });
     });

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",
+            altFontFamily: MERMAID_FONT_FAMILY,
-            fontFamily: "sans-serif",
+            fontFamily: MERMAID_FONT_FAMILY,
+            fontSize: MERMAID_FONT_SIZE,
             startOnLoad: false,
             flowchart: {
-                htmlLabels: true,
+                htmlLabels: false,
                 useMaxWidth: !0
             },
             sequence: {