5个步骤掌握SankeyMATIC：从入门到专业的流量数据可视化指南

数据可视化工具SankeyMATIC是一款零代码的流程图制作工具，无需编程经验即可创建专业的桑基图（Sankey Diagram）。本指南将通过五个核心步骤，帮助你从基础操作到高级定制，全面掌握这一强大工具的使用方法，让复杂的流量数据以直观的视觉形式呈现。

一、基础认知：桑基图与工具架构

桑基图的核心价值与应用场景

桑基图（Sankey Diagram）是一种特殊类型的流程图，通过宽度不一的流线段表示数据流量的大小关系，特别适合展示资源流动、能量转换和层级关系。与普通流程图相比，其核心优势在于能同时呈现流量数值与路径关系，使决策者快速识别关键流转节点。

工具安装与基础界面访问

SankeyMATIC采用Web端免安装设计，通过以下两种方式即可使用：

• 在线访问：直接通过浏览器打开工具网页
• 本地部署：克隆仓库到本地运行（仓库地址：https://gitcode.com/gh_mirrors/sa/sankeymatic）

二、核心功能：从数据输入到图表生成

数据输入语法全解析

SankeyMATIC采用极简的文本输入格式，基础语法结构为：

来源节点 [流量数值] 目标节点

正确示例：

 primary income [5000] total revenue
 total revenue [2000] operating costs
 total revenue [1500] employee salaries
 total revenue [1500] retained profits

错误示例对比：

• ❌ 缺少流量数值：primary income total revenue（系统无法识别流量关系）
• ❌ 格式错误：primary income -> total revenue : 5000（错误使用箭头和冒号）
• ❌ 数值非数字：primary income [five thousand] total revenue（无法解析文本数值）

功能面板交互指南

SankeyMATIC界面采用三栏式布局，各模块协同工作实现完整的图表制作流程：

左侧输入面板：

• 文本编辑区：输入流量数据，支持单行注释（//开头）
• 数据操作区：提供"保存工作"和"加载工作"功能
• 排列选项：可选择"自动排列"或"按输入顺序排列"节点

中间控制区域：

• 图表尺寸设置：自定义宽度（Width）、高度（Height）和边距（Margins）
• 标签样式：调整节点标签的高度（Height）、宽度（Width）和间距（Spacing）
• 颜色配置：支持单色、分类色和Tableau主题色三种配色方案

右侧可视化区域：

• 实时预览窗口：动态显示图表效果
• 节点操作区：支持拖拽调整节点位置，双击重置节点
• 导出功能：提供PNG图片和SVG矢量图两种导出格式

三、场景落地：三大领域实战案例

教育资源分配可视化

原始数据：

政府拨款 [350] 基础教育
政府拨款 [200] 高等教育
社会捐赠 [80] 奖学金项目
学费收入 [120] 高等教育
高等教育 [150] 科研经费
高等教育 [250] 教学支出

配置参数：

• 图表尺寸：宽度800px，高度600px
• 颜色方案：分类色主题（基础教育-蓝色，高等教育-绿色）
• 标签设置：节点高度20px，字体大小14px

输出效果：通过流量宽度直观展示各类教育资源的分配比例，清晰呈现从资金来源到最终用途的完整流向。

供应链物流分析

原始数据：

工厂A [1200] 区域仓库
工厂B [800] 区域仓库
区域仓库 [900] 零售门店
区域仓库 [600] 电商中心
零售门店 [500] 本地销售
零售门店 [400] 退货处理

配置参数：

• 背景设置：透明背景
• 排列方式：按输入顺序排列
• 边距调整：左20px，右20px，上15px，下15px

输出效果：清晰展示从生产工厂到终端销售的物流路径，帮助识别供应链瓶颈和库存积压节点。

用户行为转化分析

原始数据：

首页访问 [5000] 产品列表
首页访问 [1200] 活动页面
产品列表 [1800] 产品详情
产品列表 [800] 搜索页面
产品详情 [600] 加入购物车
产品详情 [300] 收藏商品
加入购物车 [450] 完成购买

配置参数：

• 颜色方案：Tableau 10色系
• 节点不透明度：80%
• 图表宽度：1000px

输出效果：直观呈现用户从访问到转化的完整路径，通过流量变化识别关键流失环节。

四、进阶技巧：从基础到专业的提升路径

颜色系统高级应用

SankeyMATIC提供三种颜色配置方式，适应不同场景需求：

单色主题： 适用于简单流程图或强调整体流量关系，通过以下语法设置：

// 节点颜色设置
#node:Budget f7f7f7
// 流量颜色设置
Budget [450] Taxes #ff9900

分类色主题： 通过类别自动分配颜色，适合多维度数据展示：

// 定义类别颜色
#category:Income 3498db
#category:Expense e74c3c
// 应用类别
工资收入 [1500] 总预算 {Income}
总预算 [450] 税款 {Expense}

布局优化实用技巧

自动排列优化：

• 对于层级分明的数据，选择"Automatically"自动排列
• 对于有特定顺序要求的数据，使用"Using the exact input order"按输入顺序排列

手动调整技巧：

• 拖拽节点时按住Shift键可保持水平对齐
• 双击单个节点重置位置，点击"Reset all moved Nodes"重置所有节点
• 调整边距参数避免节点与图表边缘重叠

五、避坑指南：初学者常见问题解决方案

1. 流量数据不显示

问题表现：输入数据后图表无任何显示 解决方案：检查是否遗漏流量数值或使用了错误的数值格式，确保每行数据包含[数值]部分

2. 节点颜色不生效

问题表现：设置了颜色但图表无变化 解决方案：确认颜色代码格式正确（支持十六进制#rrggbb或颜色名称），且颜色定义行以#开头

3. 图表超出显示区域

问题表现：部分节点或流量线段被截断 解决方案：增大图表宽度/高度或调整边距参数，建议宽度不小于600px

4. 流量数值比例失调

问题表现：流量宽度差异过大导致图表变形 解决方案：对数值进行归一化处理，或使用对数刻度（详见高级配置指南）

5. 无法导出高清图片

问题表现：导出的PNG图片模糊 解决方案：在导出前将图表宽度设置为目标尺寸的2倍，导出后按50%缩放使用

附录：实用资源

常用配色代码表

颜色名称	十六进制代码	适用场景
primary blue	#3498db	主要节点
secondary green	#2ecc71	次要节点
accent orange	#e67e22	强调流量
neutral gray	#95a5a6	背景元素

数据格式校验工具

使用项目内置的数据校验功能（位于输入面板底部"Validate Data"按钮），可自动检测常见的语法错误和格式问题。

通过以上五个步骤的系统学习，你已经掌握了SankeyMATIC从基础操作到专业应用的全部核心技能。无论是教育、物流还是用户分析领域，都能通过这款强大的工具将复杂数据转化为直观易懂的可视化图表，为决策提供有力支持。记住，优秀的数据可视化不仅需要正确的工具使用，更需要对数据本质的深入理解和清晰的表达逻辑。