大多数组织在电子表格中存储大量数据。当然，电子表格程序非常擅长从纯数字数据创建图表。但如果你的数据不仅仅是数字呢？
也许你在电子表格或数据库中跟踪供应链 - 这最好以流程图的形式呈现。或者你有员工信息，想要格式化为组织结构图。
插入CSV数据并自动创建绘图
Hello World - 简单的CSV流程图
当你将以下文本粘贴到插入 > CSV对话框中时，你会看到一个包含五个形状的非常简单的流程图。
## Hello World
# label: %step%
# style: shape=%shape%;fillColor=%fill%;strokeColor=%stroke%;
# namespace: csvimport-
# connect:
# width: auto
# height: auto
# padding: 15
# ignore: id,shape,fill,stroke,refs
# nodespacing: 40
# levelspacing: 100
# edgespacing: 40
# layout: auto
## CSV starts under this line
id,step,fill,stroke,shape,refs
1,Hello World,#dae8fc,#6c8ebf,rectangle,
2,Am I alive?,#fff2cc,#d6b656,rhombus,1
3,Yes,#d5e8d4,#82b366,ellipse,2
4,No,#f8cecc,#b85450,ellipse,2
5,,#fff2cc,#d6b656,mxgraph.basic.smiley,3
顶部的配置部分
实际CSV数据上方的顶部（较大）部分是配置 - 你需要指定形状、标签和连接器样式、形状如何连接以及图表的布局。配置中的每一行都必须以井号（#）开头。
提示： 以两个井号（##）开头的行会被忽略，非常适合编写解释性注释。
逐步了解配置，最重要的定义如下：
- 此示例中每个形状的
label是'step'列中的条目，此变量由围绕它的百分号表示：%step% style定义包括形状（由CSV数据中的'shape'列指定）、设置形状的圆角、使用CSV数据中'fill'和'stroke'列定义的填充和边框颜色- 配置中的
connect行定义哪些形状连接到其他形状（从'refs'列到'id'列）、连接器方向是否反转以及连接器和箭头的样式 node-、level-和edgespacing行表示图表中形状（和级别）之间的距离- 最后，
layout表示图表的实际布局。这遵循与排列 > 布局相同的自动布局
注意： 你可以用斜杠分解长样式配置（在大括号内），但确保下一行 - 续行 - 以井号（#）字符开头！
底部的CSV数据
在示例底部，你会看到几行不以井号（#）开头的内容。这是逗号分隔（CSV）数据。每行是图表中的一个形状。CSV数据的第一行是列"标题" - 它们在配置部分中用作变量名，不会在图表中显示。
样式和格式选项
形状、连接器和标签都可以有不同的样式 - 背景、渐变、圆角、虚线边框、箭头样式、不同字体等。在CSV数据上方的配置部分中有大量选项来设置图表组件的样式。请参考以下文章了解更多信息：
使用AWS的习惯跟踪应用基础设施图表
一个稍微复杂的示例，说明如何使用更复杂的形状，是使用Amazon Web Services的习惯跟踪应用的基础设施。
它被设计为一个非常简单的无服务器Web应用，使用标准AWS组件，所有这些组件都可以在AWS形状库中找到。
有一些额外的样式设置，比如将形状标签移到形状下方并使用无箭头的虚线连接器。
AWS diagram
# label: %component%
# style: shape=%shape%;fillColor=%fill%;strokeColor=%stroke%;verticalLabelPosition=bottom;aspect=fixed;
# namespace: csvimport-
# connect: {"from":"refs", "to":"id", "invert":true, "style": \
# "curved=0;endArrow=none;endFill=0;dashed=1;strokeColor=#6c8ebf;"}
# width: 80
# height: 80
# ignore: id,shape,fill,stroke,refs
# nodespacing: 40
# levelspacing: 40
# edgespacing: 40
# layout: horizontaltree
## CSV data starts below this line
id,component,fill,stroke,shape,refs
1,Habit Tracker HTML App,#ffe6cc,#d79b00,mxgraph.aws4.mobile,
2,UI Assets,#277116,#ffffff,mxgraph.aws4.s3,1
3,User Authentication,#C7131F,#ffffff,mxgraph.aws4.cognito,1
4,API Gateway,#5A30B5,#ffffff,mxgraph.aws4.api_gateway,1
5,AWS Lambda,#277116,none,mxgraph.aws4.lambda_function,4
6,Database,#3334B9,#ffffff,mxgraph.aws4.dynamodb,5
在CSV中使用什么形状名称？
可以查看任意图形的样式获取图形的名称：
从CSV数据创建习惯跟踪应用用例图
为了使其更复杂一些，下一个示例重新创建了早期文章中的习惯跟踪应用UML用例图。它有三种不同的连接器类型 - 一种从用户到操作，然后是各种用例之间的includes和extends关系。
这些不同的连接在CSV数据中都在各自的列中表示，并且每种连接类型都有三种不同的样式。
注意： 由于布局是自动计算的，它将是可读的，但对于这样的图表不一定是最合理的 - 用户和教练角色最好位于图表的两侧。
下面是三种不同连接器的配置代码，然后是几行CSV数据，这样你就可以看到这个示例是如何构建的。有关完整代码，请在打开示例图表并展开用例图下方的容器形状。
## Habit Tracker UML use case diagram - connector styles
# connect:
# connect: {"from":"includes", "to":"id", "label":"includes", "style": \
# "curved=0;endArrow=blockThin;endFill=1;dashed=1;"}
# connect: {"from":"extends", "to":"id", "label":"extends", "style": \
# "curved=0;endArrow=blockThin;endFill=1;dashed=1;"}
## Partial CSV data for the Habit Tracker UML use case diagram example
id,action,fill,stroke,shape,includes,extends,refs
1,User,#dae8fc,#6c8ebf,umlActor,,,"3,4,5,6,7"
2,Coach,#dae8fc,#6c8ebf,umlActor,,,"10,6,7,12"
3,Add a habit,#dae8fc,#6c8ebf,ellipse,9,,
6,List habits,#dae8fc,#6c8ebf,ellipse,,,
7,View habit history,#dae8fc,#6c8ebf,ellipse,,8,
10,Add a comment,#dae8fc,#6c8ebf,ellipse,9,5,
复杂示例 - 从CSV数据创建供应链图表
这是汽车中一个组件 - 变速器的部分供应链。汽车有数十万个零件和数百个这些零件的供应商。许多公司出于安全（和保险）原因需要能够将供应链追溯到原材料供应商。
在此示例中，图表中每种类型的供应商或组件都有不同的形状和样式，所有这些都在配置部分中定义。
通过将形状颜色移到配置部分的样式定义中，CSV变得更加简洁。 以下是此示例中的几行：
## Partial CSV data for the Supply Chain example
id,name,supplier,shapeType
mb,Mine B,,raw
w1,Well 1,,well
fc,Foundry C,"ma,md",foundry
o1,Oil and Gas 1,w2,raw
man5,Manufacturer 5,ca,manufacturer
ca,Chemicals A,o3,chemicals
eb,Electronics B,cc,electronics
a1,Assembly 1,"3,4,5",assembly
1,gearbox housing,fb,component
更多CSV数据和配置的基本示例
我们在配置注释中为每一行添加了许多基本的CSV数据示例和详细说明 - 请访问我们的GitHub存储库查看每个图表的文本文件。
