开发画图工具与动图制作

先定"为什么画"，再选工具；先分"交付格式"和"源文件格式"，再谈交付；动图三条来路最后都汇入编码优化。

1. 工具：按"为什么画"分四类

类别	用途	代表工具
文本即代码	进 git、能 diff、可 review	Mermaid、PlantUML、D2、Graphviz
手绘白板	边讨论边画，重沟通	Excalidraw、draw.io、FigJam、Miro
专业建模	严格 UML、要出交付文档	StarUML、EA、Visio、IcePanel
AI 自动生成	说一句话或贴代码出图	Eraser、Napkin、diagrams(py)

1.1 文本即代码（开发者主力）

工具	特点
Mermaid	GitHub / GitLab / Notion / 语雀 / Obsidian 原生渲染；流程图、时序图、类图、状态图、ER、甘特、C4。零安装，改一行重新出图，日常首选
PlantUML	图类型最全（部署图、组件图、思维导图、JSON/YAML 可视化），需 Java 渲染服务，语法偏旧
D2（Terrastruct）	语法比 PlantUML 现代，自动布局 + 容器嵌套强，适合系统架构图
Graphviz (DOT)	自动布局鼻祖，依赖 / 调用关系图最好用，很多工具底层就是它
Structurizr / C4-PlantUML	C4 架构模型专用
diagrams（Python, mingrammer）	代码画云架构图，自带 AWS / GCP / Azure / K8s 图标
Kroki	一个渲染服务吃下 20+ 种 DSL，写文档时一个 URL 出图

1.2 手绘白板

Excalidraw：手绘风、有素材库、导出 PNG/SVG、可协作，嵌文档视觉最不突兀
draw.io / diagrams.net：完全免费，图元库最全（含各云厂商图标），有 VS Code 插件可离线
FigJam / Miro / 飞书白板：多人协作、便利贴、投票，评审场景用

1.3 专业建模

StarUML、Enterprise Architect、Visual Paradigm、Visio（.vsdx 是不少甲方要求的交付格式）、IcePanel（C4 架构即代码）、dbdiagram.io（用 DBML 写 ER 图）。

1.4 AI 自动生成

Eraser DiagramGPT：文字描述生成可编辑的架构图 / 时序图
Napkin：文字转概念图
大模型出源码：让模型输出 Mermaid / D2 源码再自己渲染，比让它直接"画图"好用得多，因为生成的图还能改

2. 图的种类谱系

类别	代表图种	什么时候用
结构类	类图、组件图、部署图、ER 图	说明系统由什么组成、模块怎么划分、表怎么关联
行为类	流程图、时序图、状态机、活动图	说明一件事怎么发生、谁先调谁、状态怎么流转
架构类	C4 四层模型、系统上下文图、数据流图 DFD	向不同层级的人解释系统边界与依赖
规划类	甘特图、路线图、看板、燃尽图	排期、进度、资源协调
界面类	线框图、用户旅程图、原型流程图	讨论交互、走查体验
思维类	思维导图、概念图、亲和图、鱼骨图	发散、归类、找根因

同一份逻辑换一种图，说服力就换了一种——图的形式比工具更值得记。

2.1 C4 模型四层（架构图的标准分层）

Context：系统与外部用户 / 外部系统的关系，给非技术方看
Container：应用、服务、数据库、消息队列，给技术方看
Component：单个容器内部的组件划分
Code：类级别，通常只在必要时画

3. 文件格式：必须分两类

类别	格式	说明
交付 / 展示	SVG、PNG、PDF	SVG 矢量缩放不糊、文字可 diff，优先；PNG 用于聊天工具和微信分享；PDF 用于打印和正式交付
源文件（能改）	.mmd .puml .d2 .drawio .excalidraw .vsdx	只有它还能编辑
动图	GIF、WebP、MP4/WebM	现在优先 WebP/MP4，体积是 GIF 的 1/5～1/10
交互式	HTML + JS	D3、Cytoscape、React Flow，用于可缩放架构图和知识图谱

团队常犯的错：只把导出的 PNG 提交进仓库，源文件留在个人电脑里。三个月后没人能改那张图，只能重画。源文件和代码一起进 git，图才不会变成"祖传 PNG"。

4. 无声动图：三条流水线

三条来源最后都汇入"编码与优化"，再输出为 GIF / WebP / MP4。

4.1 屏幕录制（产品 demo、操作演示）

平台	工具
Windows	ScreenToGif —— 免费最全，可逐帧删改、显示鼠标点击和键盘按键、导出 gif/mp4/apng
macOS	Kap、Gifox
跨平台轻量	LICEcap
命令行	ffmpeg 的 gdigrab（Win）/ avfoundation（mac）直接录屏再转 gif

4.2 终端录制（README 里那种命令行动图）

vhs（Charm）：写一个 .tape 脚本，声明输入什么命令、等多久、字号配色，一条命令生成 GIF/MP4。可重复生成是杀手级优势——命令改了重跑一次，动图自动更新。首选
asciinema：录成 .cast 文本文件，可复制、可搜索、体积几 KB，配播放器嵌入网页；需要让人复制命令时用它
svg-term-cli：把 cast 转 SVG 动画，清晰度无限且体积极小
termtosvg / terminalizer：同类老方案

4.3 代码生成（算法、流程演示）

Manim（Python，3Blue1Brown 那套）：数学 / 算法动画
Remotion / Motion Canvas：用 React / TS 写视频，输出 MP4 / GIF
Figma Smart Animate、Protopie、Lottie 做动效后录屏导出

5. 参数：决定动图好不好看、大不大

bash

# 两步法，不做调色板 GIF 颜色会很脏
ffmpeg -i in.mp4 -vf "fps=12,scale=900:-1:flags=lanczos,palettegen" p.png
ffmpeg -i in.mp4 -i p.png -lavfi \
 "fps=12,scale=900:-1:flags=lanczos[x];[x][1:v]paletteuse" out.gif

gifsicle -O3 --lossy=80 out.gif -o small.gif   # 通常再砍一半体积

帧率 10–15fps 就够（GIF 本身就是低帧率格式），宽度控制在 ≤1000px
循环播放、首帧停留 0.5 秒，让人来得及看清
gifski 出画质更好的 gif，gifsicle 负责瘦身
GitHub README 或网页上直接出 MP4/WebP——同样内容，GIF 5MB 时 MP4 可能只要 500KB
GitHub README 支持内联播放 MP4（2021 年起），不必再迁就 GIF

6. 选型速查（只留一套）

场景	选择
文档里的图	Mermaid（markdown 里直接写）
需要"看得舒服"的示意图	Excalidraw
架构评审	D2 或 C4-PlantUML
云架构图	diagrams(py)
专业交付文档	Visio / StarUML
终端动图	vhs（能重跑重生成）> asciinema（要能复制命令）
产品 demo	ScreenToGif / Kap 录屏 + ffmpeg + gifsicle 压

附：合并记录

本篇由 ima 知识库中 4 份重叠文件合并，原始版本已不再单独维护：

原文件	体量	处置
开发画图工具与动图制作速查卡.md	6.2K	主体骨架，六节结构全保留
01-开发画图工具选型速查.md	3.1K	内容为主篇子集，无独有信息
02-软件工程常见图类型与文件格式.md	2.6K	补入图种表"什么时候用"列、C4 四层展开
03-无声动图制作流水线与参数.md	2.7K	内容为主篇子集，无独有信息

合并原则：保留最长版本的结构，逐节比对补入其余版本的独有内容，重复表述只留一处。

开发画图工具与动图制作 ​

1. 工具：按"为什么画"分四类 ​

1.1 文本即代码（开发者主力） ​

1.2 手绘白板 ​

1.3 专业建模 ​

1.4 AI 自动生成 ​

2. 图的种类谱系 ​

2.1 C4 模型四层（架构图的标准分层） ​

3. 文件格式：必须分两类 ​

4. 无声动图：三条流水线 ​

4.1 屏幕录制（产品 demo、操作演示） ​

4.2 终端录制（README 里那种命令行动图） ​

4.3 代码生成（算法、流程演示） ​

5. 参数：决定动图好不好看、大不大 ​

6. 选型速查（只留一套） ​

附：合并记录 ​