如何在Mermaid中使用handdraw风格？

Question

**问题：如何在Mermaid中启用并自定义handdraw风格？** 在使用Mermaid绘制流程图或图表时，我了解到可以通过`handdrawn`风格使图表呈现手绘草图效果，提升视觉吸引力。然而，在实际应用中，我发现官方文档对手绘风格的配置说明较为简略。因此，我希望了解：如何正确在Mermaid中启用handdraw风格？是否需要引入额外库或设置特定主题？能否进一步自定义线条粗细、颜色抖动等细节？掌握这些配置方法，有助于更灵活地将手绘风格应用于技术文档或演示场景。

Answer 1

一、Mermaid中启用handdrawn风格的基础配置

Mermaid 是一个基于文本的图表生成工具，广泛用于技术文档和演示文稿中。从版本 9.0.0 开始，Mermaid 引入了实验性的 handdrawn 风格，以模拟手绘草图效果。

要启用该风格，首先需要在 Mermaid 的初始化配置中设置：

mermaid.initialize({
    theme: 'base',
    handDrawn: true
  });

注意：不同宿主环境（如Markdown解析器、Web框架）可能对配置方式略有差异。例如，在 VSCode 插件或 Obsidian 中使用时，可能需通过插件设置面板调整。

• 确保使用的 Mermaid 版本 ≥ 9.0.0
• 确认渲染引擎是否支持 SVG 或 Canvas
• 检查是否有第三方插件干扰样式

二、handdrawn风格的核心视觉特征分析

handdrawn 风格主要通过以下方式模拟手绘效果：

视觉属性	默认行为	实现机制
线条抖动	轻微弯曲路径	Cubic Bezier 曲线模拟不稳定笔触
颜色噪声	微小色差变化	随机偏移 RGB 值（±5%）
粗细波动	动态变化 stroke-width	每段路径应用 ±0.3px 波动

这些视觉处理由 Mermaid 内部的 rough.js 渲染器驱动。因此，无需额外引入外部库即可使用基础手绘效果。

三、深度定制handdrawn风格参数的方法

尽管官方未提供完整的自定义接口，但可通过修改 Mermaid 的底层配置对象进行高级控制。以下是可调节的关键参数及其作用：

mermaid.initialize({
    handDrawn: true,
    roughness: 2, // 手绘粗糙度（0-3）
    bowing: 1.2,  // 线条弯曲程度
    fillStyle: 'zigzag', // 填充模式：hachure / solid / zigzag
    hachureGap: 4, // 填充线间距
    strokeWidth: 1.5 // 默认描边宽度
  });

这些参数实际上是传递给底层 Rough.js 库的选项。开发者可通过查阅 Rough.js 官方文档了解更多进阶配置。

示例：绘制一个带手绘风格的流程图

graph TD
      A[开始] --> B{条件判断}
      B -->|是| C[执行操作]
      B -->|否| D[结束]

四、兼容性与性能考量

虽然 handdrawn 风格提升了视觉吸引力，但也带来了一些潜在问题：

1. 浏览器兼容性：Safari 对 SVG 滤镜支持有限，可能导致渲染异常。
2. 导出限制：PNG 导出时可能丢失部分纹理细节。
3. 性能影响：复杂图表渲染时间增加约 15%-30%

建议在实际项目中结合如下策略：

• 为关键图表保留标准风格，仅辅助图表使用 handdrawn
• 提供“切换风格”按钮供用户选择
• 在打印或导出 PDF 时禁用手绘效果