3分钟上手Mermaid桑基图：数据流向可视化实战指南
项目地址: https://gitcode.com/GitHub_Trending/me/mermaid 你还在为复杂数据流向发愁？报表里的数字密密麻麻看不懂？用Mermaid桑基图（Sankey Diagram）3步就能将枯燥数据变成直观的流量地图，让老板一眼看清资源分配问题！读完本文你将掌握：桑基图基本语法、3种自定义样式技巧、电商流量分析实战案例，以及国内CDN加速配置。
什么是桑基图？
桑基图（Sankey Diagram）是一种特殊的流程图，用箭头宽度表示流量大小，擅长展示能源、资金、用户行为等流动型数据。比如电商平台的用户转化路径、企业的资源分配比例，都能通过桑基图一目了然。
官方文档定义：docs/syntax/sankey.md
在线示例：demos/sankey.html
快速开始：3行代码绘制第一个桑基图
引入国内CDN
<script src="https://cdn.bootcdn.net/ajax/libs/mermaid/10.4.0/mermaid.min.js"></script>
基本语法结构
桑基图由源节点、目标节点、流量值三列数据组成，用CSV格式定义：
渲染效果
核心语法：从CSV到可视化图表
基础三列规则
每一行代表一条流量关系，格式为：源节点,目标节点,流量值
官方示例：docs/syntax/sankey.md#L18-L74
sankey
电商平台,手机端,5200
电商平台,PC端,3800
手机端,新用户,2200
手机端,复购用户,3000
PC端,新用户,1500
PC端,复购用户,2300
特殊字符处理
- 包含逗号时用双引号包裹：
"Heating and cooling, homes",193.026 - 空格和特殊符号直接使用：
UK land based bioenergy,Bio-conversion,4.375
示例代码：docs/syntax/sankey.md#L238-L247
自定义样式：3个实用技巧
1. 流量数值格式化
通过配置显示单位前缀/后缀，让数据更易读：
配置项说明：docs/syntax/sankey.md#configuration
2. 链接颜色渐变
将linkColor设为gradient实现源节点到目标节点的平滑过渡：
mermaid.initialize({
sankey: {
linkColor: 'gradient', // 可选值：source/target/gradient/#hex色值
nodeAlignment: 'justify' // 节点对齐方式：left/center/right/justify
}
});
效果对比：demos/sankey.html#L42（gradient参数）
3. 图表尺寸调整
<div class="mermaid">
%%{init: { "sankey": { "width": 1200, "height": 600 } } }%%
sankey
线下活动,注册用户,150
线上推广,注册用户,320
注册用户,付费会员,89
注册用户,免费用户,381
</div>
实战案例：电商平台流量分析
需求背景
某电商平台需要分析Q3季度的流量来源与转化路径，识别资源浪费环节。数据包含：广告投放渠道、用户注册、付费转化三个层级。
桑基图实现
完整案例：demos/sankey.html#energy-flow
避坑指南
常见错误：节点未闭环
流量来源和去向不匹配会导致图表断裂，例如：
错误示例：
A,B,100
B,C,80 // 正确：B节点应有100流量，但只定义了80
正确示例：
A,B,100
B,C,80
B,损耗,20 // 补充损耗节点使流量守恒
性能优化
当数据超过500行时，建议：
- 合并小额流量：
其他渠道,总流量,45 - 使用
nodeAlignment: left减少绘图面积
总结与资源
桑基图是数据分析的"流量CT扫描"，尤其适合：
- 电商用户行为路径分析
- 企业资源分配审计
- 营销费用ROI追踪
官方资源：
现在就打开demos/sankey.html，替换成你的业务数据试试吧！
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
