Draw.io integration

LikeC4 can export views to Draw.io (.drawio) so you can edit diagrams in Draw.io or reuse them in tools that support the format.

CLI: likec4 export drawio — see CLI — Export to DrawIO.

This page describes what is mapped on export, limitations, and multi-diagram behavior.

Export (LikeC4 → Draw.io)

By default, one .drawio file is produced per view (each view becomes one diagram tab in that file). Use the CLI option --all-in-one to combine all views into a single multi-tab .drawio file.

Mapped to Draw.io

LikeC4	Draw.io
View (view id)	Diagram tab name and id; view title/description in root cell as likec4ViewTitle, likec4ViewDescription
Element id	mxCell id (internal); hierarchy via parent
Element title, description	mxCell value (title; description in HTML or in style likec4Description)
Element: technology, notes, tags, navigateTo, icon	Style likec4Technology, likec4Notes, likec4Tags, likec4NavigateTo, likec4Icon (URI-encoded). navigateTo is also written as a Draw.io cell link so the element opens the view tab when clicked (see below).
Element: summary, links	Style likec4Summary, likec4Links (JSON array)
Element: notation	Style likec4Notation
Element: shape	Style shape (rectangle, umlActor, cylinder3, document, etc.)
Element: color	Style fillColor, strokeColor, fontColor (hex); theme/custom name in likec4ColorName; stroke in likec4StrokeColor for round-trip
Element: border, opacity	Style strokeWidth, likec4Border, likec4StrokeWidth (round-trip); opacity
Element: size, padding, textSize, iconPosition	Style likec4Size, likec4Padding, likec4TextSize, likec4IconPosition
View notation	Root cell likec4ViewNotation (round-trip)
Element position/size	mxGeometry x, y, width, height (from layout; overridable via options)
Element/edge custom data	mxUserObject <data key="k">v</data> (round-trip)
Edge waypoints	mxGeometry relative="0" with <Array> of <mxPoint> (when viewmodel has points)
Relationship: source, target, label	mxCell edge source, target, value
Relationship: description, technology, notes, navigateTo	Style likec4Description, likec4Technology, likec4Notes, likec4NavigateTo
Relationship: kind, notation	Style likec4RelationshipKind, likec4Notation
Relationship: links, metadata	Style likec4Links (JSON array), likec4Metadata (JSON object)
Relationship: head/tail, line style, color	Style endArrow, startArrow, dashed/dashPattern, strokeColor; label uses theme relationships.label for font color

Navigability (elements with their own view): If an element has navigateTo set (in the model) to a view id, the exported Draw.io cell gets a link that opens the diagram tab with id likec4-<viewId>. So when you export all views (--all-in-one), clicking that element in the first diagram jumps to the tab of the view that shows the element’s internals. Set navigateTo <viewId> on the element in your LikeC4 model so the viewmodel provides it; the exporter then adds the link automatically.

Export uses the project theme (or LikeC4 default) for element and relationship colors; containers (bounded contexts) are drawn behind their children as a wrapping rectangle; edge connection points are derived from layout so arrows attach on the correct sides of nodes.

The generator accepts optional options for round-trip or tooling: layoutOverride (per-node bbox: { x, y, width, height }, same shape as @likec4/core BBox), strokeColorByNodeId, strokeWidthByNodeId, and compressed. Set compressed: false to write diagram XML uncompressed inside the .drawio file (larger file; use when draw.io desktop or Open file / Import fails to open the default compressed export). The Playground exports uncompressed by default for maximum compatibility; the CLI uses compressed by default and supports --uncompressed.

Not preserved on export

• View rules (include/exclude, style rules) — only the resulting nodes and edges are exported.
• Layout drifts / fine position tweaks — only final node position is written (or the provided layoutOverride).
• Theme color names — stored as hex in Draw.io; likec4ColorName keeps the name for round-trip.

Multi-diagram (multiple tabs)

When exporting, each LikeC4 view is written to a separate .drawio file (one file per view). With --all-in-one, all views are written as tabs in a single file; combined with --roundtrip, layout, stroke colors/widths, and edge waypoints from the round-trip comment blocks in .c4 source are applied per view in that file.

Troubleshooting

The exported .drawio file does not open in draw.io (e.g. “Could not add object Array”, blank diagram, or draw.io desktop / Open file / Import does nothing):

• Playground: Exports are now uncompressed by default so the file opens in draw.io desktop and via Open file / Import. Refresh the app and export again.
• CLI: Use --uncompressed so the diagram XML is written raw (no compression): likec4 export drawio --uncompressed -o ./out. This produces a larger file that opens reliably in draw.io desktop.
• If you still use compressed export, update to the latest release (older versions used an invalid XML structure for edge waypoints): pnpm update @likec4/likec4 or npm update @likec4/likec4, then export again.

The diagram shows fewer elements than expected:

• Each view exports exactly what you see in that view. A top-level view (e.g. view index { include * }) typically shows only top-level elements (e.g. Customer and Our SaaS). Nested elements (e.g. Frontend, Backend inside the system) appear in the element view of that system (e.g. view saas of saas { include * }). To get all elements in Draw.io in one file, use Export all views (CLI: --all-in-one) and open the tab for the nested view, or switch to that view in the Playground before exporting.

Re-export using comment blocks

When you export to Draw.io from the Playground, if the current workspace source contains Draw.io round-trip comment blocks (e.g. // <likec4.layout.drawio> … // </likec4.layout.drawio>), the exporter can apply layout, vertex stroke color/width, and edge waypoints from those comments so the generated .drawio file matches a previously edited diagram. The CLI supports --roundtrip for the same behavior. The generators API exposes parseDrawioRoundtripComments(source), generateDrawio(viewmodel, options), generateDrawioMulti(viewmodels, optionsByViewId), and GenerateDrawioOptions (including edgeWaypoints, layoutOverride, compressed) for custom tooling.