How to give unique line names for draw.io diagram generated form CSV?

Question

I am using sample csv to generate a network diagram. I need to name the lines that connects one component to other.

In the sample Lines are generated by the following code:

# connect: {"from": "user", "to": "name", "invert": true, "label": "", \
#          "style": "curved=1;endArrow=blockThin;endFill=1;fontSize=11;"}
# connect: {"from": "refs", "to": "id", "style": "curved=1;fontSize=11;"}

The sample csv is:

##
## Example CSV import. Use ## for comments and # for configuration. Paste CSV below.
## The following names are reserved and should not be used (or ignored):
## id, tooltip, placeholder(s), link and label (see below)
##
#
## Node label with placeholders and HTML.
## Default is '%name_of_first_column%'.
#
# label: %name%<br>Hostname: <i style="color:gray;">%hostname%</i><br>IP: <i style="font-style: normal;color:gray;">%ip%</i><br>Zone: <i style="color:gray;">%zone%</i>
#
## Node style (placeholders are replaced once).
## Default is the current style for nodes.
#
# style: label;image=%image%;whiteSpace=wrap;html=1;rounded=1;fillColor=%fill%;strokeColor=%stroke%;
#
## Uses the given column name as the identity for cells (updates existing cells).
## Default is no identity (empty value or -).
#
# identity: -
#
## Connections between rows ("from": source colum, "to": target column).
## Label, style and invert are optional. Defaults are '', current style and false.
## In addition to label, an optional fromlabel and tolabel can be used to name the column
## that contains the text for the label in the edges source or target (invert ignored).
## The label is concatenated in the form fromlabel + label + tolabel if all are defined.
## The target column may contain a comma-separated list of values.
## Multiple connect entries are allowed.
#
# connect: {"from": "user", "to": "name", "invert": true, "label": "", \
#          "style": "curved=1;endArrow=blockThin;endFill=1;fontSize=11;"}
# connect: {"from": "refs", "to": "id", "style": "curved=1;fontSize=11;"}
#
## Node x-coordinate. Possible value is a column name. Default is empty. Layouts will
## override this value.
#
# left: 
#
## Node y-coordinate. Possible value is a column name. Default is empty. Layouts will
## override this value.
#
# top: 
#
## Node width. Possible value is a number (in px), auto or an @ sign followed by a column
## name that contains the value for the width. Default is auto.
#
# width: auto
#
## Node height. Possible value is a number (in px), auto or an @ sign followed by a column
## name that contains the value for the height. Default is auto.
#
# height: auto
#
## Padding for autosize. Default is 0.
#
# padding: -12
#
## Comma-separated list of ignored columns for metadata. (These can be
## used for connections and styles but will not be added as metadata.)
#
# ignore: id,image,fill,stroke
#
## Column to be renamed to link attribute (used as link).
#
# link: url
#
## Spacing between nodes. Default is 40.
#
# nodespacing: 40
#
## Spacing between parallel edges. Default is 40.
#
# edgespacing: 40
#
## Name of layout. Possible values are auto, none, verticaltree, horizontaltree,
## verticalflow, horizontalflow, organic, circle. Default is auto.
#
# layout: horizontalflow
#
## ---- CSV below this line. First line are column names. ----
name,hostname,id,zone,ip,user,email,fill,stroke,refs,url,image
A,Users1,a,zone0,10.1.1.1,,name@domain.com,#dae8fc,#6c8ebf,,https://users1.domain.com,https://cdn2.iconfinder.com/data/icons/office-icon-set-3/512/users.png
B,Users2,b,zone0,10.1.1.2,,name@domain.com,#dae8fc,#6c8ebf,,https://users2.domain.com,https://cdn2.iconfinder.com/data/icons/office-icon-set-3/512/users.png
C,Users3,c,zone2,10.1.1.3,,name@domain.com,#dae8fc,#6c8ebf,,https://users3.domain.com,https://cdn2.iconfinder.com/data/icons/office-icon-set-3/512/users.png
D,Login1,d,zone1,10.1.1.4,A,name@domain.com,#b3b3b3,#000000,,https://login1.domain.com,https://cdn0.iconfinder.com/data/icons/icocentre-free-icons/147/f-server_128-512.png

I don't know what is the property name that will give a name to the lines automatically.

I am expecting if there is a way to code "# connect: {}" json portion so that the lines can be named.

score 1 · Answer 1 · answered Apr 13 '20 at 08:41

1

Use "fromlabel" or "tolabel" rethar "label" like

# connect: {"from": "user", "to": "name", "invert": true, **"tolabel": "zone"**, \
#          "style": "curved=1;endArrow=blockThin;endFill=1;fontSize=11;"}

answered Apr 13 '20 at 08:41

Noname

11
1

score 1 · Answer 2 · answered Mar 14 '21 at 17:30

To extend on @Noname answer, using "fromlabel", "tolabel" and "label" you can build a column name which whose value will be used for the edge label. Using either "fromlabel" or "tolabel" is usually enough as you will most probably have the label in a dedicated column.

There is a special case I fought with quite a while: what if you have multiple edges between 2 nodes and you want a dedicated label on each edge?

You can put multiple references in your "refs" column separated by commas, however you cannot put multiple comma-separated labels in the column referenced by "fromlabel". If you do so, this would happen:

##
# label: %name%
# style: shape=rectangle;rounded=1;strokeColor=#00f;
# namespace: csvimport-
# connect: {"from":"nodeRef", "to":"nodeId", "fromlabel": "refLabel", \
            "style": "curved=1;fontSize=11;endArrow=blockThin;endFill=1"}
# ignore: nodeRef,refLabel
# layout: auto
# nodespacing: 100
## CSV data starts below this line
nodeId,name,nodeRef, refLabel
1,Status 1,"2,2,2","By context menu,By automated process,By API call"
2,Status 2,"3,3","By context menu,By automated process"
3,Status 3,"1,1","By API call,By manual modification"

This is clearly not the desired outcome.

The solution is to denormalize your data:

1 row per node with 1 connection to another node

very important: use # identity: nodeId (put your 'id' column name instead of nodeId) in the configuration, this will tell DrawIO to update the node rather than create a new one

##
# label: %name%
# style: shape=rectangle;rounded=1;strokeColor=#00f;
# namespace: csvimport-
# identity: nodeId
# connect: {"from":"nodeRef", "to":"nodeId", "fromlabel": "refLabel", "style": "curved=1;fontSize=11;endArrow=blockThin;endFill=1"}
# ignore: nodeRef,refLabel
# layout: auto
# nodespacing: 200
# edgespacing: 100
## CSV data starts below this line
nodeId,name,nodeRef, refLabel
1,Status 1,2,By context menu
1,Status 1,2,By automated process
1,Status 1,2,By API call
2,Status 2,3,By context menu
1,Status 1,3,By automated process
3,Status 3,1,By API call
3,Status 3,1,By manual modification

How to give unique line names for draw.io diagram generated form CSV?

2 Answers2