当前位置：首页 > draw.io教程

从特定格式的 CSV 数据中插入图表

drawio5年前 (2020-12-06)draw.io教程7

您可以结合格式信息和电子表格中的 CSV 数据自动创建图表。这在处理各种类型数据的电子表格模型（例如组织结构图、攻击树、流程图）或从其他程序导出的 CSV 文件（例如网络拓扑模型或软件依赖关系图）时非常实用。

点击“排列”>“插入”>“高级”>“CSV”插入的文本脚本分为两部分。第一部分（#每行开头都有逗号）包含格式信息，用于告诉 draw.io 如何绘制每个形状、如何将它们连接起来以及形状和连接线应使用哪些样式。第二部分包含以逗号分隔的 CSV 数据。

快速介绍

  • CSV 数据中，每个形状都用一行表示。

  • 使用列标题可以像在程序中使用变量一样使用该单元格中的数据，只需将列标题名称用百分号括起来即可：%column1%

  • 列可以包含标签文本、元数据、样式信息，或者被忽略。

  • 在线 CSV 查看器工具接受 CSV 文件的 URL 和格式信息，以便在编辑器之外测试导入功能。

  • 为了提高可读性，要断开格式化行，请\在行尾添加反斜杠字符。

常用的格式化命令

下面将解释几个重要的格式化命令。

## Comments- 以两个井号 (#) 开头的行将被忽略。

# label: %column1%- 使用一列或多列中的数据作为标签。例如，要合并来自 `<title>` name、`<title>` 和position`<title>` 列的数据并使用 HTML 格式化，请使用以下代码： # label: %name%<br><i style="color:gray;">%position%</i>

# connect: {"from":"column_1", "to":"column_2", "style": "..."}- 定义连接器的目标数据和源数据所在的列及其样式。多种连接器样式需要多个连接语句。
# connect: {"from": "column1", "to": "column2", "invert": true, \
# "label": "label1", "style": "curved=1; endArrow=blockThin; endFill=1;"}
# connect: {"from": "column3", "to": "column1", "style": "curved=1;"}

# ignore: column1,column2- 此处未忽略的任何列都将作为元数据添加到形状中。

# layout: auto- 通过“排列”>“布局”选择其中一个选项。

# style: whiteSpace=wrap;html=1;fillColor=#aa8899;strokeColor=%stroke%;- 定义形状样式。可以使用固定的十六进制颜色代码，或 CSV 数据列中的十六进制值。
提示：要查看现有形状的样式，请选中它，然后Ctrl+E在 Windows 系统上按 ，或Cmd+E在 macOS 系统上按 。

  • 您不必为所有形状使用单一样式，而是可以为 CSV 数据中某一列的不同形状组定义多种样式。例如，您可以定义两种样式。
    # stylename: column1
    # styles: {"column1-style1": "rhombus;fillColor=#dae8fc;", \
    # "column1-style2": "ellipse;fillColor=#d5e8d4;"}
    在 CSV 数据中定义多个连接器样式的方法类似。

有关可用格式化命令的更多信息，请参阅 GitHub 上存储的以下示例中的注释。

逗号分隔的数据会添加到所有格式信息之后，每行开头不带井号 (#)。第一行是列标题，您可以将其用作格式命令中的变量。

从 CSV 文件导入图表

  1. 选择排列 > 插入 > 高级 > CSV。

  2. 将您的格式信息和 CSV 数据粘贴到大文本字段中，覆盖示例。

  3. 点击“导入”按钮，即可生成图表并将其插入到绘图画布中。
    注意：如果您的格式信息或 CSV 文件存在错误，可能会出现格式异常或图表结构异常的情况。CSV 对话框会记住您上次导入的内容，以便您更轻松地调试和修复问题。

了解如何将存储在公共 URL 上的 CSV 数据中的图表嵌入到 Confluence 数据中心和服务器中

组织结构图示例（CSV格式）

当您首次选择“排列”>“插入”>“高级”>“CSV”时，您看到的示例脚本是一个组织结构图，其中包含两种不同的连接器样式、带有链接电子邮件地址的 HTML 标签以及两种不同的形状样式。

在我们的在线图表查看器中打开此组织结构图

如果去掉示例中的内联帮助，脚本将如下所示：

# label: %name%<br><i style="color:gray;">%position%</i><br><a href="mailto:%email%">Email</a>## style: label;image=%image%;whiteSpace=wrap;html=1;rounded=1; fillColor=%fill%;strokeColor=%stroke%;# parentstyle: swimlane;whiteSpace=wrap;html=1;childLayout=stackLayout;horizontal=1;horizontalStack=0;resizeParent=1;resizeLast=0;collapsible=1;## namespace: csvimport-## connect: {"from": "manager", "to": "name", "invert": true, "label": "manages", "style": "curved=1;endArrow=blockThin;endFill=1;fontSize=11;"}# connect: {"from": "refs", "to": "id", "style": "curved=1;fontSize=11;"}### Node width and height, and padding for autosize# width: auto# height: auto# padding: -12## ignore: id,image,fill,stroke,refs,manager### Column to be renamed to link attribute (used as link).# link: url### Spacing between nodes, heirarchical levels and parallel connections.# nodespacing: 40# levelspacing: 100# edgespacing: 40## layout: auto### ---- CSV below this line. First line are column names. ----name,position,id,location,manager,email,fill,stroke,refs,url,imageTessa Miller,CFO,emi,Office 1,,me@example.com,#dae8fc,#6c8ebf,,https://www.draw.io,https://cdn3.iconfinder.com/data/icons/user-avatars-1/512/users-3-128.pngEdward Morrison,Brand Manager,emo,Office 2,Tessa Miller,me@example.com,#d5e8d4,#82b366,,https://www.draw.io,https://cdn3.iconfinder.com/data/icons/user-avatars-1/512/users-10-3-128.pngAlison Donovan,System Admin,rdo,Office 3,Tessa Miller,me@example.com,#d5e8d4,#82b366,"emo,tva",https://www.draw.io,https://cdn3.iconfinder.com/data/icons/user-avatars-1/512/users-2-128.pngEvan Valet,HR Director,tva,Office 4,Tessa Miller,me@example.com,#d5e8d4,#82b366,,https://www.draw.io,https://cdn3.iconfinder.com/data/icons/user-avatars-1/512/users-9-2-128.png

基于 CSV 数据的网络拓扑结构

由于 draw.io 编辑器会自动计算布局和连接器布线，因此您的图表可能不如手动设计的图表那么“漂亮”。

此网络拓扑示例使用了 AWS-19 形状库中的四种不同形状。要查看任何形状的名称，请编辑形状样式——选择形状，然后Ctrl+E在 Windows 或Cmd+EmacOS 上按相应按钮。

网络拓扑中的形状样式格式化命令如下。

# stylename: type# styles: {"server": "fontColor=#232F3E;fillColor=#232F3E;verticalLabelPosition=bottom;verticalAlign=top;align=center;html=1;shape=mxgraph.aws4.traditional_server;perimeter=none;strokeColor=#232F3E;aspect=fixed;whiteSpace=wrap;",\# "node": "fontColor=#232F3E;gradientColor=#505863;fillColor=#1E262E;strokeColor=#ffffff;dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;html=1;fontSize=12;fontStyle=0;aspect=fixed;shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.general;",\# "firewall": "fontColor=#232F3E;fillColor=#232F3E;verticalLabelPosition=bottom;verticalAlign=top;align=center;html=1;shape=mxgraph.aws4.generic_firewall;perimeter=none;strokeColor=#232F3E;aspect=fixed;whiteSpace=wrap;",\# "database": "fontColor=#232F3E;fillColor=#232F3E;verticalLabelPosition=bottom;verticalAlign=top;align=center;html=1;shape=mxgraph.aws4.generic_database;perimeter=none;strokeColor=#232F3E;labelPosition=center;horizontal=1;aspect=fixed;whiteSpace=wrap;"}

请查看网络拓扑的完整格式信息和 CSV 数据

形状样式位于typeCSV 数据的列中。CSV 数据部分的开头如下所示。

entry,zone,type,host,connected1,Internet,server,J2EE application server,32,Extranet frontend,node,Node (extranet),43,DMZ,firewall,Firewall 1,"5,6"

在我们的在线图表查看器中打开此网络拓扑图

基于 CSV 数据的 Gitflow 流程图

您可以增加图表的复杂性，使其包含许多不同的形状和样式。

在这个例子中，我们创建了 CSV 数据来表示之前一篇博客文章中的 Gitflow 示例。然后添加了格式信息，使其更易于阅读，并包含一个单独的流程图作为图例。

请查看此 Gitflow 图的完整格式信息和 CSV 数据。

在我们的在线查看器中打开此 Gitflow 流程图


Copyright Drawio.com.cn Some Rights Reserved.

Powered By Z-BlogPHP. Theme by TOYEAN.