格子越深，表示该主题在这项指标上越高。
清晰84
说服55
密度60
制作成本30
作业适配82
工作适配88
低高
简短问答
什么时候选美人鱼文字图？
故事符合「流程文档、入职、分配逻辑、PR 解释」时选用。
什么时候避开？
遇到「需要徒手布局的像素完美的品牌插图」就换形式。
谁发明或推广了它？
Mermaid (2014) 在 GitHub 上普及了 Markdown 原生图表
它编码什么？
渲染到 SVG 框和边的文本图形语法
广告能用吗？
在微信、抖音与展示广告里主张能一眼看见就可以；否则把图放在落地页。
老师会收吗？
实验报告与展板里有轴、单位、来源一行就可以。
美人鱼文字图把值编码为渲染到 SVG 框和边的文本图形语法。Mermaid (2014) 在 GitHub 上普及了 Markdown 原生图表。
工作报告、广告与作业中适合「流程文档、入职、分配逻辑、PR 解释」。若「需要徒手布局的像素完美的品牌插图」，换一种形式。
软件
- Mermaid — 来自文本的流程、序列、类、ER 等 - MIT 许可。 · MIT · github.com/mermaid-js/mermaid
- Mermaid CLI — 在 CI 中将图表渲染为 SVG/PNG，无需 SaaS。 · MIT · github.com/mermaid-js/mermaid-cli
- markdown-it — 通常配对以在文档中嵌入图表围栏。 · MIT · github.com/markdown-it/markdown-it
- GitHub markup notes — 研究伪造者如何在自述文件中渲染美人鱼。 · MIT · github.com/github/markup
- Flow 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。
美人鱼文字图：守住渲染到 SVG 框和边的文本图形语法，「需要徒手布局的像素完美的品牌插图」时换图。