Draw.io CSV Import Implementation

Purpose

This skill enables correct generation of Draw.io diagrams from CSV (tabular) data. It covers the complete CSV import format: directive lines that configure shape rendering, connection routing, conditional styling, and automatic layout. The CSV import feature converts rows into shapes and column references into connections, labels, and styles.

Critical Rules (Memorize These)

1. ALWAYS place ALL directive lines BEFORE the CSV header row — Directives start with #. Data rows NEVER start with #.
2. ALWAYS include a # label: directive — Without it, shapes render with no visible text.
3. ALWAYS use valid JSON in # connect: directives — The value MUST be a JSON object with "from" and "to" keys as strings. NEVER use bare words or single quotes.
4. ALWAYS wrap column references in % delimiters — Use %columnName% in labels, styles, and connect directives. NEVER use {columnName} or $columnName.
5. ALWAYS include a CSV header row — The first non-directive, non-comment line MUST contain column names that match all %placeholder% references.
6. NEVER put data values in directive lines — Directives define templates; data comes from CSV rows only.
7. ALWAYS use # identity: when connection targets reference a column other than the first — Without it, Draw.io matches against the first column by default.
8. ALWAYS use # ignore: for utility columns — Columns used only for styling, connections, or IDs MUST be listed in ignore to prevent them from appearing as shape metadata.

CSV Format Structure