--- title: "手绘风图表 + 大图查看器" summary: "文章里的流程图画成手绘风 SVG，点开是能滚轮 / 双指缩放、拖动平移、Esc 关闭的大图查看器。" category: "visual (图表与 3D)" origin: "original" stack: ["html","css","javascript","svg"] tags: ["图表","手绘","流程图","图片查看器"] demo: "https://zhuoqidev.com/design/demos/hand-drawn-diagrams/" url: "https://zhuoqidev.com/design/hand-drawn-diagrams/" license: "MIT" added: "2026-10-14" translation: "https://zhuoqidev.com/en/design/hand-drawn-diagrams/index.md" --- # 手绘风图表 + 大图查看器 > 文章里的流程图画成手绘风 SVG，点开是能滚轮 / 双指缩放、拖动平移、Esc 关闭的大图查看器。 ## 看点 - **手绘风**：线条每笔画两遍、有一点抖，色块用斜线「涂」出来，配楷体一类的手写字体，比正规流程图亲切得多。 - **页面上只是图片**：图在构建时就画好了，正文里只放一张 ``，不加载任何画图库，也不会出现「先闪一下代码再变成图」。 - **图纸不跟主题变**：深色模式下图依旧画在浅色纸上（`--sheet`），线条颜色不用为深色另配一套。 - **打开即适应窗口**：查看器打开时按图片宽高比算出「刚好放进窗口」的宽度（CSS 变量 `--r`），再用 `--s` 在 1–4 倍之间缩放。 - **缩放不跑偏**：滚轮、双指、双击都以光标（或两指中点）为中心放大，放大前后这一点在屏幕上不动，看细节不用再找位置。 - **操作齐全**：− / + 按钮、滚轮（触控板捏合也行）、双指、双击切换、键盘 `+ − 0` 和方向键；拖动平移；Esc 或点图外关闭，拖完松手那一下不会误关。 ## 怎么用 1. 准备图：用 Mermaid 写图的文字源，构建时用无头浏览器加载 `@excalidraw/mermaid-to-excalidraw` 把它转成 Excalidraw 元素，再用 `@excalidraw/excalidraw` 的 `exportToSvg` 导出 SVG（导出的 SVG 自带手写字体，只含用到的字）。同时把场景存成 `.excalidraw` 文件，想手改就拖进 excalidraw.com 改完再导出。示例里的两张图是按同样风格预先画好的静态 SVG。 2. 文章里每张图写成 `

`，`width` / `height` 写上图的原始尺寸，避免加载时页面跳动。 3. 拷贝 `dialog.zoom` 这段 HTML、相关 CSS 和脚本。脚本会自动把 `.diagram img` 包进按钮，点击就打开查看器。 4. 想让普通照片也能点开，把选择器改成你文章里图片的选择器即可；照片可以给查看器换一张更大的图片地址。 ## 坑 - 打开前就要知道图片宽高比，不然大图还没加载完时没法算「适应窗口」的尺寸；SVG 写上 `width` / `height` 属性就有 `naturalWidth`。 - 舞台要 `touch-action: none`，否则手机上双指会缩放整个页面而不是这张图。 - 拖动结束时浏览器还会补发一次 `click`，要记下松手时间，300ms 内的背景点击不关闭查看器。 - Mermaid 转 Excalidraw 时，量文字宽度前必须先把手写字体加载好，否则框按后备字体算宽，字会撑出框外。 - 中文子图名会让转换器找不到子图，转换前先把非 ASCII 的子图 id 换成英文。 ## 参考实现（完整源码）在线演示：https://zhuoqidev.com/design/demos/hand-drawn-diagrams/。单文件，存成 .html 就能打开。 ### index.html ```html 手绘风图表与大图查看器

~/notes/ cat 手绘图表.md

图表也可以像手画的

文章里的流程图画成手绘风：线条有点抖、色块是斜线涂的。点一下图，在大图里缩放、拖着看细节。

流程图：写草稿，自己读一遍，有错别字就改一改再读一遍，没有就排版、配图，然后发布 — 图 1 · 发一篇文章的流程（点图放大）

写文章的时候只写 Mermaid 文本，构建时在无头浏览器里把它转成 Excalidraw 场景，再导出 SVG。页面上只是一张普通的 <img>，不跑任何画图脚本。

流程图：Mermaid 代码块在构建时转换成 Excalidraw 场景和手绘风 SVG，场景改完可以重新导出，页面只放一张图片，点开能缩放拖动 — 图 2 · 这些图是怎么来的（点图放大）

查看器打开时整张图刚好放进窗口，最多放大到 4 倍；按钮、滚轮、双指、双击和键盘（+ − 0、方向键）都能操作，Esc 或点图外面关闭。

```