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

.changeset/fluffy-eagles-dance.md

@@ -0,0 +1,5 @@
+---
+"@eventcatalog/core": patch
+---
+
+Add LikeC4 integration for interactive C4 architecture diagrams in EventCatalog

eventcatalog/astro.config.mjs

@@ -14,6 +14,8 @@ import node from '@astrojs/node';
 import remarkComment from 'remark-comment'
 import rehypeSlug from 'rehype-slug';
 import rehypeAutolinkHeadings from 'rehype-autolink-headings';
+import { LikeC4VitePlugin } from 'likec4/vite-plugin'
+import { likeC4ProjectRegistry } from './src/plugins/likec4-project-registry'
 
 import rehypeExpressiveCode from 'rehype-expressive-code'
 
@@ -124,6 +126,12 @@ export default defineConfig({
     },
     ssr: {
       external: ['eventcatalog.auth.js', 'eventcatalog.chat.js'],
-    }
+    },
+    plugins: [
+      LikeC4VitePlugin({
+        workspace: projectDirectory,
+      }),
+      likeC4ProjectRegistry(projectDirectory),
+    ],
   }
 });

eventcatalog/src/components/MDX/LikeC4View/LikeC4View.astro

@@ -0,0 +1,13 @@
+---
+import LikeC4ViewWrapper from './LikeC4ViewWrapper';
+
+interface Props {
+  viewId: string;
+  project?: string;
+  height?: string;
+}
+
+const { viewId, project, height } = Astro.props;
+---
+
+<LikeC4ViewWrapper viewId={viewId} project={project} height={height} client:only="react" />

eventcatalog/src/components/MDX/LikeC4View/LikeC4ViewWrapper.tsx

@@ -0,0 +1,53 @@
+import React, { Suspense, lazy, useMemo, type ComponentType } from 'react';
+import { getProjectLoader } from 'virtual:likec4-projects';
+
+interface LikeC4ViewWrapperProps {
+  viewId: string;
+  project?: string;
+  height?: string;
+}
+
+interface LikeC4ViewProps {
+  viewId: string;
+  controls?: boolean;
+  browser?: {
+    enableFocusMode?: boolean;
+    enableSearch?: boolean;
+  };
+}
+
+// Cache for lazy components to avoid recreating them
+const lazyComponentCache = new Map<string, ComponentType<LikeC4ViewProps>>();
+
+function getLazyComponent(project: string): ComponentType<LikeC4ViewProps> {
+  const key = project || 'default';
+
+  if (!lazyComponentCache.has(key)) {
+    const loader = getProjectLoader(key);
+    const LazyComponent = lazy(() => loader().then((mod: any) => ({ default: mod.LikeC4View })));
+    lazyComponentCache.set(key, LazyComponent);
+  }
+
+  return lazyComponentCache.get(key)!;
+}
+
+export default function LikeC4ViewWrapper({ viewId, project, height = '600px' }: LikeC4ViewWrapperProps) {
+  const LikeC4ViewComponent = useMemo(() => getLazyComponent(project || 'default'), [project]);
+
+  return (
+    <div style={{ height, maxHeight: height }} className="w-full overflow-hidden rounded-lg border border-gray-200">
+      <Suspense
+        fallback={<div className="h-full flex items-center justify-center bg-gray-100 rounded-lg">Loading diagram...</div>}
+      >
+        <LikeC4ViewComponent
+          viewId={viewId as any}
+          controls={false}
+          browser={{
+            enableFocusMode: false,
+            enableSearch: false,
+          }}
+        />
+      </Suspense>
+    </div>
+  );
+}

eventcatalog/src/components/MDX/components.tsx

@@ -29,6 +29,7 @@ import FigJam from '@components/MDX/FigJam/FigJam.astro';
 import IcePanel from '@components/MDX/IcePanel/IcePanel.astro';
 import Design from '@components/MDX/Design/Design.astro';
 import MermaidFileLoader from '@components/MDX/MermaidFileLoader/MermaidFileLoader.astro';
+import LikeC4View from '@components/MDX/LikeC4View/LikeC4View.astro';
 //  Portals: required for server/client components
 import NodeGraphPortal from '@components/MDX/NodeGraph/NodeGraphPortal';
 import SchemaViewerPortal from '@components/MDX/SchemaViewer/SchemaViewerPortal';
@@ -70,6 +71,7 @@ const components = (props: any) => {
     FigJam: (mdxProp: any) => jsx(FigJam, { ...props, ...mdxProp }),
     IcePanel: (mdxProp: any) => jsx(IcePanel, { ...props, ...mdxProp }),
     MermaidFileLoader: (mdxProp: any) => jsx(MermaidFileLoader, { ...props, ...mdxProp }),
+    LikeC4View: (mdxProp: any) => jsx(LikeC4View, { ...props, ...mdxProp }),
   };
 };
 

eventcatalog/src/env.d.ts

@@ -1,8 +1,16 @@
 /// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />
+/// <reference types="likec4/vite-plugin-modules" />
 
 declare const __EC_TRAILING_SLASH__: boolean;
 
+// Virtual module generated by likec4-project-registry plugin
+declare module 'virtual:likec4-projects' {
+  export const projectRegistry: Record<string, () => Promise<{ LikeC4View: React.ComponentType<any> }>>;
+  export const discoveredProjects: string[];
+  export function getProjectLoader(projectName: string): () => Promise<{ LikeC4View: React.ComponentType<any> }>;
+}
+
 interface EventCatalogConfig {
   mermaid?: {
     iconPacks?: string[];

eventcatalog/src/plugins/likec4-project-registry.ts

@@ -0,0 +1,91 @@
+import type { Plugin } from 'vite';
+import { glob } from 'glob';
+import { readFileSync } from 'node:fs';
+import { join, dirname } from 'node:path';
+
+interface LikeC4Config {
+  name: string;
+}
+
+/**
+ * Vite plugin that auto-discovers LikeC4 projects and generates a registry
+ * Scans for likec4.config.json files and creates static imports for each project
+ */
+export function likeC4ProjectRegistry(workspaceDir: string): Plugin {
+  const virtualModuleId = 'virtual:likec4-projects';
+  const resolvedVirtualModuleId = '\0' + virtualModuleId;
+
+  let discoveredProjects: string[] = [];
+
+  return {
+    name: 'likec4-project-registry',
+
+    async buildStart() {
+      // Find all likec4.config.json files
+      const configFiles = await glob('**/likec4.config.json', {
+        cwd: workspaceDir,
+        ignore: ['**/node_modules/**'],
+        absolute: true,
+      });
+
+      discoveredProjects = [];
+
+      for (const configPath of configFiles) {
+        try {
+          const content = readFileSync(configPath, 'utf-8');
+          const config: LikeC4Config = JSON.parse(content);
+          if (config.name) {
+            discoveredProjects.push(config.name);
+          }
+        } catch (e) {
+          console.warn(`[likec4-registry] Failed to parse ${configPath}:`, e);
+        }
+      }
+
+      if (discoveredProjects.length > 0) {
+        console.log(`[likec4-registry] Discovered projects: ${discoveredProjects.join(', ')}`);
+      }
+    },
+
+    resolveId(id) {
+      if (id === virtualModuleId) {
+        return resolvedVirtualModuleId;
+      }
+    },
+
+    load(id) {
+      if (id === resolvedVirtualModuleId) {
+        // Generate the registry module with static imports
+        const imports = discoveredProjects.map((name, i) => `import * as project_${i} from 'likec4:react/${name}';`).join('\n');
+
+        const registryEntries = discoveredProjects
+          .map((name, i) => `  '${name}': () => Promise.resolve(project_${i}),`)
+          .join('\n');
+
+        return `
+// Auto-generated LikeC4 project registry
+// Discovered ${discoveredProjects.length} project(s)
+
+${imports}
+import * as defaultProject from 'likec4:react';
+
+export const projectRegistry = {
+  'default': () => Promise.resolve(defaultProject),
+${registryEntries}
+};
+
+export const discoveredProjects = ${JSON.stringify(discoveredProjects)};
+
+export function getProjectLoader(projectName) {
+  return projectRegistry[projectName] || projectRegistry['default'];
+}
+`;
+      }
+    },
+
+    // Watch for changes to likec4.config.json files
+    configureServer(server) {
+      server.watcher.add(join(workspaceDir, '**/likec4.config.json'));
+    },
+  };
+}

package.json

@@ -138,6 +138,7 @@
   "devDependencies": {
     "@astrojs/check": "^0.9.6",
     "@changesets/cli": "^2.27.5",
+    "@likec4/icons": "^1.46.4",
     "@playwright/test": "^1.48.1",
     "@types/dagre": "^0.7.52",
     "@types/diff": "^5.2.2",
@@ -155,6 +156,7 @@
     "@types/shelljs": "^0.8.15",
     "@types/update-notifier": "^6.0.8",
     "@types/uuid": "^10.0.0",
+    "likec4": "^1.48.0",
     "prettier": "^3.3.3",
     "prettier-plugin-astro": "^0.14.1",
     "tsup": "^8.1.0",