把 Tesla 财报桑基图转成 Mermaid:原图、数据和复刻结果对比
先说结论:这张 Tesla Q3 FY25 Income Statement 图,最适合用 Mermaid 的 sankey-beta 做“结构复刻”,不适合做“视觉像素级复刻”。
原因很简单。原图的信息骨架非常清楚:收入从汽车、能源、服务进入 Revenue,再拆成 Cost of revenue 和 Gross profit,最后继续流向 Operating expenses、Operating profit、Interest、Tax 和 Net profit。这个结构 Mermaid 能表达。
但原图的设计细节更多:灰色收入流、绿色利润流、红色成本费用流、Tesla 标志、产品小图、边上注释、Y/Y 增速、margin 信息、生产和交付卡片。这些 Mermaid Sankey 不能完整承载。
所以这次的转换目标不是复刻一张海报,而是把原图里的财务流向变成一段可维护、可复制、可继续追加案例的代码。
原图

图片来源:App Economy Insights: Tesla: Into The Unknown。
原图在表达什么
原图标题是 Tesla Q3 FY25 Income Statement。它把 Tesla 当季收入表拆成三段:
| 层级 | 原图信息 | 数值 |
|---|---|---|
| 收入来源 | Auto sales | $20.4B |
| 收入来源 | Regulatory credits | $0.4B |
| 收入来源 | Leasing | $0.4B |
| 汇总收入 | Auto | $21.2B |
| 收入来源 | Energy generation & storage | $3.4B |
| 收入来源 | Services | $3.5B |
| 汇总收入 | Revenue | $28.1B |
| 成本 | Cost of revenue | $23.0B |
| 毛利 | Gross profit | $5.1B |
| 费用 | Operating expenses | $3.4B |
| 经营利润 | Operating profit | $1.6B |
| 其他收益 | Interest | $0.4B |
| 税费 | Tax | $0.6B |
| 净利润 | Net profit | $1.4B |
这张图最重要的不是“Tesla 有多少收入”,而是收入一路被拆掉之后,最后剩下多少净利润。
从 $28.1B Revenue 到 $1.4B Net profit,中间最大的一刀是 $23.0B Cost of revenue。换句话说,这张图真正想让读者一眼看到的是:Tesla 仍然是一个规模很大的硬件和制造公司,成本结构决定了利润空间。
解析后的 Mermaid 版本
下面是把原图解析成 Mermaid Sankey 后的结果。
我额外加了一个 Rounding gap 节点。原图里的 Gross profit 是 $5.1B,Operating expenses 是 $3.4B,Operating profit 是 $1.6B,两者相加是 $5.0B。差出来的 $0.1B 大概率来自财报四舍五入。
如果不补这个节点,Mermaid 也能画,但读者会看到 Gross profit 的流入和流出略微不平衡。对财务图来说,显式标出 rounding gap 更诚实。
可复制的绘制代码
如果只想复制代码,可以直接用这一段:
sankey-beta
Auto sales,Auto,20.4
Regulatory credits,Auto,0.4
Leasing,Auto,0.4
Auto,Revenue,21.2
Energy generation and storage,Revenue,3.4
Services,Revenue,3.5
Revenue,Cost of revenue,23.0
Revenue,Gross profit,5.1
Gross profit,Operating expenses,3.4
Gross profit,Operating profit,1.6
Gross profit,Rounding gap,0.1
Operating expenses,R&D,1.6
Operating expenses,SG&A,1.6
Operating expenses,Restructuring,0.2
Operating profit,Profit before tax,1.6
Interest,Profit before tax,0.4
Profit before tax,Tax,0.6
Profit before tax,Net profit,1.4
原图和 Mermaid 图的差异
| 对比项 | 原图 | Mermaid Sankey |
|---|---|---|
| 财务流向 | 完整 | 完整 |
| 金额比例 | 基本准确 | 基本准确 |
| 颜色语义 | 灰色收入、绿色利润、红色成本费用 | 默认主题颜色,难以逐条控制 |
| 辅助信息 | 包含 margin、Y/Y、生产、交付 | 需要用正文或表格补充 |
| 视觉表达 | 更适合社交媒体传播 | 更适合文档、代码仓库和可维护内容 |
| 可编辑性 | 依赖图片编辑 | 直接改文本 |
Mermaid 的价值不在于“更漂亮”,而在于“更可维护”。
原图更适合传播,因为它把所有信息揉在一张图里,视觉层次很强。Mermaid 更适合沉淀,因为每一条边都是结构化文本。以后如果 Tesla 下一季度收入变成 $30B,只需要改几行数字,不需要重新设计整张图。
后续图片的处理模板
后面如果继续解析类似图片,我会按这个模板处理:
- 先把图里的节点和金额抽出来。
- 再判断哪些是主路径,哪些只是注释信息。
- 把主路径转成
sankey-beta。 - 对无法在 Mermaid 里表达的内容,用表格或文字补充。
- 如果存在四舍五入差额,单独标成
Rounding gap。
这套方法适合财报、能量流、业务收入结构、用户漏斗、成本拆分。不适合高度依赖图片、图标、空间布局和品牌视觉的图。
一句话:Mermaid Sankey 负责保存结构,原图负责表达情绪和设计。两者不是替代关系,而是互补关系。
评论互动