@eventcatalog/core 2.17.3 → 2.18.1

package/dist/analytics/analytics.cjs

@@ -37,7 +37,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "2.17.3";
+var version = "2.18.1";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-75M7LGPG.js";
-import "../chunk-KRBIPA23.js";
+} from "../chunk-ZP7QFMPR.js";
+import "../chunk-T4L2ITVE.js";
 export {
   raiseEvent
 };

package/dist/analytics/log-build.cjs

@@ -106,7 +106,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "2.17.3";
+var version = "2.18.1";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,8 +1,8 @@
 import {
   log_build_default
-} from "../chunk-CXVZEF4D.js";
-import "../chunk-75M7LGPG.js";
-import "../chunk-KRBIPA23.js";
+} from "../chunk-S5LUNNXF.js";
+import "../chunk-ZP7QFMPR.js";
+import "../chunk-T4L2ITVE.js";
 import "../chunk-E7TXTI7G.js";
 export {
   log_build_default as default

package/dist/catalog-to-astro-content-directory.cjs

@@ -130,7 +130,8 @@ var COLLECTION_KEYS = [
   "changelogs",
   "queries",
   "channels",
-  "ubiquitousLanguages"
+  "ubiquitousLanguages",
+  "dependencies"
 ];
 function mapCatalogToAstro({ filePath, astroDir, projectDir }) {
   const relativeFilePath = removeBasePath(filePath, projectDir);

package/dist/catalog-to-astro-content-directory.js

@@ -1,8 +1,8 @@
 import {
   catalogToAstro
-} from "./chunk-55YPRY5U.js";
+} from "./chunk-WF34R5UT.js";
+import "./chunk-7JDTB3U5.js";
 import "./chunk-E7TXTI7G.js";
-import "./chunk-5RNDOKYT.js";
 export {
   catalogToAstro
 };

package/dist/{chunk-5RNDOKYT.js → chunk-7JDTB3U5.js}

@@ -12,7 +12,8 @@ var COLLECTION_KEYS = [
   "changelogs",
   "queries",
   "channels",
-  "ubiquitousLanguages"
+  "ubiquitousLanguages",
+  "dependencies"
 ];
 function mapCatalogToAstro({ filePath, astroDir, projectDir }) {
   const relativeFilePath = removeBasePath(filePath, projectDir);

package/dist/chunk-HKXWXCBU.js

@@ -0,0 +1,50 @@
+import {
+  getEventCatalogConfigFile
+} from "./chunk-E7TXTI7G.js";
+
+// src/resolve-catalog-dependencies.js
+import path from "node:path";
+import fs from "node:fs";
+var resolve_catalog_dependencies_default = async (catalogDir, core) => {
+  const catalogConfig = await getEventCatalogConfigFile(catalogDir);
+  const dependencies = catalogConfig?.dependencies ?? null;
+  if (!dependencies) {
+    return;
+  }
+  const dependenciesDir = path.join(catalogDir, "dependencies");
+  if (fs.existsSync(dependenciesDir)) {
+    fs.rmSync(dependenciesDir, { recursive: true, force: true });
+  }
+  fs.mkdirSync(dependenciesDir, { recursive: true });
+  const resourceTypes = Object.keys(dependencies);
+  for (const resourceType of resourceTypes) {
+    for (const dependency of dependencies[resourceType]) {
+      const resource = {
+        id: dependency.id,
+        version: dependency.version || "1.0.0"
+      };
+      const markdown = `---
+id: ${resource.id}
+name: ${resource.id}
+version: ${resource.version}
+---
+
+:::warning
+
+You are running EventCatalog with dependencies enabled.
+
+This resource is mocked and is a dependency. This means that the resource is managed and owned by another catalog.
+:::
+
+`;
+      const resourceFile = path.join(dependenciesDir, resourceType, resource.id, `index.md`);
+      fs.mkdirSync(path.dirname(resourceFile), { recursive: true });
+      fs.writeFileSync(resourceFile, markdown);
+    }
+  }
+  return;
+};
+
+export {
+  resolve_catalog_dependencies_default
+};

package/dist/{chunk-CXVZEF4D.js → chunk-S5LUNNXF.js}

@@ -1,6 +1,6 @@
 import {
   raiseEvent
-} from "./chunk-75M7LGPG.js";
+} from "./chunk-ZP7QFMPR.js";
 import {
   getEventCatalogConfigFile,
   verifyRequiredFieldsAreInCatalogConfigFile

package/dist/{chunk-NTCYOR4N.js → chunk-SHCMAL37.js}

@@ -1,9 +1,9 @@
+import {
+  mapCatalogToAstro
+} from "./chunk-7JDTB3U5.js";
 import {
   addPropertyToFrontMatter
 } from "./chunk-E7TXTI7G.js";
-import {
-  mapCatalogToAstro
-} from "./chunk-5RNDOKYT.js";
 
 // src/watcher.js
 import watcher from "@parcel/watcher";

package/dist/{chunk-KRBIPA23.js → chunk-T4L2ITVE.js}

@@ -1,5 +1,5 @@
 // package.json
-var version = "2.17.3";
+var version = "2.18.1";
 
 // src/constants.ts
 var VERSION = version;

package/dist/{chunk-55YPRY5U.js → chunk-WF34R5UT.js}

@@ -1,10 +1,10 @@
+import {
+  mapCatalogToAstro
+} from "./chunk-7JDTB3U5.js";
 import {
   addPropertyToFrontMatter,
   verifyRequiredFieldsAreInCatalogConfigFile
 } from "./chunk-E7TXTI7G.js";
-import {
-  mapCatalogToAstro
-} from "./chunk-5RNDOKYT.js";
 
 // src/catalog-to-astro-content-directory.js
 import { glob } from "glob";

package/dist/{chunk-75M7LGPG.js → chunk-ZP7QFMPR.js}

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-KRBIPA23.js";
+} from "./chunk-T4L2ITVE.js";
 
 // src/analytics/analytics.js
 import axios from "axios";

package/dist/constants.cjs

@@ -25,7 +25,7 @@ __export(constants_exports, {
 module.exports = __toCommonJS(constants_exports);
 
 // package.json
-var version = "2.17.3";
+var version = "2.18.1";
 
 // src/constants.ts
 var VERSION = version;

package/dist/constants.js

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-KRBIPA23.js";
+} from "./chunk-T4L2ITVE.js";
 export {
   VERSION
 };

package/dist/eventcatalog.cjs

@@ -29,9 +29,9 @@ var importMetaUrl = /* @__PURE__ */ getImportMetaUrl();
 // src/eventcatalog.ts
 var import_commander = require("commander");
 var import_node_child_process = require("child_process");
-var import_node_path4 = require("path");
+var import_node_path5 = require("path");
 var import_fs2 = __toESM(require("fs"), 1);
-var import_node_path5 = __toESM(require("path"), 1);
+var import_node_path6 = __toESM(require("path"), 1);
 var import_node_url = require("url");
 var import_concurrently = __toESM(require("concurrently"), 1);
 
@@ -161,7 +161,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "2.17.3";
+var version = "2.18.1";
 
 // src/constants.ts
 var VERSION = version;
@@ -227,7 +227,8 @@ var COLLECTION_KEYS = [
   "changelogs",
   "queries",
   "channels",
-  "ubiquitousLanguages"
+  "ubiquitousLanguages",
+  "dependencies"
 ];
 function mapCatalogToAstro({ filePath, astroDir, projectDir }) {
   const relativeFilePath = removeBasePath(filePath, projectDir);
@@ -465,12 +466,55 @@ var catalogToAstro = async (source, astroDir) => {
   await ensureAstroCollectionNotEmpty(astroDir);
 };
 
+// src/resolve-catalog-dependencies.js
+var import_node_path4 = __toESM(require("path"), 1);
+var import_node_fs3 = __toESM(require("fs"), 1);
+var resolve_catalog_dependencies_default = async (catalogDir, core2) => {
+  const catalogConfig = await getEventCatalogConfigFile(catalogDir);
+  const dependencies = catalogConfig?.dependencies ?? null;
+  if (!dependencies) {
+    return;
+  }
+  const dependenciesDir = import_node_path4.default.join(catalogDir, "dependencies");
+  if (import_node_fs3.default.existsSync(dependenciesDir)) {
+    import_node_fs3.default.rmSync(dependenciesDir, { recursive: true, force: true });
+  }
+  import_node_fs3.default.mkdirSync(dependenciesDir, { recursive: true });
+  const resourceTypes = Object.keys(dependencies);
+  for (const resourceType of resourceTypes) {
+    for (const dependency of dependencies[resourceType]) {
+      const resource = {
+        id: dependency.id,
+        version: dependency.version || "1.0.0"
+      };
+      const markdown = `---
+id: ${resource.id}
+name: ${resource.id}
+version: ${resource.version}
+---
+
+:::warning
+
+You are running EventCatalog with dependencies enabled.
+
+This resource is mocked and is a dependency. This means that the resource is managed and owned by another catalog.
+:::
+
+`;
+      const resourceFile = import_node_path4.default.join(dependenciesDir, resourceType, resource.id, `index.md`);
+      import_node_fs3.default.mkdirSync(import_node_path4.default.dirname(resourceFile), { recursive: true });
+      import_node_fs3.default.writeFileSync(resourceFile, markdown);
+    }
+  }
+  return;
+};
+
 // src/eventcatalog.ts
-var currentDir = import_node_path5.default.dirname((0, import_node_url.fileURLToPath)(importMetaUrl));
+var currentDir = import_node_path6.default.dirname((0, import_node_url.fileURLToPath)(importMetaUrl));
 var program = new import_commander.Command().version(VERSION);
-var dir = import_node_path5.default.resolve(process.env.PROJECT_DIR || process.cwd());
-var core = import_node_path5.default.resolve(process.env.CATALOG_DIR || (0, import_node_path4.join)(dir, ".eventcatalog-core"));
-var eventCatalogDir = import_node_path5.default.resolve((0, import_node_path4.join)(currentDir, "../eventcatalog/"));
+var dir = import_node_path6.default.resolve(process.env.PROJECT_DIR || process.cwd());
+var core = import_node_path6.default.resolve(process.env.CATALOG_DIR || (0, import_node_path5.join)(dir, ".eventcatalog-core"));
+var eventCatalogDir = import_node_path6.default.resolve((0, import_node_path5.join)(currentDir, "../eventcatalog/"));
 program.name("eventcatalog").description("Documentation tool for event-driven architectures");
 var ensureDir = (dir2) => {
   if (!import_fs2.default.existsSync(dir2)) {
@@ -502,6 +546,7 @@ program.command("dev").description("Run development server of EventCatalog").opt
   if (options.forceRecreate) clearCore();
   copyCore();
   console.log("EventCatalog is starting at http://localhost:3000/docs");
+  await resolve_catalog_dependencies_default(dir, core);
   await catalogToAstro(dir, core);
   let watchUnsub;
   try {
@@ -528,6 +573,7 @@ program.command("build").description("Run build of EventCatalog").action(async (
   console.log("Building EventCatalog...");
   copyCore();
   await log_build_default(dir);
+  await resolve_catalog_dependencies_default(dir, core);
   await catalogToAstro(dir, core);
   (0, import_node_child_process.execSync)(`cross-env PROJECT_DIR='${dir}' CATALOG_DIR='${core}' npx astro build ${command.args.join(" ").trim()}`, {
     cwd: core,

package/dist/eventcatalog.config.d.cts

@@ -1,6 +1,10 @@
 type SideBarConfig = {
     visible: boolean;
 };
+type ResourceDependency = {
+    id: string;
+    version?: string;
+};
 interface Config {
     title: string;
     tagline: false;
@@ -30,6 +34,15 @@ interface Config {
             users?: SideBarConfig;
         };
     };
+    dependencies?: {
+        commands?: ResourceDependency[];
+        events?: ResourceDependency[];
+        services?: ResourceDependency[];
+        domains?: ResourceDependency[];
+    };
+    mermaid?: {
+        iconPacks?: string[];
+    };
 }
 
 export type { Config };

package/dist/eventcatalog.config.d.ts

@@ -1,6 +1,10 @@
 type SideBarConfig = {
     visible: boolean;
 };
+type ResourceDependency = {
+    id: string;
+    version?: string;
+};
 interface Config {
     title: string;
     tagline: false;
@@ -30,6 +34,15 @@ interface Config {
             users?: SideBarConfig;
         };
     };
+    dependencies?: {
+        commands?: ResourceDependency[];
+        events?: ResourceDependency[];
+        services?: ResourceDependency[];
+        domains?: ResourceDependency[];
+    };
+    mermaid?: {
+        iconPacks?: string[];
+    };
 }
 
 export type { Config };

package/dist/eventcatalog.js

@@ -1,21 +1,24 @@
+import {
+  watch
+} from "./chunk-SHCMAL37.js";
 import {
   log_build_default
-} from "./chunk-CXVZEF4D.js";
-import "./chunk-75M7LGPG.js";
+} from "./chunk-S5LUNNXF.js";
+import "./chunk-ZP7QFMPR.js";
 import {
   catalogToAstro
-} from "./chunk-55YPRY5U.js";
+} from "./chunk-WF34R5UT.js";
 import {
   VERSION
-} from "./chunk-KRBIPA23.js";
+} from "./chunk-T4L2ITVE.js";
 import {
   generate
 } from "./chunk-YEQVKHST.js";
+import "./chunk-7JDTB3U5.js";
 import {
-  watch
-} from "./chunk-NTCYOR4N.js";
+  resolve_catalog_dependencies_default
+} from "./chunk-HKXWXCBU.js";
 import "./chunk-E7TXTI7G.js";
-import "./chunk-5RNDOKYT.js";
 
 // src/eventcatalog.ts
 import { Command } from "commander";
@@ -61,6 +64,7 @@ program.command("dev").description("Run development server of EventCatalog").opt
   if (options.forceRecreate) clearCore();
   copyCore();
   console.log("EventCatalog is starting at http://localhost:3000/docs");
+  await resolve_catalog_dependencies_default(dir, core);
   await catalogToAstro(dir, core);
   let watchUnsub;
   try {
@@ -87,6 +91,7 @@ program.command("build").description("Run build of EventCatalog").action(async (
   console.log("Building EventCatalog...");
   copyCore();
   await log_build_default(dir);
+  await resolve_catalog_dependencies_default(dir, core);
   await catalogToAstro(dir, core);
   execSync(`cross-env PROJECT_DIR='${dir}' CATALOG_DIR='${core}' npx astro build ${command.args.join(" ").trim()}`, {
     cwd: core,

package/dist/map-catalog-to-astro.cjs

@@ -46,7 +46,8 @@ var COLLECTION_KEYS = [
   "changelogs",
   "queries",
   "channels",
-  "ubiquitousLanguages"
+  "ubiquitousLanguages",
+  "dependencies"
 ];
 function mapCatalogToAstro({ filePath, astroDir, projectDir }) {
   const relativeFilePath = removeBasePath(filePath, projectDir);

package/dist/map-catalog-to-astro.js

@@ -1,6 +1,6 @@
 import {
   mapCatalogToAstro
-} from "./chunk-5RNDOKYT.js";
+} from "./chunk-7JDTB3U5.js";
 export {
   mapCatalogToAstro
 };

package/dist/resolve-catalog-dependencies.cjs

@@ -0,0 +1,112 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/resolve-catalog-dependencies.js
+var resolve_catalog_dependencies_exports = {};
+__export(resolve_catalog_dependencies_exports, {
+  default: () => resolve_catalog_dependencies_default
+});
+module.exports = __toCommonJS(resolve_catalog_dependencies_exports);
+
+// src/eventcatalog-config-file-utils.js
+var import_promises = require("fs/promises");
+var import_node_fs = require("fs");
+var import_promises2 = require("fs/promises");
+var import_node_path = __toESM(require("path"), 1);
+var import_uuid = require("uuid");
+var import_url = require("url");
+var import_gray_matter = __toESM(require("gray-matter"), 1);
+async function cleanup(projectDirectory) {
+  const filePath = import_node_path.default.join(projectDirectory, "eventcatalog.config.mjs");
+  if ((0, import_node_fs.existsSync)(filePath)) {
+    await (0, import_promises.rm)(filePath);
+  }
+}
+var getEventCatalogConfigFile = async (projectDirectory) => {
+  try {
+    let configFilePath = import_node_path.default.join(projectDirectory, "eventcatalog.config.js");
+    const filePath = import_node_path.default.join(projectDirectory, "package.json");
+    const packageJson = JSON.parse(await (0, import_promises.readFile)(filePath, "utf-8"));
+    if (packageJson?.type !== "module") {
+      await (0, import_promises2.copyFile)(configFilePath, import_node_path.default.join(projectDirectory, "eventcatalog.config.mjs"));
+      configFilePath = import_node_path.default.join(projectDirectory, "eventcatalog.config.mjs");
+    }
+    const configFileURL = (0, import_url.pathToFileURL)(configFilePath).href;
+    const config = await import(
+      /* @vite-ignore */
+      configFileURL
+    );
+    return config.default;
+  } finally {
+    await cleanup(projectDirectory);
+  }
+};
+
+// src/resolve-catalog-dependencies.js
+var import_node_path2 = __toESM(require("path"), 1);
+var import_node_fs2 = __toESM(require("fs"), 1);
+var resolve_catalog_dependencies_default = async (catalogDir, core) => {
+  const catalogConfig = await getEventCatalogConfigFile(catalogDir);
+  const dependencies = catalogConfig?.dependencies ?? null;
+  if (!dependencies) {
+    return;
+  }
+  const dependenciesDir = import_node_path2.default.join(catalogDir, "dependencies");
+  if (import_node_fs2.default.existsSync(dependenciesDir)) {
+    import_node_fs2.default.rmSync(dependenciesDir, { recursive: true, force: true });
+  }
+  import_node_fs2.default.mkdirSync(dependenciesDir, { recursive: true });
+  const resourceTypes = Object.keys(dependencies);
+  for (const resourceType of resourceTypes) {
+    for (const dependency of dependencies[resourceType]) {
+      const resource = {
+        id: dependency.id,
+        version: dependency.version || "1.0.0"
+      };
+      const markdown = `---
+id: ${resource.id}
+name: ${resource.id}
+version: ${resource.version}
+---
+
+:::warning
+
+You are running EventCatalog with dependencies enabled.
+
+This resource is mocked and is a dependency. This means that the resource is managed and owned by another catalog.
+:::
+
+`;
+      const resourceFile = import_node_path2.default.join(dependenciesDir, resourceType, resource.id, `index.md`);
+      import_node_fs2.default.mkdirSync(import_node_path2.default.dirname(resourceFile), { recursive: true });
+      import_node_fs2.default.writeFileSync(resourceFile, markdown);
+    }
+  }
+  return;
+};

package/dist/resolve-catalog-dependencies.d.cts

@@ -0,0 +1,3 @@
+declare function _default(catalogDir: any, core: any): Promise<void>;
+
+export { _default as default };

package/dist/resolve-catalog-dependencies.d.ts

@@ -0,0 +1,3 @@
+declare function _default(catalogDir: any, core: any): Promise<void>;
+
+export { _default as default };

package/dist/resolve-catalog-dependencies.js

@@ -0,0 +1,7 @@
+import {
+  resolve_catalog_dependencies_default
+} from "./chunk-HKXWXCBU.js";
+import "./chunk-E7TXTI7G.js";
+export {
+  resolve_catalog_dependencies_default as default
+};

package/dist/watcher.cjs

@@ -50,7 +50,8 @@ var COLLECTION_KEYS = [
   "changelogs",
   "queries",
   "channels",
-  "ubiquitousLanguages"
+  "ubiquitousLanguages",
+  "dependencies"
 ];
 function mapCatalogToAstro({ filePath, astroDir, projectDir }) {
   const relativeFilePath = removeBasePath(filePath, projectDir);

package/dist/watcher.js

@@ -1,8 +1,8 @@
 import {
   watch
-} from "./chunk-NTCYOR4N.js";
+} from "./chunk-SHCMAL37.js";
+import "./chunk-7JDTB3U5.js";
 import "./chunk-E7TXTI7G.js";
-import "./chunk-5RNDOKYT.js";
 export {
   watch
 };

package/eventcatalog/package-lock.json

@@ -17,6 +17,7 @@
         "@asyncapi/react-component": "^2.4.3",
         "@headlessui/react": "^2.0.3",
         "@heroicons/react": "^2.1.3",
+        "@iconify-json/logos": "^1.2.4",
         "@stoplight/json-schema-viewer": "^4.7.0",
         "@stoplight/mosaic": "^1.53.2",
         "@tailwindcss/typography": "^0.5.13",
@@ -1359,6 +1360,14 @@
         "react": ">= 16 || ^19.0.0-rc"
       }
     },
+    "node_modules/@iconify-json/logos": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@iconify-json/logos/-/logos-1.2.4.tgz",
+      "integrity": "sha512-XC4If5D/hbaZvUkTV8iaZuGlQCyG6CNOlaAaJaGa13V5QMYwYjgtKk3vPP8wz3wtTVNVEVk3LRx1fOJz+YnSMw==",
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
     "node_modules/@iconify/types": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",

package/eventcatalog/package.json

@@ -26,6 +26,7 @@
     "@asyncapi/react-component": "^2.4.3",
     "@headlessui/react": "^2.0.3",
     "@heroicons/react": "^2.1.3",
+    "@iconify-json/logos": "^1.2.4",
     "@stoplight/json-schema-viewer": "^4.7.0",
     "@stoplight/mosaic": "^1.53.2",
     "@tailwindcss/typography": "^0.5.13",

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/index.astro

@@ -21,6 +21,8 @@ import { pageDataLoader } from '@utils/page-loaders/page-data-loader';
 import { ViewTransitions } from 'astro:transitions';
 import { ArrowsRightLeftIcon } from '@heroicons/react/20/solid';
 
+import config from '@config';
+
 type PageTypesWithFlows = PageTypes | 'flows';
 
 export async function getStaticPaths() {
@@ -229,21 +231,29 @@ const badges = [getBadge(), ...contentBadges, ...getSpecificationBadges()];
   <style is:global>
     .docs-layout .prose {
       max-width: none;
-      /* max-height: 80vh; */
       overflow: auto;
     }
 
     .mermaid svg {
       margin: 1em auto 2em;
     }
+
+    /* Fix for architecture diagrams */
+    .mermaid[data-content*='architecture'] svg {
+      max-width: 350px !important;
+      margin: 0;
+      /* width: 100px !important; */
+    }
   </style>
 
-  <script define:vars={{ props }}>
+  <script define:vars={{ props, config }}>
     // Fix to pass information to componets that are client side only
     // and require catalog information
     window.eventcatalog = {};
     // @ts-ignore
     window.eventcatalog[`${props.collection}-${props.data.id}`] = props.catalog;
+
+    window.eventcatalog.mermaid = config.mermaid;
   </script>
 
   <script>
@@ -260,6 +270,23 @@ const badges = [getBadge(), ...contentBadges, ...getSpecificationBadges()];
      */
     async function renderDiagrams(graphs: any) {
       const { default: mermaid } = await import('mermaid');
+
+      if (window.eventcatalog.mermaid) {
+        const { icons } = await import('@iconify-json/logos');
+        const { iconPacks = [] } = window.eventcatalog.mermaid ?? {};
+
+        if (iconPacks.length > 0) {
+          const iconPacksToRegister = iconPacks.map((name: string) => {
+            return {
+              name,
+              icons,
+            };
+          });
+
+          mermaid.registerIconPacks(iconPacksToRegister);
+        }
+      }
+
       mermaid.initialize({
         // fontSize: 2,
         flowchart: {
@@ -271,6 +298,9 @@ const badges = [getBadge(), ...contentBadges, ...getSpecificationBadges()];
         fontFamily: 'var(--sans-font)',
         // @ts-ignore This works, but TS expects a enum for some reason
         theme: 'light',
+        architecture: {
+          useMaxWidth: true,
+        },
       });
 
       for (const graph of graphs) {

package/package.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/event-catalog/eventcatalog.git"
   },
   "type": "module",
-  "version": "2.17.3",
+  "version": "2.18.1",
   "publishConfig": {
     "access": "public"
   },
@@ -49,6 +49,7 @@
     "@asyncapi/react-component": "^2.4.3",
     "@headlessui/react": "^2.0.3",
     "@heroicons/react": "^2.1.3",
+    "@iconify-json/logos": "^1.2.4",
     "@parcel/watcher": "^2.4.1",
     "@stoplight/json-schema-viewer": "^4.7.0",
     "@stoplight/mosaic": "^1.53.2",