draw.io 中绘制桑基图的四种方法
桑基图最初是为可视化蒸汽机系统中的损耗而设计的。如今，它们也被用于展示多种类型系统中数据分布和状态间的流动。
能量、资源或材料在系统中的流动
不同地点之间的迁移流动
预算和财务建模
用户在多个平台或系统状态下的旅程
制造业中的废物可视化
流量（包括实体流量和数字流量）随时间的变化
导致或导致某些状态的决定（例如医疗诊断）
在桑基图中，不同的阶段或状态被称为节点，通常用垂直线表示，连接线（链接）流入和流出这些节点，并分支到下一个阶段。 打开此示例
第一个桑基图以其发明者的名字命名，绘制于1898年，它展示了理想蒸汽机和实际蒸汽机中的能量流动。他使用区域（方框）而不是垂直线来表示每个阶段。 打开此示例
如果您不需要系统数据的精确数值表示，draw.io 提供了几种绘制桑基图的方法。要直接从数据生成桑基图，可以使用 Mermaid 代码并将其插入 draw.io 以获得精确的可视化效果。
方法一：使用连接线连接曲线
最快也可能最简单的方法是使用Misc形状库中的部分矩形形状来创建水平和垂直链接。
使用弧形连接件，并将它们连接到部分矩形的角上。
部分矩形的角与弧形连接器完美对齐，使您的图表看起来整洁美观。
使用图层可以更好地管理图表
在单独的图层上添加方向箭头。锁定当前未使用的图层可以防止误编辑，从而大大简化图表的编辑和标注过程。
将区域放置在顶部的单独图层上，并使用阴影填充样式，以便清晰地看到系统底层的流程。
将连接器与航点形状连接起来
在两条曲线相交处，使用路径点形状使它们保持连接。禁用路径点形状的“线条”属性可使其不可见。
方法二：彩色连接器使用填充边缘
通过使用单独的连接器将曲线连接到部分矩形的角上，您无法为整个系统添加填充颜色——曲线上两个连接器之间的空间不是形状，因此无法填充。
Misc形状库中的填充边缘形状被路由并作为连接器连接到形状，并像形状一样填充颜色。
这是创建预算流程图或类似基于数据的分配图的理想方法。
在画布上添加一个叉形/连接形状，并在格式面板的“排列”
Fork选项卡中将其高度设置为 100 点 -在形状搜索中输入以找到叉形。将每个填充边的宽度更改为每个特定类别的百分比。
将连接器连接到线或叉形上——它们应该完美堆叠，以覆盖 100pt 高叉形的整个长度。
使用实体关系连接器形状将流程整齐地展开。
由于这是一个连接线而非形状，因此左右标签设置不会将文本移离连接线的中心。拖动橙色菱形，使每个填充边缘形状的标签对齐，以便清晰易读。
注意：填充边缘形状可能难以与部分矩形的轮廓对齐。如果您想用颜色填充整个系统，而填充边缘又难以使用，请使用部分同心椭圆或箭头形状来表示曲线。
方法三：用形状表示曲线
在这种方法中，没有连接的连接器——你的桑基图将是一系列紧挨着彼此绘制的形状，并且位置恰到好处，使其看起来像一个流动的管道系统。
使用箭头形状
箭头形状库中的U 形箭头和弯曲箭头形状非常适合绘制曲线。拖动橙色菱形即可移除箭头，将其转换为管道形状，然后像填充普通形状一样填充颜色。
不过，它们确实有最小宽度限制，可能不适合小流量或细流。
使用部分同心椭圆或弧形
基本形状库中的部分同心椭圆形状更加灵活——拖动橙色菱形即可更改其粗细和弧段。旋转使其与部分矩形形状对齐。
请确保在格式面板的“排列”选项卡中启用“约束比例”复选框，以便在调整大小时不会扭曲弧线宽度。
旋转形状，使它们紧贴或略微重叠部分矩形，然后通过“排列”选项卡或右键单击上下文菜单将部分矩形移到前面，以覆盖轮廓并“连接”管道。
通过这种方法，您可以添加填充颜色来增强图表效果。
在曲线和连接线中使用渐变色来指示节点之间的状态变化
不同路径使用不同颜色
方法四：绘制美人鱼桑基图
draw.io 不是数据可视化平台，但它可以将实验性的 Mermaid 对桑基图的描述（每个链接都有特定值）转换为 SVG 图。
以下示例已从Mermaid 文档插入到 draw.io 中。
点击“排列”>“插入”>“美人鱼”，然后将美人鱼代码添加到文本框中。
单击“插入”将图表作为 SVG 形状添加到绘图画布中。 打开此示例
draw.io 不会将 Mermaid 生成的桑基图转换为 draw.io 原生图形。将鼠标悬停在图表上即可查看 Mermaid 代码，双击图表即可编辑代码并重新生成图表。