animated-sketch-diagram

生成单文件自包含的手绘涂鸦风动画架构图并可导出 GIF

生成手绘涂鸦风格的动画架构图或流程图：米色纸面、抖动笔触、淡色块、连线上流动小圆点和图标微动，输出单文件自包含的 HTML（内联 SVG + CSS + base64 字体），并能一键导出无缝循环 GIF。适合做技术示意图、pipeline、对比图或讲解时需要既有美感又能动的配图。特别之处是成品可直接打开播放或通过脚本逐帧渲染成高质量 GIF。

# Animated Sketch Diagram（手绘涂鸦风动画信息图）

产出一张像资深工程师在牛皮笔记本上手绘的系统图：米色纸面、黑墨抖动描边、
极淡水洗色块、简笔涂鸦图标（小人/文档/纸箱/月亮）、序号章、✦ 点缀，
连线上有小圆点沿路径流动、图标带微动效，整体 3s 无缝循环。

**产物**：一个自包含 HTML 文件（内联 SVG + CSS 动画 + base64 字体，双击即可播放）；
需要 GIF 时用 `scripts/render-gif.mjs` 逐帧录制。

## 工作流

### 1. 先规划内容，再动笔

**版式跟着内容的天然形状走，不要反过来。** 先判断主题本身长什么样，再选版式原型：

| 内容的天然形状 | 版式原型 |
|---|---|
| N 个并列的类别/方案/阶段，各自内部有流程 | 横向色带 band（左侧标签栏 + 右侧流程画布） |
| 自上而下的分层架构（前端→服务→存储） | 纵向层叠：全宽色层堆叠，跨层竖直连线 |
| 一个核心与多个卫星（hub-and-spoke） | 径向：中心 mascot 大圆 + 环绕节点 + 放射连线 |
| 两三个东西逐维度对比 | 并排色柱/矩阵，同一行是同一维度 |
| 单一主流程 | 不用色带，一条蛇形/折线主轴铺满画布 |
| 时间演进 | 横向时间轴 + 上下交错的事件卡 |

原型可以混搭（如 band 内部径向）。所有原型共用同一套元件：

- **区块（region）**：一级分区的圆角水洗色块，左上序号章 + 顶部居中标题；相邻区块换色。
- **内卡（node）*