Mermaid 的手绘风是怎么画出歪线的？拆解 look: handDrawn 与 handDrawnSeed

Mermaid 的手绘风是怎么画出歪线的拆解 look: handDrawn 与 handDrawnSeed【免费下载链接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown项目地址: https://gitcode.com/GitHub_Trending/me/mermaidMermaid 能用文本画图也能把图画成歪歪扭扭的手绘风。本文以look: handDrawn手绘风格为主角先在仓库自带的本地编辑器里跑起来再反推线为什么抖、填充为什么是斜线、抖动为什么每次刷新都不同的实现最后把一套几何、多种外观的参数化做法搬进你自己的图表工具。跑起来最短路径环境要求 Node ≥ 22.12package.json 的engines写死。先克隆仓库并装依赖git clone https://gitcode.com/GitHub_Trending/me/mermaid cd mermaid pnpm install你会看到依赖安装完成、无 ERRORS 输出即可继续。接着启动完整构建链pnpm build:mermaid:full这条命令是 5 步串联见 package.json 的build:mermaid:full清产物、编译 mermaid.min.js、把 static/ 目录和mermaid.min.js、purify.min.js拷进同一个输出目录最后用 sirv 起服务。构建完成后终端会停住显示类似Local: http://localhost:8081/的提示说明编辑器已被托管保持终端运行不要关掉。浏览器打开 http://localhost:8081你会看到左侧是一个源码文本域右侧预览着默认的四节点流程图顶部有 Save / New / Delete / Export SVG 按钮。现在把左侧内容换成--- config: look: handDrawn --- flowchart LR UI[Web app] -- API[Order API] API -- DB[(Database)]你会看到右侧预览立刻变成另一种画风方框外轮廓不再笔直填充变成一组平行斜线hachure刷新页面后同样的图抖动方式又变了。第一眼记住三个可核对的现象① 线条抖、文字不抖② 斜线填充③ 每次刷新抖动都不同。下一节就从这三件事反推实现。从你看到的反推它怎么做的先给一张职责表三个现象各自落在不同文件界面现象负责文件关键动作节点轮廓抖动 斜线填充handDrawnShapeStyles.ts组装 roughjs 参数roughness 0.7、hachure填充、seed几十种形状共用同一套抖动stadium.ts把轮廓采成点数组后交给rc.path默认 neo/classic 不抖同上一个分支roughness 0、fillStyle solid退化为精确几何连线比节点抖得更少edges.js连线roughness: 0.3节点0.7现象一抖动的参数集中在一个对象里。handDrawnShapeStyles.ts 的userNodeOverrides()把全部手绘参数收进一个 options 对象{ roughness: 0.7, // 抖动幅度 fillStyle: hachure, // 斜线填充 hachureGap: 1.5, stroke: stylesMap.get(stroke) || nodeBorder, seed: handDrawnSeed, // 0 每次随机 }它为什么这么写rough.js 负责把一段几何画歪各形状函数只换几何、不换风格于是 20 多种形状stadium、circle、cloud……的手绘观感天然一致改风格只改这一个对象。现象二不抖的图也走 rough.js。看 stadium.tsconst rc rough.svg(shapeSvg); const options userNodeOverrides(node, {}); if (node.look ! handDrawn) { options.roughness 0; // 零抖动 options.fillStyle solid; // 实色填充 } const shapeNode rc.path(pathData, options);它为什么这么写roughness 0时 rough.js 输出精确几何直线是抖动的退化情况。三种外观classic / neo / handDrawn共用同一条几何管线节点边界与连线命中检测node.intersect也复用同一份点数组不会因换外观而错位。现象三抖动为什么每次不同、又为什么能锁住。配置项handDrawnSeed默认 0即每次渲染新抖动模拟真实手绘需要确定输出时设一个数config.type.ts 里写明它是为自动化视觉测试服务的。仓库的 e2e 用例e2e/diagrams/flowchart/handdrawn/就是靠 frontmatter 固定配置来逐像素对比的。为什么不做成别的样为什么不用 SVG filterfeTurbulence把整张图整体扭动因为滤镜连文字一起扭且所有元素共享同一份噪声没有线抖字不抖的效果rough.js 按形状几何逐段扰动文字保持清晰每个形状还能独立调roughness。边界条件超大图的 rough 路径段会撑大 DOM追求极致性能时可以退回整图滤镜。为什么默认 seed 是随机的不怕测试截图飘默认值服务的是观感——每次刷新都像重新画了一遍而测试需要确定性就显式设handDrawnSeed。边界条件任何要求每次渲染输出相同的场景打印、CI 对比都必须固定 seed否则 diff 永远过不了。为什么 neo 外观不直接用原生rect非要绕一圈 rough.js因为形状函数先算出一组轮廓点几何计算、命中检测、三种外观都吃这份数据一条管线出三种结果。边界条件roughjs 是硬依赖——仓库甚至为它打了类型补丁patches/roughjs.patch想裁剪构建体积时不能简单删掉它。它做不到的地方手绘模式下classDef/style给节点换色会打折扣。stadium.ts 里cssStyles只在node.look ! handDrawn时写入 path 的 style填充与描边实际取自主题色。此时怎么办需要逐节点配色时在你本地克隆中改 handDrawnShapeStyles.ts 的透传逻辑。不是所有图表类型都支持手绘。支持与否由各渲染器自己的isHandDrawn判断决定如 vennRenderer.ts、ishikawaRenderer.ts。此时怎么办先查目标图表类型的渲染器与文档官方指南 new-diagram.md 要求新增图表时明确写出哪些不支持手绘。本地编辑器没有全局改外观的入口。它的初始化参数固定在 config.jstheme: dark、securityLevel: strict你只能在每张图里用 frontmatter 逐个指定look。此时怎么办想整页默认手绘在你本地克隆中改该文件的mermaid.initialize参数后重跑pnpm build:mermaid:full。带走一样东西可复用模式叫风格是参数几何是常量三步执行第 1 步 → 形状的外轮廓只计算一次一份点数组作为命中检测与所有外观的唯一几何源 第 2 步 → 把风格参数roughness / fill / seed收进单个 options 对象取值完全由 config 驱动 第 3 步 → 把标准外观实现为参数 0roughness 0、solid 填充而不是另开一条渲染分支。小练习预计 10 分钟在你本地克隆里跑起编辑器后给两张图分别写handDrawnSeed: 42与不写 seed 各导出一次 SVG再对 seed42 连导两次。成功判据两次 seed42 的导出文件逐字节一致diff无输出而随机 seed 的那份与前两者都不同。Mermaid 手绘风的本质是把 rough.js 的可控随机抖动做成配置参数让几何、命中、外观共用一条管线。想继续往下读核心实现都集中在 packages/mermaid/src/rendering-util/rendering-elements/shapes/每个文件就是一种形状。【免费下载链接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown项目地址: https://gitcode.com/GitHub_Trending/me/mermaid创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考