手绘与字体

Sketch 模式让这个包不再只是 Mermaid wrapper，而是更接近一套面向文档站的绘图壳层

Sketch 模式基础

sketch: true 会启用 Mermaid.js 的手绘样式路径

只要出现 sketchFont，Sketch 模式也会自动打开

md.use(markdownItMermaidEnhanced, {
  sketch: true,
  sketchFont: '"Excalifont"',
})

字体加载由宿主负责

包里不包含字体文件，字体文件由宿主页面加载，插件只消费字体族名

@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap');

@font-face {
  font-family: 'Excalifont';
  src: url('https://plus.excalidraw.com/_next/static/media/Excalifont-s.p.436754fa.woff2')
    format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

fontFamily 与 sketchFont

字段	作用范围	说明
fontFamily	标准 Mermaid 文本 与 Excalidraw SVG 文本覆盖	两种渲染器都可用
sketchFont	Mermaid sketch 模式	会先回退到 fontFamily，再回退到内建 sketch 栈

单字体预设与回退链

Playground 现在默认使用单字体预设，方便直接比较每种字体的风格

中英混排场景依然可以手动写回退链

md.use(markdownItMermaidEnhanced, {
  sketch: true,
  sketchFont: '"Excalifont", "Xiaolai SC"',
  fontFamily: '"Excalifont", "Xiaolai SC"',
})

这条链在 Mermaid.js 里会直接生效，Excalidraw 会把同一串字体写进 SVG 文本层，但布局仍以主字体度量为准

实际建议

• 英文为主的图优先用单一拉丁手写体
• 中文为主的图优先用 Xiaolai SC LXGW WenKai Lite 或 Yozai
• 只有在同一张图里混用脚本时，再引入双字体回退链