格子越深,表示该主题在这项指标上越高。
清晰82
说服52
密度58
制作成本36
作业适配75
工作适配90
低高
简短问答
什么时候选序列图模式?
故事符合「API 流程、支持升级、实验室协议、结账步骤」时选用。
什么时候避开?
遇到「一个简单的无序清单也会讲述同样的故事」就换形式。
谁发明或推广了它?
UML序列图; PlantUML 和 Mermaid 等文本工具
它编码什么?
参与者之间的生命线和有序消息
广告能用吗?
在微信、抖音与展示广告里主张能一眼看见就可以;否则把图放在落地页。
老师会收吗?
实验报告与展板里有轴、单位、来源一行就可以。
序列图模式把值编码为参与者之间的生命线和有序消息。UML序列图; PlantUML 和 Mermaid 等文本工具。
工作报告、广告与作业中适合「API 流程、支持升级、实验室协议、结账步骤」。若「一个简单的无序清单也会讲述同样的故事」,换一种形式。
软件
- PlantUML — 成熟的文本到 UML 包括序列 - 如果您分发,请检查 GPL 职责。 · GPL-3.0 · github.com/plantuml/plantuml
- Mermaid sequence — 文档和 GitHub 的轻量级序列语法。 · MIT · github.com/mermaid-js/mermaid
- nomnoml — 来自文本的 UML 式图表,具有友好的语法。 · MIT · github.com/skanaar/nomnoml
- D2 — 具有强大布局的现代声明性图表。 · MPL-2.0 · github.com/terrastruct/d2
- Timeline demo — 在此站点上教授 SVG 的有序事件。 · CC0 examples · github.com/Tool-Lifes/viz-atlas
导出
- 导出 1 — SVG
- 导出 2 — PDF
- 导出 3 — 把 EMF/SVG 放进幻灯(不要截图)
- 导出 4 — 网页用 SVG,印刷用 PDF
无障碍
- 无障碍 1 — 不要只靠色相。叠上纹理、标签和位置。
- 无障碍 2 — 正文对比 4.5:1,大标记 3:1。
- 无障碍 3 — 图上写短替代文本。数字也做成 HTML 表。
- 无障碍 4 — 动效只用于强调。尊重 prefers-reduced-motion。
序列图模式:守住参与者之间的生命线和有序消息,「一个简单的无序清单也会讲述同样的故事」时换图。