diagrams.net 如何导入 CSV 自动生成节点：模板列、预览映射与结果检查

手里已经有一份节点清单，想快速变成流程图时，diagrams.net 网页版可以直接读取 CSV 并按列生成节点。关键不是把 CSV 随便拖进去，而是先把 id、label、parent 三列准备好，再在 CSV Import 对话框里确认模板和预览。

最稳的做法是先用三列最小模板验证一条父子链，看到预览中的节点关系正确后，再扩大到完整文件。

先准备一份能自证关系的 CSV

第一次操作不要直接拿几百行业务数据试。新建一个 UTF-8 文本文件，例如 flow-demo.csv，内容保持为一条根节点带两个子节点：

id,label,parent
root,订单处理,
pay,支付校验,root
ship,发货通知,root

这里的 id 用来识别节点，label 是画布上显示的文字，parent 通过父节点的 id 建立层级。保存后先确认逗号分隔没有被表格软件改成分号。

步骤一：打开 diagrams.net 的 CSV 导入入口

进入官方 Web 应用后，在顶部菜单依次点击 Arrange、Insert、Advanced、CSV。这是当前页面中用于按文本模板批量生成图形的入口。

可见状态：画布上弹出标题为 CSV Import 的对话框，并出现模板输入区、文件选择控件或导入相关按钮；如果仍停留在空白画布，说明菜单路径没有点到 Advanced 下的 CSV。

步骤二：选择 CSV 并核对字段模板

在 CSV Import 对话框中选择 flow-demo.csv。模板区域不要急着改样式，先确认数据列和模板中的占位符对应：%id% 取节点标识，%label% 取显示文本，%parent% 取父节点标识。

可见状态：CSV 内容或模板预览出现三行数据，字段名没有连成一列；订单处理、支付校验、发货通知 能分别对应到 label。若中文乱码，先把原文件重新保存为 UTF-8，再回到这一步。

步骤三：预览父子关系，再插入画布

保持 parent 的引用关系不变，点击对话框中的预览或生成按钮，观察结果后再执行插入。不要在预览还显示空节点时反复调整颜色和连接线，先把数据关系验对。

可见状态：预览或画布中出现一个“订单处理”节点，下面连接“支付校验”和“发货通知”，三个节点的文字可读且没有被当成一行长文本。确认无误后点击 Insert 或对话框中的确认按钮，节点才会落到画布。

步骤四：在画布上核对结果并保存

插入后点击根节点和两个子节点，检查文本是否完整、连接线是否跟随层级生成。需要留档时使用顶部 File > Save 保存 diagrams.net 文件；如果只想交付图片，可以使用 File > Export as 选择目标格式，但这一步属于导出结果，不要把导出的图片当成下一次 CSV 导入源。

可见成功状态是：画布上能独立选中三个节点，父节点与两个子节点之间存在连接，且节点标签分别是 CSV 中的三条 label 值。

常见问题与修正

为什么所有节点都挤在一起？

通常是 parent 值没有匹配已有的 id，或者每行的 id 重复。先用三行最小样例验证，再逐批加入数据。

中文显示成乱码怎么办？

检查文件编码和分隔符。用支持 UTF-8 的编辑器重新保存，确保第一行确实是 id,label,parent，不要在字段名两侧混入不可见空格。

导入后能不能继续用 CSV 修改节点？

CSV 导入是一次生成操作。修改源文件后，建议清理旧节点再重新导入，并重新检查父子关系，避免画布里留下两套重复节点。

最后确认

这条流程的验收点只有三个：入口确实是 Arrange > Insert > Advanced > CSV，模板能把 id、label、parent 对上，画布最终出现“订单处理”及两个子节点。三点都满足后，再扩大 CSV 文件或执行 File 菜单下的导出。