CSV Import Issue for Network Diagram

138 views
Skip to first unread message

Jeff Hwang

unread,
Aug 16, 2019, 12:53:23 PM8/16/19
to draw.io
Hi All,

I'm trying to use draw.io with csv imports to help automate the creation of network diagrams.  So far things looks promising when using the vertical flow layout it builds a professional looking network diagram (see attached) as long as the topology is not too complex.  I do have a few issues I am trying to figure out:

  1. I understand we can use labels with option fromlabel and tolabel (which essentially concatenate) and by default it places the label horizontally in the middle of the connecting line.  Due to the way network diagrams as laid out, the labels are impossible to read.  Is there a way to specify the position of the label relative to the line (ie start of the line) as well as alignment of the text (ie right or left justified)?
  2. The other issue is nodes in the same hierarchy connect to each other via the 'top' or 'bottom' of the box.  In my example picture, if BA01 has direct connections to BA02, it will shift BA02 under BA01 and add the lines via the top and bottom of the boxes.  Is there a way to keep the same layout but connect BA01 and BA02 via the sides of the boxes?  Would this require a different layout?
Thanks!
example.png
drawio.txt
Message has been deleted

Rafael de França

unread,
Sep 20, 2019, 6:15:36 PM9/20/19
to draw.io
Hi all,

First of all, thank you for this amazing tool!

I face a similar problem when I try to build a diagram for a software development project managed with Scrum methodology.

What I need to do is to connect "father" boxes to its "son" boxes with arrows from their sides, not from the top of a "father" box to the top of a "son box.
Additionally, I need those "son" boxes to be right below their respective "father" boxes.

Could I do this any way I could do this using a CSV file and code? I'm attaching what I get and what I would like to get from the code. The code I'm using is just below.

Thank you.

##
## 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%
# namespace: csvimport-
#
## Node style (placeholders are replaced once).
## Default is the current style for nodes.
#
# stylename: tipo
# styles: {"raw": "shape=parallelogram;fillColor=#f5f5f5;strokeColor=#666666;perimeter=parallelogramPerimeter;", \
#          "well": "shape=cylinder;fillColor=#f5f5f5;strokeColor=#666666;", \
#          "foundry": "shape=trapezoid;fillColor=#dae8fc;strokeColor=#6c8ebf;perimeter=trapezoidPerimeter;", \
#          "manufacturer":"shape=hexagon;fillColor=#d5e8d4;strokeColor=#82b366;perimeter=hexagonPerimeter;", \
#
#
#
## Uses the given column name as the parent reference for cells. Default is no parent (empty or -).
## The identity above is used for resolving the reference so it must be specified.
#
## parent: name
#
#
## Node style (placeholders are replaced once).
## Default is the current style for nodes.
#
## style: rounded=1;fillColor=#fff2cc;strokeColor=#d6b656;fontStyle=1;fontFamily=Tahoma;fontSize=30;labelBorderColor=none;y=603.5;x=454;
#
## 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": "module", "to": "id", "invert": true, \
#          "style": "edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;fontSize=14;exitPerimeter=0"}
#
## 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: 15
#
## Comma-separated list of ignored columns for metadata. (These can be
## used for connections and styles but will not be added as metadata.)
#
# ignore:
#
## 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: verticalflow
#
## ---- CSV below this line. First line are column names. ----
id,name,module
0,Over,
1,Base de Investimento,0
2,Carga ,0
3,Saida Gross-up,0
4,Reports ,0
5,Automatizacao Insumos,0
6,Calculadora Variaveis Investimento,1
7,Saida Carga,1
8,Saida,1
9,Carrego ano variaveis,2
10,Adaptação ,2
11,Patrimonilo Investimento nivel 1 e 2,2
12,Lucro Investimento 1 e 2 nivel,2
13,Ajuste investimento 1 e 2 nivel,2
14,Gross-UP Investimento 1 e 2 nivel,2
15,Reclassificação VC APP,2
16,Gross-up,3
17,HEDGE LOCAL,2
18,HEDGE TRIBUTÁRIO,2
19,HEDGE DO INVESTIMENTO,2
20, Reclassificação p/ PL - CTA,2
21,Reclassificação p/ PL - Gross - UP,2
22,RECLASSIFICAÇÃO P/ PL - HEDGE CONTÁBIL,2
23,Provisão de Dividendos,2
24,CRÉDITO TRIBUTÁRIO DE PDD,2
25,revo,2
26,IOF,2
27,Custo ,2


What I get.PNG
what it should look like 2.jpg
Reply all
Reply to author
Forward
0 new messages