feat: Implement Export to Draw.io functionality by davydkov · Pull Request #2639 · likec4/likec4

davydkov · 2026-02-20T09:37:18Z

Summary

Enable the "Export to Draw.io" menu item in the app's export dropdown. Clicking it opens app.diagrams.net in a new tab with the current diagram pre-loaded and ready for editing.

The implementation follows the existing virtual module pattern used by other export formats (d2, mmd, puml). Draw.io URLs are pre-computed server-side to avoid shipping compression libraries to the client.

Changes

Add generateDrawioEditUrl() to @likec4/generators to build draw.io editor URLs with compressed diagram data
Create a new vite-plugin virtual module (likec4:drawio) that pre-computes URLs for each view
Enable the "Export to Draw.io" menu item with an async click handler that loads the virtual module and opens draw.io in a new tab

🤖 Generated with Claude Code

Summary by CodeRabbit

New Features
- Export to Draw.io: Users can now export diagrams directly to Draw.io from the app's export menu. The feature pre-loads the current diagram in app.diagrams.net, allowing for immediate editing without additional import steps. This integration streamlines the workflow for users who prefer Draw.io for diagram editing.

Add support for exporting LikeC4 diagrams directly to Draw.io editor. When clicking the "Export to Draw.io" menu item in the app, the diagram is pre-loaded in app.diagrams.net in a new browser tab. The implementation: - Adds `generateDrawioEditUrl(xml)` generator function that builds a draw.io editor URL with compressed diagram data - Creates a new vite-plugin virtual module (`likec4:drawio`) that pre-computes URLs server-side, avoiding client-side compression overhead - Enables the "Export to Draw.io" menu item in the export button with an async click handler Co-Authored-By: Claude Haiku 4.5 <[email protected]>

changeset-bot · 2026-02-20T09:37:27Z

🦋 Changeset detected

Latest commit: 2825ce1

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 19 packages

Name	Type
@likec4/generators	Patch
@likec4/vite-plugin	Patch
likec4	Patch
@likec4/playground	Patch
@likec4/language-services	Patch
@likec4/docs-astro	Patch
likec4-vscode	Patch
@likec4/style-preset	Patch
@likec4/styles	Patch
@likec4/config	Patch
@likec4/core	Patch
@likec4/diagram	Patch
@likec4/language-server	Patch
@likec4/layouts	Patch
@likec4/log	Patch
@likec4/mcp	Patch
@likec4/react	Patch
@likec4/tsconfig	Patch
@likec4/vscode-preview	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Co-Authored-By: Claude Opus 4.6 <[email protected]>

coderabbitai · 2026-02-20T09:39:56Z

Caution

Review failed

The pull request is closed.

📝 Walkthrough

Walkthrough

This pull request adds Draw.io export functionality to the LikeC4 application. It introduces a generateDrawioEditUrl function that creates pre-loaded Draw.io editor URLs from XML, exports it through the generator modules, wires it into the Vite plugin as a virtual module, and connects the UI export menu to open diagrams in Draw.io.

Changes

Cohort / File(s)	Summary
Changeset documentation `.changeset/drawio-export-button.md`	Changelog entry documenting patch version bumps for `@likec4/generators`, `@likec4/vite-plugin`, and likec4, noting the new "Export to Draw.io" feature.
Generator function `packages/generators/src/drawio/generate-drawio.ts`	Adds new `generateDrawioEditUrl(xml: string)` function that compresses DrawIO XML, wraps it in JSON, encodes it in base64, and returns a pre-loaded Draw.io editor URL.
Module exports `packages/generators/src/drawio/index.ts`, `packages/generators/src/index.ts`	Re-exports `generateDrawioEditUrl` from the drawio module and main generators index for public API accessibility.
UI integration `packages/likec4/app/src/components/view-page/Header.tsx`	Adds `handleDrawioExport` callback that dynamically imports drawio helpers, builds the export URL using project and view IDs, opens it in a new tab with error handling; wires the Draw.io menu item to this handler.
Vite plugin type definitions `packages/vite-plugin/src/modules.d.ts`	Declares new virtual module `'likec4:drawio'` exposing `loadDrawioSources(projectId)` that returns an object with `drawioEditUrl(viewId)` function.
Vite plugin setup `packages/vite-plugin/src/plugin.ts`	Registers drawio virtual modules in both `hmrProjectVirtuals` and `virtuals` arrays for Vite plugin initialization.
Virtual module implementation `packages/vite-plugin/src/virtuals/drawio.ts`	Implements `projectDrawioModule` and `drawioModule` that generate TypeScript code mapping each view to its Draw.io edit URL using the LikeC4 model; includes view iteration, error handling for unknown views, and code generation utilities.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

feat(cli,playground,docs,generators): Export LikeC4 views to Draw.io #2622: Directly implements Draw.io export integration with identical modifications to drawio generators, export URL generation, and Vite plugin virtual module wiring.
feat(playground,cli,docs): DrawIO bidirecional e menu no Playground #2592: Introduces DrawIO import/export generators and playground menu integration that this PR builds upon with UI and virtual module connectivity.
Revert "feat(cli,playground,docs,generators): Export LikeC4 views to Draw.io" #2629: Modifies Draw.io generator and parser exports in overlapping code areas that may require coordination.

Poem

🐰 A diagram dreamer's delight, hooray!
Through Draw.io's portal, designs now play,
With URLs pre-loaded and exports so bright,
The virtual modules guide views just right,
LikeC4 diagrams leap to new light! ✨

✨ Finishing Touches

📝 Generate docstrings (stacked PR)
📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch davydkov/drawio-export-button

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

chore(changesets): add changeset for drawio export button

2825ce1

Co-Authored-By: Claude Opus 4.6 <[email protected]>

davydkov merged commit 871f134 into main Feb 20, 2026
14 of 15 checks passed

davydkov deleted the davydkov/drawio-export-button branch February 20, 2026 09:43

likec4-ci bot mentioned this pull request Feb 20, 2026

release: v1.50.0 #2633

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: Implement Export to Draw.io functionality#2639

feat: Implement Export to Draw.io functionality#2639
davydkov merged 2 commits intomainfrom
davydkov/drawio-export-button

davydkov commented Feb 20, 2026 •

edited by coderabbitai bot

Loading

Uh oh!

changeset-bot bot commented Feb 20, 2026 •

edited

Loading

Uh oh!

coderabbitai bot commented Feb 20, 2026 •

edited

Loading

Review failed

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Poem

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

davydkov commented Feb 20, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Summary by CodeRabbit

Uh oh!

changeset-bot bot commented Feb 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

coderabbitai bot commented Feb 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review failed

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Poem

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

davydkov commented Feb 20, 2026 •

edited by coderabbitai bot

Loading

changeset-bot bot commented Feb 20, 2026 •

edited

Loading

coderabbitai bot commented Feb 20, 2026 •

edited

Loading