也许您正在电子表格或数据库中跟踪您的供应链-作为流程图，这将是理想的选择。或者，也许您有想要格式化为组织结构图的员工信息。
使用draw.io，您可以获取逗号分隔的数据（您的CSV文件），添加一些配置“代码”以定义其格式和连接方式，并自动创建图表！
插入CSV数据并自动创建draw.io图
在上一篇文章中，您了解了如何将逗号分隔的数据（例如CSV文件）导入到draw.io图中：
- 单击排列>插入>高级> CSV。
- 在以单个井号（＃）字符开头的行上编辑配置，并指定应如何将数据格式化为实际图表。
- 在文件底部添加以逗号分隔的数据。
- 单击导入，draw.io将自动生成您的图并将其排列在绘图区域上。
上面的组织结构图示例是“排列”>“插入”>“ CSV”对话框中的示例“代码”。弄清楚当您想要配置应该如何显示自己的数据时，配置代码的作用可能有点不知所措。因此，让我们从更简单的示例开始，逐步解决更困难的问题。
Hello World –简单的CSV流程图
将以下文本粘贴到“插入”>“ CSV”对话框中时，您将看到一个非常简单的流程图，其中包含五个形状。
＃＃ 你好，世界 ＃标签：％step％ ＃样式：shape =％shape％; fillColor =％fill％; strokeColor =％stroke％; ＃名称空间：csvimport- ＃connect：{“ from”：“ refs”，“ to”：“ id”，“ invert”：true，“ style”：“弯曲= 0; endArrow = blockThin; endFill = 1;”} ＃宽度：自动 ＃高度：自动 ＃内边距：15 ＃忽略：id，shape，fill，stroke，refs ＃个节点间距：40 ＃等级间隔：100 ＃边缘间距：40 ＃布局：自动 ## CSV在此行下开始 id，步骤，填充，描边，形状，参考 1，Hello World，＃dae8fc，＃6c8ebf，矩形， 2，我还活着吗？，＃fff2cc，＃d6b656，菱形，1 3，是，＃d5e8d4，＃82b366，椭圆，2 4，否，＃f8cecc，＃b85450，椭圆，2 5，＃fff2cc，＃d6b656，mxgraph.basic.smiley，3
顶部的“配置”部分
实际CSV数据上方文本的顶部（较大）部分是配置–您需要指定形状，标签和连接器样式，形状的连接方式以及图的布局。配置中的每一行必须以哈希（＃）开头。
提示：以两个哈希（##）开头的行将被忽略，非常适合编写解释性注释。
逐步进行配置，最重要的定义如下：
- 在此示例中，每个形状的标签是“步骤”列中的一个条目，该变量由围绕它的百分比符号指示：％step％。
- 的样式定义包括形状（在CSV数据的“形状”栏所指明），设置形状的角部是倒圆的，使用由“填充”和“行程”列在CSV中定义的填充和边框颜色数据。
- 配置中的连接线定义了将哪些形状连接到其他形状（从“ refs”列到“ id”列），连接器方向是否反转以及连接器的样式和箭头。
- 的节点- ，LEVEL-和edgespacing线表示应相距多远的形状（和水平）是图英寸
- 最后，布局指示图的实际布局。这遵循与Arrange> Layout中相同的自动布局。
注意：您可以使用斜杠将长样式配置（在大括号内）分开，但请确保下一行（续行）以井号（＃）字符开头！
底部的CSV数据
在示例的底部，您将看到一些不以哈希（＃）开头的行。这是逗号分隔（CSV）数据。在图中，每一行都是一个形状。CSV数据的第一行是“标题”列-它们在配置部分中用作变量名，并且未在图表中显示。
在draw.io中打开此图
样式和格式选项
形状，连接器和标签都可以具有不同的样式-背景，渐变，圆角，虚线边框，箭头样式，不同的字体，…在CSV数据上方的配置部分中，可以使用多种选项来为图表组件设置样式。请参阅以下帖子以获取更多信息：
- draw.io中的形状样式
- draw.io中的连接器样式和动画
AWS的Habit Tracker应用程序基础架构图
一个稍微复杂一点的示例来说明如何使用一些更复杂的形状，这是使用Amazon Web Services的Habit Tracker应用程序的基础架构。
它使用标准的AWS组件设计为一个非常简单的无服务器Web应用程序，您可以在draw.io的各种AWS形状库中找到所有这些组件。
几乎没有其他样式设置，例如，将形状标签移到形状下方，并使用无箭头的虚线连接器。
AWS图
＃标签：％component％
＃样式：shape =％shape％; fillColor =％fill％; strokeColor =％stroke％; verticalLabelPosition = bottom; aspect = fixed;
＃名称空间：csvimport-
＃连接：{“ from”：“ refs”，“ to”：“ id”，“ invert”：true，“ style”：\
＃“ curved = 0; endArrow = none; endFill = 0;破折号= 1; strokeColor =＃6c8ebf;“}
＃宽度：80
＃高度：80
＃忽略：id，shape，fill，stroke，refs
#nodespacing：40
＃levelpacing：40
＃edgepacing：40
＃layout：horizontaltree
## CSV数据从此行
ID，组件，填充，描边，形状，参考下面开始
。1，Habit Tracker HTML App，＃ffe6cc，＃d79b00，mxgraph.aws4.mobile，
2，UI资产，＃277116，
3，用户身份验证，＃C7131F，＃ffffff，mxgraph.aws4.cognito，1
4，API网关，＃5A30B5，＃ffffff，mxgraph.aws4.api_gateway，1
5，AWS Lambda，＃277116，none，mxgraph.aws4。 lambda_function，4
6，数据库，＃3334B9，＃ffffff，mxgraph.aws4.dynamodb，5
在draw.io中打开此图
我在CSV中使用什么形状名称？
您可以通过选择draw.io，然后在格式面板中单击“编辑样式”来发现任何（非复杂）形状的名称。
在此示例中，我们使用了来自AWS库的形状-它们不在draw.io的基本或高级形状库中。例如，UI资产存储桶的形状名称为：mxgraph.aws4.s3
CSV数据的Habit Tracker应用程序用例图
为了使其更加复杂，此下一个示例从先前的文章中重新创建了Habit Tracker应用UML用例图。它具有三种不同的连接器类型-一种是从用户到操作，然后是 各种用例之间的包含和扩展关系。
这些不同的连接中的每一个都在其自己的列中的CSV数据中表示，并且每种连接类型都有三种不同的样式。
注意：因为draw.io是自动设计布局的，所以它是可读的，但不一定是最适合此类图的图–用户和Coach参与者最好放在图的两边。
以下是这三种不同连接器的配置代码，其后是几行CSV数据，因此您可以看到此示例的构建方式。有关完整的代码，请在draw.io中打开示例图，并在用例图下方扩展容器形状。
## Habit Tracker UML用例图-连接器样式
＃connect：{“ from”：“ refs”，“ to”：“ id”，“ style”：“弯曲= 0; endArrow = blockThin; endFill = 1;”}
＃connect：{“ from”：“ includes”，“ to”：“ id”，“ label”：“ includes”，“ style”：\
＃“ curved = 0; endArrow = blockThin; endFill = 1; dashed = 1 ;“}
＃connect：{” from“：” extends“，” to“：” id“，” label“：” extends“，” style“：\
＃”弯曲= 0; endArrow = blockThin; endFill = 1;破折号= 1;“}
##习惯跟踪器UML用例图示例
ID的部分CSV数据ID，操作，填充，描边，形状，包括，扩展，参考
1，用户，＃dae8fc，＃6c8ebf，umlActor，“ 3、4、5， 6,7“
2，教练，＃dae8fc，＃6c8ebf，umlActor ,,” 10,6,7,12“
3，添加一个习惯，＃dae8fc，＃6c8ebf，椭圆，9 ,,
6，列出习惯，＃ dae8fc，＃6c8ebf，椭圆形，
7，查看习惯历史记录，＃dae8fc，＃6c8ebf，椭圆形，8、10
，添加评论，＃dae8fc，＃6c8ebf，椭圆形，9、5，
查看完整的配置和CSV数据
在draw.io中打开此图
一个复杂的例子–来自CSV数据的供应链图
这是仅用于汽车中一个组件（变速箱）的部分供应链。汽车具有成千上万个零件以及这些零件的数百个供应商。为了安全（和保险）的原因，这些公司中的许多公司都需要能够将供应链追溯到原材料供应商。当然，完整的供应链图可能并不明智，但是……您可以使用draw.io做到！
在此示例中，图中的每种类型的供应商或组件都具有不同的形状和样式，并且所有它们都在配置部分中定义。
注意：下面仅包括不同形状的配置“代码”。有关完整的配置和CSV数据，请在draw.io中打开该图，然后展开位于图下方的“ 配置和CSV代码”容器形状。
##形状及其样式
＃stylename：shapeType
＃样式：{“ raw”：“ shape = parallelogram; fillColor =＃f5f5f5; strokeColor =＃666666; perimeter = parallelogramPerimeter;”，\
＃“ well”：“ shape = cylinder; fillColor =＃f5f5f5; strokeColor =＃666666;“，\
＃”铸造“：” shape =梯形; fillColor =＃dae8fc; strokeColor =＃6c8ebf; perimeter = trapezoidPerimeter;“，\
＃”制造商“：” shape = hexagon; fillColor =＃d5e8d4; strokeColor =＃82b366; perimeter = hexagonPerimeter;“，\
＃” chemicals“：” rounded = 0; fillColor =＃f8cecc; strokeColor =＃b85450“，\
＃” electronics“：” rounded = 1; fillColor =＃fff2cc; strokeColor =＃d6b656“，\
＃” assembly“：” shape = triangle; fillColor =＃ffe6cc;strokeColor =＃d79b00; perimeter = trianglePerimeter;“，\
＃“ component”：“ shape = ellipse; fillColor =＃ffffff; strokeColor =＃000000; perimeter = ellipsePerimeter;”}
通过将形状颜色移到配置部分的样式定义中，CSV变得更加整洁。以下是此示例的几行内容：
##供应链示例CSV数据的部分
ID，名称，供应商，shapeType
mb，矿山B，原始
w1，井1，井
fc，铸造C，“ ma，md”，铸造
o1，石油和天然气1 w2，raw
man5，制造商5，ca，制造商
ca，化学品A，o3，化学品
eb，电子B，cc，电子
a1，组件1，“ 3,4,5”，组件
1，变速箱外壳，fb，组件
查看完整的配置和CSV数据
在draw.io中打开此图
CSV数据和配置的更多基本示例
我们添加了许多CSV数据的基本示例，并在每行的配置注释中提供了详细说明-请访问我们的GitHub存储库，以查看每个图的文本文件。
配置和CSV数据
配置和CSV数据
配置和CSV数据
