Skip to content
LikeC4
DocsPlayground

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)

Section titled “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.

Export profiles

Section titled “Export profiles”

Export can use two profiles:

Profile Description
default Standard round-trip; layout, stroke, waypoints, and existing style attributes (see Mapped to Draw.io below).
leanix Adds bridge-managed metadata on vertices, edges, and diagram root so diagrams can be used with the LeanIX bridge or LeanIX tooling. LikeC4 remains the source of truth; Draw.io is an interchange format.

When using leanix profile:

  • Vertices and root cell: bridgeManaged=true, likec4Id, likec4Kind, likec4ViewId, and (if provided) likec4ProjectId. Optionally leanixFactSheetType per element kind when leanixFactSheetTypeByKind is set (e.g. via custom generator).
  • Edges: likec4RelationId, bridgeManaged.

CLI: likec4 export drawio --profile leanix -o ./diagrams

Programmatic: Pass profile: 'leanix' (and optionally projectId, leanixFactSheetTypeByKind) in GenerateDrawioOptions when calling generateDrawio / generateDrawioMulti. See @likec4/leanix-bridge for sync and round-trip mapping.

Mapped to Draw.io

Section titled “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, compressed, and profile (default or leanix; when leanix, optionally projectId, leanixFactSheetTypeByKind). 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

Section titled “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)

Section titled “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

Section titled “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

Section titled “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.