在线做图 · 桑基图 桑基图制作
一行一条流向——来源, 去向, 数值——就能得到节点自动分列、流带宽度按数值的桑基图。重复的行自动相加；数据里有环时，会指出具体是哪条路径，方便你断开。
- 支持 Excel / WPS / 飞书粘贴
- PNG、SVG、内嵌代码
- 本地运行
贴数据，选图型
第一列是类别（或横轴），后面每一列是一组数据；第一行是名称时自动当表头。桑基图换成一行一条「来源, 去向, 数值」。
从表格复制的（Tab 分隔）、逗号或分号分隔都行。1,200、12%、¥5.4、1.2万、−30 都能识别成数字。
在左边粘贴表格就会出图。
每步转化
内嵌 SVG 代码
可以直接贴进 HTML 页面、支持 HTML 的 CMS 区块或 Markdown 文件。图会随容器缩放，并带读屏软件能读的标题。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 680 366" width="680" height="366" font-family="Inter,"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif" role="img" aria-label="从渠道到付费" style="display:block;max-width:100%;height:auto;margin:0 auto"><title>从渠道到付费</title><desc>百度搜索 → 活动落地页 500, 公众号文章 → 活动落地页 200, 百度搜索 → 价格页 150, 活动落地页 → 注册 300, 活动落地页 → 离开 400, 价格页 → 注册 90, 价格页 → 离开 60, 注册 → 付费 120</desc><rect width="680" height="366" fill="#ffffff"/><text x="16" y="28" font-size="16" font-weight="700" fill="#0b0f19">从渠道到付费</text><path d="M28 100.8C128 100.8 128 112.8 228 112.8V282.2C128 282.2 128 270.2 28 270.2Z" fill="#2050f0" fill-opacity=".32"><title>百度搜索 → 活动落地页: 500</title></path><path d="M28 282.2C128 282.2 128 282.2 228 282.2V350C128 350 128 350 28 350Z" fill="#1baf7a" fill-opacity=".32"><title>公众号文章 → 活动落地页: 200</title></path><path d="M28 50C128 50 128 50 228 50V100.8C128 100.8 128 100.8 28 100.8Z" fill="#2050f0" fill-opacity=".32"><title>百度搜索 → 价格页: 150</title></path><path d="M240 112.8C340 112.8 340 164.4 440 164.4V266.1C340 266.1 340 214.5 240 214.5Z" fill="#eb6834" fill-opacity=".32"><title>活动落地页 → 注册: 300</title></path><path d="M240 214.5C446 214.5 446 168.7 652 168.7V304.3C446 304.3 446 350 240 350Z" fill="#eb6834" fill-opacity=".32"><title>活动落地页 → 离开: 400</title></path><path d="M240 50C340 50 340 133.9 440 133.9V164.4C340 164.4 340 80.5 240 80.5Z" fill="#eda100" fill-opacity=".32"><title>价格页 → 注册: 90</title></path><path d="M240 80.5C446 80.5 446 148.4 652 148.4V168.7C446 168.7 446 100.8 240 100.8Z" fill="#eda100" fill-opacity=".32"><title>价格页 → 离开: 60</title></path><path d="M452 133.9C552 133.9 552 95.7 652 95.7V136.4C552 136.4 552 174.6 452 174.6Z" fill="#e87ba4" fill-opacity=".32"><title>注册 → 付费: 120</title></path><rect x="16" y="50" width="12" height="220.2" rx="2" fill="#2050f0"><title>百度搜索: 650</title></rect><text x="34" y="158.1" text-anchor="start" font-size="12" font-weight="600" fill="#0b0f19">百度搜索</text><text x="34" y="172.1" text-anchor="start" font-size="11" fill="#4b5563">650</text><rect x="228" y="112.8" width="12" height="237.2" rx="2" fill="#eb6834"><title>活动落地页: 700</title></rect><text x="246" y="229.4" text-anchor="start" font-size="12" font-weight="600" fill="#0b0f19">活动落地页</text><text x="246" y="243.4" text-anchor="start" font-size="11" fill="#4b5563">700</text><rect x="16" y="282.2" width="12" height="67.8" rx="2" fill="#1baf7a"><title>公众号文章: 200</title></rect><text x="34" y="314.1" text-anchor="start" font-size="12" font-weight="600" fill="#0b0f19">公众号文章</text><text x="34" y="328.1" text-anchor="start" font-size="11" fill="#4b5563">200</text><rect x="228" y="50" width="12" height="50.8" rx="2" fill="#eda100"><title>价格页: 150</title></rect><text x="246" y="73.4" text-anchor="start" font-size="12" font-weight="600" fill="#0b0f19">价格页</text><text x="246" y="87.4" text-anchor="start" font-size="11" fill="#4b5563">150</text><rect x="440" y="133.9" width="12" height="132.1" rx="2" fill="#e87ba4"><title>注册: 390</title></rect><text x="458" y="198" text-anchor="start" font-size="12" font-weight="600" fill="#0b0f19">注册</text><text x="458" y="212" text-anchor="start" font-size="11" fill="#4b5563">390</text><rect x="652" y="148.4" width="12" height="155.9" rx="2" fill="#008300"><title>离开: 460</title></rect><text x="646" y="224.3" text-anchor="end" font-size="12" font-weight="600" fill="#0b0f19">离开</text><text x="646" y="238.3" text-anchor="end" font-size="11" fill="#4b5563">460</text><rect x="652" y="95.7" width="12" height="40.7" rx="2" fill="#6250d6"><title>付费: 120</title></rect><text x="646" y="114.1" text-anchor="end" font-size="12" font-weight="600" fill="#0b0f19">付费</text><text x="646" y="128.1" text-anchor="end" font-size="11" fill="#4b5563">120</text></svg>版本 v1.0更新于 更新记录
什么数据适合做桑基图
桑基图展示一个量在各阶段之间怎么分流、汇合。每条流带的宽度就是数值，所以从左到右总量守恒。
阶段之间的流向
渠道 → 落地页 → 结果；预算来源 → 用途；用户从一个套餐换到另一个。每一行是一条流向。
单向，不能有环
A → B → A 没法从左往右画。给重复的那次改名（「价格页（第 2 次）」），或者在第一次回头时截断。工具会指出找到的环。
节点最多几十个
最多接受 60 个节点，但远没到 60 就已经难读了。把小来源合并成「其它」。
不适合精确比较
流带宽度很难精确比较。鼠标移上去看数值，或者配一张表。
布局：节点所在的列 = 它离源头的最长距离；没有流出的节点放在最后一列。节点高度取流入和流出中较大的那个。
从表格到 PPT 四步
一边改，图一边重画。
-
1
复制单元格
在 Excel、WPS 或飞书表格里选中数据（连表头一起）复制；也可以直接粘贴 CSV 文本。
-
2
粘贴，选图型
第一列当类别，其余每列是一组数据。选好图型，图下面的检查会告诉你数据适不适合这种图。
-
3
调整
加标题、换配色、柱子从大到小排、名称长就改成横向、多列数据选并排或堆叠。
-
4
导出
PNG 放 PPT、微信和钉钉；SVG 用于印刷和设计软件；内嵌代码贴进网页。
解析规则
工具尽量少猜；不得不猜的地方会明说。
- 分隔符：只要有 Tab 就按 Tab 分（从表格复制出来就是这样），否则在逗号、分号、竖线里选列数最一致的那个。支持带引号的 CSV。
- 表头：第一行里除第一列外只要有一格不是数字，就当表头。
- 数字：千分位、货币符号、末尾的 %、负号或会计括号、全角数字、万 / 亿 / k 都能识别；读不出来的按空值处理并列出来。
- 上限：200 行、8 列数字。饼图保留最大的 7 块，其余合并成「其它」。
| 图型 | 列 | 示例行 |
|---|---|---|
| 柱状图 / 折线图 | 名称, 数值, [数值…] | 1月, 1240, 860 |
| 饼图 | 名称, 数值（正数） | 抖音, 860 |
| 漏斗图 | 步骤, 人数（按顺序） | 加入购物车, 1248 |
| 桑基图 | 来源, 去向, 数值 | 百度搜索, 价格页, 150 |
同一张表，三种说法
默认数据是 5 个月里官网、App、小程序三端的注册人数。同样的数，换一种图回答的是不同的问题。
| 问题 | 用什么图 | 看到什么 |
|---|---|---|
| 哪一端来的人最多？ | 柱状图，并排 | 每个月都是小程序最多，官网第二。 |
| 总数在涨吗？ | 柱状图，堆叠 | 合计从 1 月的 3,410 涨到 5 月的 4,450。 |
| 哪一端涨得最快？ | 折线图 | 小程序涨 42%（1,310 → 1,860），App 26%，官网 22%。 |
| 5 月小程序占多少？ | 饼图（只放 5 月） | 1,860 ÷ 4,450 = 41.8%。 |
增长率 =（5 月 − 1 月）÷ 1 月。只把 5 月那一列贴进饼图，就能自己核对占比。
数都对，图却误导人
每个数字都没错，图照样能给人错误的印象。
柱状图纵轴不从 0 开始
柱子的长度就是数值。纵轴从 900 截断，950 看起来就是 925 的两倍。本工具的柱子一律从 0 起；折线可以放大。
饼图里混进合计行
把「合计」和各部分一起贴进来，每块都只剩真实大小的一半。某一行等于其它行之和时，工具会提醒。
双纵轴
有两套刻度时，两条线在哪儿交叉，完全由设刻度的人决定。做两张图，或把两组数都换算成以 100 为起点的指数。
只靠颜色区分
大约每 12 个男性里就有 1 个有某种色觉异常。这里每张图都同时用图例或标签写出名称。
会自己更新的图
粘贴出来的图是一张快照。在 TapCub 里，同样的图由实时事件生成，自动刷新。
桑基图需要什么格式的数据？
三列：来源、去向、数值，一行一条流向，表头可有可无。来源和去向相同的行会自动相加。
为什么提示数据里有环？
有一条流向回到了前面的节点，比如价格页 → 落地页 → 价格页。桑基图只能单向流动，给第二次访问单独起个名字就行。
桑基图和路径分析是一回事吗？
路径分析常用桑基式的图来展示：用户实际走过的页面或事件序列。TapCub 的路径分析用实时事件生成这样的图。
为什么有的节点比流出的流带高？
节点高度取流入和流出中较大的。比如 390 人到了注册、120 人继续到付费，剩下 270 人没有对应的行——加一行（如「注册, 未付费, 270」）就能显示出来。