feat(cli,playground,docs,generators): Export LikeC4 views to Draw.io#18
feat(cli,playground,docs,generators): Export LikeC4 views to Draw.io#18
Conversation
…filesRef useEffect, exportParams type, formatters typo, titlePart parens, png logger, buildOptionsFromRoundtrip parse-once) Co-authored-by: Cursor <[email protected]>
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
📝 WalkthroughWalkthroughThis PR refines the Draw.io export functionality with robustness improvements and structural adjustments. Changes include enhanced decoding resilience in parsers, refactored option construction logic in generators, state management updates in the Playground component, and minor logging/type clarity fixes across the codebase. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
⚔️ Resolve merge conflicts (beta)
No actionable comments were generated in the recent review. 🎉 🧹 Recent nitpick comments
Comment |
feat(cli,playground,docs,generators): Export LikeC4 views to Draw.io
Summary
This PR adds export of LikeC4 views to Draw.io (
.drawio) format. Users can export from the CLI (likec4 export drawio) and from the Playground (right-click on diagram → DrawIO → Export view / Export all). This allows editing diagrams in Draw.io and reusing them in tools that support the format.This PR does not include import. Import from Draw.io will be proposed in a separate PR after this one is merged.
What's in this PR
1. Generators (
@likec4/generators)packages/generators/src/drawio/generate-drawio.ts— Exports a single view or multiple views to Draw.io XML. Maps LikeC4 elements (title, description, shape, color, relationships, etc.) to mxCell vertices/edges. Supports optionallayoutOverride,strokeColorByNodeId,strokeWidthByNodeId,edgeWaypoints, andcompressed.packages/generators/src/drawio/parse-drawio.ts— Used only for round-trip comment parsing (parseDrawioRoundtripComments): when re-exporting after a future import, layout and waypoints from comment blocks in.c4source can be applied. No import UI or CLI in this PR.packages/generators/src/drawio/index.ts— Public API:generateDrawio,generateDrawioMulti,GenerateDrawioOptions, plusgetAllDiagrams,parseDrawioRoundtripComments,parseDrawioToLikeC4,parseDrawioToLikeC4Multi(for roundtrip and for the future import PR).generate-drawio.spec.ts,parse-drawio.spec.ts; snapshots in__snapshots__/.2. CLI (
@likec4/likec4)packages/likec4/src/cli/export/drawio/handler.ts—likec4 export drawio [path]with options:--outdir, -o,--all-in-one,--roundtrip,--uncompressed,--project,--use-dot.packages/likec4/src/cli/export/index.ts— Registers the drawio export command.3. Playground
Playground exports are uncompressed by default so files open reliably in Draw.io desktop.
4. Documentation
apps/docs/src/content/docs/tooling/drawio.mdx— Export only: mapping (LikeC4 → Draw.io), options, not preserved, multi-diagram, troubleshooting, re-export using comment blocks. No import sections.apps/docs/src/content/docs/tooling/cli.mdx— Export to DrawIO section only; no Import from DrawIO section. Intro mentions Export to DrawIO only.5. Tests
packages/likec4/src/drawio-demo-export-import.spec.ts— Export tests only; import/vice-versa test skipped in this PR.packages/likec4/src/drawio-tutorial-export-import.spec.ts— Export tests only; import and round-trip tests skipped in this PR.e2e/tests/drawio-playground.spec.ts— Asserts DrawIO menu shows Export to DrawIO (and Export all). No Import assertion. Run withplaywright.playground.config.ts(playground on 5174); main e2e config ignores this test.What's not in this PR
likec4 import drawiocommand (nopackages/likec4/src/cli/import/).Post-review fixes (CodeRabbit)
Addresses CodeRabbit AI review (actionable + nitpicks):
Actionable
stripHtmlnow uses shareddecodeXmlEntities()(covers'and all five XML entities). UserObjectidin constructed mxCell tag is escaped withescapeXml(userObjId).collectRoundtripForStateconsolidated to a single pass overidToFqnwhere possible.--all-in-oneand zero views: warn and throwERR_NO_VIEWS_EXPORTED.ensureSingleProject()only called when no--projectis provided, so multi-project workspaces can use--project.languageServicescreated withawait usingso it is disposed on exit (file watchers/RPC cleaned up).startTakeScreenshotmoved inside the per-project loop so timing reported is per-project, not cumulative.Nitpicks / cleanup
extensionContextimport.const _exhaustive: never = node) so new node types require a handler.configureLogtapenow uses explicit generics instead ofany; typo fixgerErrorFromLogRecord→getErrorFromLogRecord.EMPTY_DRAWIO_SNAPSHOT; stablegetSourceContentvia ref to avoid churn on every snapshot.console.warnwhen a view is skipped infillFromModelView.modified?: stringinGenerateDrawioOptionsandwrapInMxFilefor deterministic output (tests/caching).Second batch (CodeRabbit follow-up)
getDecodedStyleanddecodeRootStyleFieldwrapdecodeURIComponentin try/catch so malformed percent-encoding (e.g.%ZZ) does not abort parsing; on error return raw string (or undefined/empty). TernarytitlePartclarified with parentheses:(desc || tech) ? ....sinks/loggersfrom spread (...restConfig) so overrides are not misleading.errorMessge→errorMessageinappendErrorToMessage; removed commented-out line.filesRef.current = filesmoved intouseEffect([files])for concurrent-safety.exportParamsexplicitly typed asExportDrawioParams; single zero-views guard for both all-in-one and per-view modes.createLikeC4Logger('c4:export').buildOptionsFromRoundtrip(viewId, roundtrip, overrides)extracted;buildDrawioExportOptionsForViewsparses source once and distributes options (parse-once optimization for many views).Checklist (contribution guidelines)
mainbefore creating this PR.feat:,docs:).pnpm testandpnpm typecheck(andpnpm test:e2efor e2e); all pass.Notes for reviewers
.drawiofile per view by default;--all-in-onefor all views as tabs;--roundtripapplies layout/waypoints from comment blocks;--uncompressedfor Draw.io desktop compatibility.Review context
The original DrawIO bidirectional work (branch
feat/drawio-bidirectional-playground) was reviewed upstream in likec4/likec4 PR #2593 — Fix DrawIO CLI docs, refactor context menu, correct XML generation. Review was done by @sraphaz at the request of @davydkov. This export-only PR is a split from that work; feedback from that review has been incorporated where applicable (e.g. CLI docs, context menu structure, XML generation). CodeRabbit AI review comments have been addressed in the “Post-review fixes” section above.Summary by CodeRabbit
Release Notes
New Features
Bug Fixes
Documentation