CSV Import

Convert CSV data into draw.io diagrams with custom styling, connections, and automatic layout options.

CSV URL (optional)

Diagram Title (optional)

Configuration

#
# Example CSV import. Use # for comments. Paste CSV below.
# Reserved names: id, tooltip, placeholder(s), link and label
#

# Node label with placeholders and HTML.
# Default is '%name_of_first_column%'.

label: %name%<br><i style="color:gray;">%position%</i><br><a href="mailto:%email%">Email</a>

# Node style (placeholders are replaced once).

style: label;image=%image%;whiteSpace=wrap;html=1;rounded=1;fillColor=%fill%;strokeColor=%stroke%;

# Parent style for nodes with child nodes.

parentstyle: swimlane;whiteSpace=wrap;html=1;childLayout=stackLayout;horizontal=1;horizontalStack=0;resizeParent=1;resizeLast=0;collapsible=1;

# Style for objects not in CSV. Use - to ignore them.

unknownStyle: -

# Optional column name that contains a reference to a named style.

stylename: -

# JSON for named styles: {"name": "style", ...}

styles: -

# JSON for variables in styles: {"name": "value", ...}

vars: -

# Optional column name for named label reference.

labelname: -

# JSON for named labels: {"name": "label", ...}

labels: -

# Column name as identity for cells (updates existing cells).

identity: -

# Column name as parent reference for cells.

parent: -

# Prefix added to cell identity to avoid collisions.

namespace: csvimport-

# Connections between rows.
# "from": source column, "to": target column
# Optional: label, style, invert, placeholders, data

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 position columns

left:
top:

# Node dimensions (number, auto, or @columnName)

width: auto
height: auto

# Collapsed state for vertices

collapsed: false

# Padding for autosize

padding: -12

# Ignored columns for metadata (can be used for connections/styles)

ignore: id,image,fill,stroke,refs,manager

# Column to rename to link attribute

link: url

# Layout spacing

nodespacing: 40
levelspacing: 100
edgespacing: 40

# Layout type: auto, none, verticaltree, horizontaltree,
# verticalflow, horizontalflow, organic, circle, orgchart

layout: auto