markdown-it-mermaid-enhancedRuntime-aware Mermaid for markdown-it

Static fences are easy. Export, rerender, zoom, route-safe hydration, and sketch rendering are the hard part

One wrapper, two renderers

Mermaid.js covers the standard path. Excalidraw keeps the same wrapper and toolbar, then swaps the renderer behind the scene

Runtime that survives route changes

The package mounts wrappers once, rerenders in place, and keeps zoom state across config-only refreshes

Sketch mode without bundled fonts

Font loading stays in the host app. The package only consumes family names, which keeps deployment simple and predictable

Export and inspection built in

Copy source, download SVG, rasterize PNG, zoom, pan, and fullscreen all live in the default runtime shell

VitePress integration included

The VitePress helper handles route transitions, hydration timing, and delayed wrapper discovery without extra glue code

Clear boundaries for custom syntax

Mermaid-compatible source goes straight through. Bespoke DSLs need preprocessing. Pixel-perfect layouts still belong to static assets

Quick preview

This site consumes the workspace package directly, so every page doubles as product documentation and an integration test bed

flowchart LR
  Fence["Markdown fence"] --> Plugin["markdown-it plugin"]
  Plugin --> Wrapper["runtime-friendly wrapper"]
  Wrapper --> Runtime["Vue runtime shell"]
  Runtime --> Toolbar["zoom copy export fullscreen"]
  Runtime --> Engine["Mermaid.js or Excalidraw"]

Loading diagram…

What lives in this site

Getting started covers the smallest working setup
How it works explains the wrapper pipeline and runtime lifecycle
Rendering engines compares Mermaid.js and Excalidraw in concrete terms
Sketch and fonts documents host-side font loading and sketch mode behavior
Flowcharts and architecture and Renderer modes move from basic output to visual trade-offs
Plugin options, Fence options, and Runtime API serve as the lookup layer