Sketch and fonts

Sketch mode is where the package stops being a plain Mermaid wrapper and starts acting like a docs-friendly drawing tool

Sketch mode basics

sketch: true turns on the hand-drawn styling path for Mermaid.js

sketchFont also enables sketch mode automatically

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

Font loading stays in the host app

The package does not bundle font files. The host page loads fonts, and the plugin only consumes family names

@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 and sketchFont

Field	Scope	Notes
fontFamily	Standard Mermaid text and best-effort Excalidraw SVG text override	Works in both renderers
sketchFont	Mermaid sketch mode only	Falls back to fontFamily, then the built-in sketch stack

Single-family presets and fallback chains

The playground now uses single-family presets to make visual comparison clearer

For bilingual handwritten output, a manual fallback chain still works

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

That chain is honored directly by Mermaid.js. Excalidraw reuses the same family string on the SVG text layer, but layout is still driven by the primary font metrics

Practical guidance

• Use a single Latin handwritten font for English-heavy diagrams
• Use Xiaolai SC, LXGW WenKai Lite, or Yozai for CJK-heavy diagrams
• Use a manual fallback chain only when mixed scripts appear in the same diagram