快速开始

最短路径只包含三部分：markdown-it 插件 浏览器运行时 与样式表

安装运行时链路

bun install markdown-it markdown-it-mermaid-enhanced mermaid

注册 markdown-it 插件

import MarkdownIt from 'markdown-it'
import markdownItMermaidEnhanced from 'markdown-it-mermaid-enhanced'

const markdown = new MarkdownIt().use(markdownItMermaidEnhanced, {
  theme: 'auto',
  renderEngine: 'mermaidjs',
  minHeight: '160px',
})

载入浏览器运行时

import 'markdown-it-mermaid-enhanced/styles.css'
import { initMermaidIt } from 'markdown-it-mermaid-enhanced/runtime'

const html = markdown.render(`
\`\`\`mermaid
flowchart LR
  A[Build] --> B[Deploy]
\`\`\`
`)

document.querySelector('#app')!.innerHTML = html
await initMermaidIt(document.querySelector('#app')!)

VitePress 接线

import { defineConfig } from 'vitepress'
import markdownItMermaidEnhanced from 'markdown-it-mermaid-enhanced'

export default defineConfig({
  markdown: {
    config: (md) => {
      md.use(markdownItMermaidEnhanced, {
        theme: 'auto',
        renderEngine: 'mermaidjs',
        minHeight: '160px',
      })
    },
  },
})

import type { Theme } from 'vitepress'
import DefaultTheme from 'vitepress/theme'
import 'markdown-it-mermaid-enhanced/styles.css'
import mermaidPlugin from 'markdown-it-mermaid-enhanced/vitepress'

export default {
  extends: DefaultTheme,
  enhanceApp(ctx) {
    mermaidPlugin(ctx, { waitFor: 'animation-frame' })
  },
} satisfies Theme

第一张图

flowchart LR
  Fence["Markdown fence"] --> Plugin["markdown-it-mermaid-enhanced"]
  Plugin --> Wrapper["wrapper HTML"]
  Wrapper --> Runtime["runtime hydration"]
  Runtime --> Diagram["interactive SVG"]

Loading diagram…

文档站默认高度

文档站通常比博客正文更依赖宽图，所以默认高度一般会再向上抬一层

.VPDoc {
  --mermaid-it-min-height: 220px;
}

下一步

• 工作原理 解释渲染管线
• 渲染引擎 对比 Mermaid.js 与 Excalidraw
• 手绘与字体 说明 sketch 模式与字体策略
• 插件选项 收口完整配置面