简体中文
Appearance
静态 fence 很容易,导出 重渲染 缩放 路由切换后的再挂载 与手绘渲染才是真正难点
Mermaid.js 负责标准路径,Excalidraw 复用同一套 wrapper 与工具栏,只替换背后的渲染阶段
运行时会原地重渲染 wrapper,并在配置刷新时保留缩放状态
字体文件完全交给宿主加载,包侧只消费字体族名,部署边界更清晰
复制源码 下载 SVG 下载 PNG 缩放 拖拽 和全屏都在默认运行时里
路由跳转 挂载时机 与延迟发现 wrapper 的问题都由 VitePress helper 接住
Mermaid 兼容语法直接进入主链路,自定义 DSL 走预处理,像素级布局继续交给静态资源
这个站点直接消费工作区主包,所以每一页都同时承担产品文档与集成验证的角色
flowchart LR Fence["Markdown fence"] --> Plugin["markdown-it 插件"] Plugin --> Wrapper["面向运行时的 wrapper"] Wrapper --> Runtime["Vue 运行时壳层"] Runtime --> Toolbar["缩放 复制 导出 全屏"] Runtime --> Engine["Mermaid.js 或 Excalidraw"]