feat(cli): export view descriptions in screenshots by ckeller42 · Pull Request #2951 · likec4/likec4

ckeller42 · 2026-05-12T13:53:28Z

Summary

Add --description to PNG/JPEG exports.
Render the view title and Markdown description above the diagram.
Keep description, notation, and diagram areas non-overlapping.

Examples

Small description from examples/overflow-test:

Full Markdown description from examples/multi-project/boutique:

Checks

Focused Vitest suites
Focused typechecks
SPA and CLI package builds
Smoke JPEG exports with --description --notation

Checklist

I've thoroughly read the latest contribution guidelines.
I've rebased my branch onto main before creating this PR. Stacked on cgk/export-legend by design.
I've added tests to cover my changes (if applicable).
I've verified pnpm typecheck and pnpm test.
I've added changesets.
My change requires documentation updates.
I've updated the documentation accordingly.

changeset-bot · 2026-05-12T13:53:37Z

🦋 Changeset detected

Latest commit: c14de6e

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

This PR includes changesets to release 22 packages

Name	Type
likec4	Patch
@likec4/docs-astro	Patch
likec4-vscode	Patch
@likec4/playground	Patch
@likec4/style-preset	Patch
@likec4/styles	Patch
@likec4/config	Patch
@likec4/core	Patch
@likec4/diagram	Patch
@likec4/generators	Patch
@likec4/language-server	Patch
@likec4/language-services	Patch
@likec4/layouts	Patch
@likec4/leanix-bridge	Patch
@likec4/spa	Patch
@likec4/log	Patch
@likec4/lsp	Patch
@likec4/mcp	Patch
@likec4/react	Patch
@likec4/tsconfig	Patch
@likec4/vite-plugin	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

ckeller42 · 2026-05-12T14:22:50Z

@coderabbitai review

coderabbitai · 2026-05-12T14:22:58Z

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

coderabbitai · 2026-05-12T14:25:58Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 32af8bbb-ae1b-4ec5-a9ea-96bee5edbe3c

📥 Commits

Reviewing files that changed from the base of the PR and between 586db76 and c14de6e.

📒 Files selected for processing (13)

.changeset/export-image-description.md
apps/docs/src/content/docs/tooling/cli.mdx
packages/likec4-spa/src/pages/ExportPage.tsx
packages/likec4-spa/src/pages/export-layout.spec.ts
packages/likec4-spa/src/pages/export-layout.ts
packages/likec4-spa/src/pages/export-page-params.spec.ts
packages/likec4-spa/src/pages/export-page-params.ts
packages/likec4-spa/src/routes/_single/export.$viewId.tsx
packages/likec4-spa/src/routes/project.$projectId/export.$viewId.tsx
packages/likec4/src/cli/export/jpg/handler.ts
packages/likec4/src/cli/export/png/handler.ts
packages/likec4/src/cli/export/png/takeScreenshot.spec.ts
packages/likec4/src/cli/export/png/takeScreenshot.ts

✅ Files skipped from review due to trivial changes (3)

.changeset/export-image-description.md
apps/docs/src/content/docs/tooling/cli.mdx
packages/likec4-spa/src/pages/export-page-params.spec.ts

🚧 Files skipped from review as they are similar to previous changes (8)

packages/likec4-spa/src/pages/export-page-params.ts
packages/likec4/src/cli/export/png/takeScreenshot.spec.ts
packages/likec4/src/cli/export/png/takeScreenshot.ts
packages/likec4/src/cli/export/jpg/handler.ts
packages/likec4-spa/src/pages/ExportPage.tsx
packages/likec4/src/cli/export/png/handler.ts
packages/likec4-spa/src/pages/export-layout.ts
packages/likec4-spa/src/pages/export-layout.spec.ts

📝 Walkthrough

Walkthrough

Adds a --description option to PNG/JPEG exports that propagates through CLI commands and URL generation, validates route search params, computes and reserves a description banner in export layout, renders a description panel in the export page, updates tests, and documents the feature.

Changes

Export image description feature

Layer / File(s)	Summary
Export layout types and calculation `packages/likec4-spa/src/pages/export-layout.ts`, `packages/likec4-spa/src/pages/export-layout.spec.ts`	New description layout constants and `ExportDescriptionContent` type; `ExportPageLayout.diagram` gains `left/top`; `exportDescriptionHeight` estimates and clamps height; `computeExportPageLayout` accepts optional description, shifts diagram/notation positioning, and tests cover sizing, capping, and interactions.
Query parameter handling and route validation `packages/likec4-spa/src/pages/export-page-params.ts`, `packages/likec4-spa/src/pages/export-page-params.spec.ts`, `packages/likec4-spa/src/routes/_single/export.$viewId.tsx`, `packages/likec4-spa/src/routes/project.$projectId/export.$viewId.tsx`	Added `isExportSearchFlagEnabled` helper and tests; both export routes accept `description: z.boolean().optional().catch(false)` and include `description: false` in `stripSearchParams`.
Export page description panel rendering `packages/likec4-spa/src/pages/ExportPage.tsx`	Read `description` search flag, derive `RichText` from `diagram.description`, compute `showDescription`, pass description to `computeExportPageLayout`, use computed diagram bounds for container sizing, and conditionally render `ExportDescriptionPanel` with Markdown.
CLI screenshot URL generation with description parameter `packages/likec4/src/cli/export/png/takeScreenshot.ts`, `packages/likec4/src/cli/export/png/takeScreenshot.spec.ts`	`createExportViewUrl` gains optional `description` (default false) and appends `description=true` when set; `takeScreenshot` and `TakeScreenshotParams` forward description; tests assert inclusion/omission and preservation with other params.
CLI command option definition and handler wiring `packages/likec4/src/cli/export/png/handler.ts`, `packages/likec4/src/cli/export/jpg/handler.ts`	`PngExportArgs` adds `description?: boolean`; `exportViewsToPNG`/`runExportPng` accept and forward `description` (default false); `pngCmd` and `jpgCmd` register `--description` boolean flags and handlers pass `args.description`.
Documentation and changelog `.changeset/export-image-description.md`, `apps/docs/src/content/docs/tooling/cli.mdx`	Changeset announcing the `--description` option added; CLI docs updated to list `--description` in the Export to PNG/JPEG options table.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Suggested reviewers

davydkov

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main feature: adding a --description flag to export view descriptions in PNG/JPEG screenshots.
Description check	✅ Passed	The PR description is comprehensive with summary, examples, checks performed, and a completed checklist covering all key guidelines.
Docstring Coverage	✅ Passed	Docstring coverage is 90.48% which is sufficient. The required threshold is 80.00%.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch cgk/export-description

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

Generate code and open pull requests
Plan features and break down work
Investigate incidents and troubleshoot customer tickets together
Automate recurring tasks and respond to alerts with triggers
Summarize progress and report instantly

Built for teams:

Shared memory across your entire org—no repeating context
Per-thread sandboxes to safely plan and execute work
Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started

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.}

ckeller42 · 2026-05-12T16:03:21Z

@coderabbitai review

coderabbitai · 2026-05-12T16:03:27Z

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

ckeller42 · 2026-05-12T16:17:56Z

@coderabbitai review

coderabbitai · 2026-05-12T16:18:03Z

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

ckeller42 · 2026-05-12T16:58:31Z

@coderabbitai review

coderabbitai · 2026-05-12T16:58:38Z

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

ckeller42 · 2026-05-12T17:35:54Z

@coderabbitai review

coderabbitai · 2026-05-12T17:36:00Z

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

davydkov

Thank you!

* feat(cli): export view notation in screenshots * feat(cli): export view descriptions in screenshots (#2951)

ckeller42 force-pushed the cgk/export-description branch from 316dfc2 to 8364645 Compare May 12, 2026 14:14

ckeller42 force-pushed the cgk/export-description branch from 8364645 to 97b7e01 Compare May 12, 2026 15:57

ckeller42 force-pushed the cgk/export-description branch from 97b7e01 to 586db76 Compare May 12, 2026 16:58

feat(cli): export view descriptions in screenshots

c14de6e

ckeller42 force-pushed the cgk/export-description branch from 586db76 to c14de6e Compare May 12, 2026 17:35

davydkov approved these changes May 16, 2026

View reviewed changes

davydkov merged commit 63b62ba into cgk/export-legend May 16, 2026
16 checks passed

davydkov deleted the cgk/export-description branch May 16, 2026 11:14

davydkov pushed a commit that referenced this pull request May 16, 2026

feat(cli): export view notation in screenshots (#2950)

dcbf674

* feat(cli): export view notation in screenshots * feat(cli): export view descriptions in screenshots (#2951)

coderabbitai Bot mentioned this pull request May 16, 2026

feat(cli): export view notation in screenshots #2950

Merged

Uh oh!

Conversation

ckeller42 commented May 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Examples

Checks

Checklist

Uh oh!

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

Uh oh!

🦋 Changeset detected

Uh oh!

ckeller42 commented May 12, 2026

Uh oh!

coderabbitai Bot commented May 12, 2026

Uh oh!

coderabbitai Bot commented May 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Suggested reviewers

Uh oh!

ckeller42 commented May 12, 2026

Uh oh!

coderabbitai Bot commented May 12, 2026

Uh oh!

ckeller42 commented May 12, 2026

Uh oh!

coderabbitai Bot commented May 12, 2026

Uh oh!

ckeller42 commented May 12, 2026

Uh oh!

coderabbitai Bot commented May 12, 2026

Uh oh!

ckeller42 commented May 12, 2026

Uh oh!

coderabbitai Bot commented May 12, 2026

Uh oh!

davydkov left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

ckeller42 commented May 12, 2026 •

edited

Loading

changeset-bot Bot commented May 12, 2026 •

edited

Loading

coderabbitai Bot commented May 12, 2026 •

edited

Loading