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

This commit is contained in:
2026-04-11 19:09:28 +08:00
parent 007425ce81
commit 7bae6d487d
4 changed files with 33 additions and 11 deletions

View File

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

View File

@@ -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: {