feat(core): add LikeC4 integration for interactive C4 diagrams

[boyney123]

What This PR Does

Adds LikeC4 integration to EventCatalog, enabling users to embed interactive C4 architecture diagrams directly in their documentation. The integration automatically discovers LikeC4 projects and supports multi-project workspaces for isolated diagram namespaces.

Changes Overview

Key Changes

• Add LikeC4View MDX component for embedding C4 diagrams in documentation
• Add likec4-project-registry Vite plugin that auto-discovers LikeC4 projects
• Configure LikeC4 Vite plugin in Astro config
• Add likec4 and @likec4/icons dependencies

How It Works

1. Creating a LikeC4 Diagram

Users create a diagram by adding two files to any diagram folder:

likec4.config.json - Defines the project name (for multi-project isolation):

{
  "name": "my-architecture"
}

architecture.c4 - The LikeC4 DSL file defining the architecture:

specification {
  element service {
    style { shape rectangle, color indigo }
  }
}

model {
  ordersService = service 'Orders Service'
  paymentService = service 'Payment Service'
  ordersService -> paymentService 'processes payments'
}

views {
  view index {
    title 'System Architecture'
    include *
  }
}

2. Embedding in MDX

Use the <LikeC4View> component in any MDX file:

<LikeC4View viewId="index" project="my-architecture" />

3. Auto-Discovery

The likec4-project-registry Vite plugin automatically:

1. Scans for all likec4.config.json files at build time
2. Reads each project's name
3. Generates static imports for each discovered project
4. Provides a registry that the React wrapper uses

This means users never need to manually register projects - just add the config file and it's automatically available.

4. Multi-Project Workspaces

Each project gets its own isolated namespace, so view names like index can be reused across projects without conflicts. The plugin logs discovered projects at startup:

[likec4-registry] Discovered projects: ecommerce, orders, payment

Component Props

Prop	Type	Default	Description
viewId	string	required	The view ID from your .c4 file
project	string	optional	Project name from likec4.config.json
height	string	"600px"	Container height

Breaking Changes

None

Additional Notes

• The integration requires the LikeC4 Vite plugin which compiles .c4 files at build time
• Interactive features like zoom/pan are enabled by default
• Diagrams automatically update when source .c4 files change in dev mode

🤖 Generated with Claude Code

[changeset-bot]

🦋 Changeset detected

Latest commit: c5381b0

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

This PR includes changesets to release 1 package

Name	Type
@eventcatalog/core	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

[davydkov]

Hey @boyney123

Seems to me, verify check failed because likec4 defined as devDependency. Just to validate that - can you try to move it?

[boyney123]

@codex review

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: c5381b0dc2

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Declare likec4 as a runtime dependency

likec4 is imported at runtime in eventcatalog/astro.config.mjs (likec4/vite-plugin), but this commit adds it under devDependencies; consumers installing @eventcatalog/core from npm do not get dev dependencies, so eventcatalog startup/build will fail with module resolution errors before any pages render. Move likec4 (and any directly imported LikeC4 package) into dependencies so published installs can load the config.

Useful? React with 👍 / 👎.

[Machul84126]

Hi @boyney123 , are there still plans to roll out this integration, or has it been shelved?

[Vinceveve]

Global LikeC4 in a single catalog is really great it allows to navigate between components when unfolding a likeC4 diagram.

This allows to generate containers / systems using eventcatalog resources.
View are manual but easy to embed

[LeeGathercole]

Just to give this a bump, would love to integrate my likec4 diagrams into EC