@eventcatalog/core 3.35.0 → 3.36.1

package/dist/docs/development/components/diagram-syntax/02-plantuml.md

@@ -0,0 +1,140 @@
+---
+sidebar_position: 2
+keywords:
+- plantuml
+sidebar_label: PlantUML
+title: Using plantuml
+description: Understanding how to use plantuml with EventCatalog
+---
+
+import AddedIn from '@site/src/components/MDX/AddedIn';
+
+<AddedIn version="2.46.0" />
+
+EventCatalog supports [plantuml](https://plantuml.com/) in all your markdown files.
+
+This let's you create [Class Diagrams](https://plantuml.com/class-diagram), [Sequence Diagrams](https://plantuml.com/sequence-diagram), [Class Diagrams](https://plantuml.com/class-diagram), [State Diagrams](https://plantuml.com/state-diagram) and much more.
+
+## Using plantuml in EventCatalog
+
+To use plantuml you need to use the `plantuml` code block in any markdown file.
+
+#### Example
+
+```markdown
+```plantuml
+@startuml
+!define Table(name,desc) class name as "desc" << (T,#E5E7EB) >>
+!define PK(x) <u>x</u>
+!define FK(x) <i>x</i>
+
+' ===== Core Tables =====
+
+Table(Customers, "Customers") {
+  PK(customerId): UUID
+  firstName: VARCHAR
+  lastName: VARCHAR
+  email: VARCHAR
+  phone: VARCHAR
+  dateRegistered: TIMESTAMP
+}
+
+Table(Orders, "Orders") {
+  PK(orderId): UUID
+  FK(customerId): UUID
+  orderDate: TIMESTAMP
+  status: VARCHAR
+  totalAmount: DECIMAL
+}
+
+Table(Products, "Products") {
+  PK(productId): UUID
+  name: VARCHAR
+  description: TEXT
+  price: DECIMAL
+  stockQuantity: INT
+}
+
+Table(OrderItems, "Order Items") {
+  PK(id): UUID
+  FK(orderId): UUID
+  FK(productId): UUID
+  quantity: INT
+  unitPrice: DECIMAL
+}
+
+Table(Payments, "Payments") {
+  PK(paymentId): UUID
+  FK(orderId): UUID
+  amount: DECIMAL
+  method: VARCHAR
+  status: VARCHAR
+  paidAt: TIMESTAMP
+}
+
+Table(InventoryEvents, "Inventory Events") {
+  PK(eventId): UUID
+  FK(productId): UUID
+  eventType: VARCHAR
+  quantityChange: INT
+  eventTime: TIMESTAMP
+}
+
+Table(Subscription, "Subscriptions") {
+  PK(subscriptionId): UUID
+  FK(customerId): UUID
+  plan: VARCHAR
+  status: VARCHAR
+  startDate: TIMESTAMP
+  endDate: TIMESTAMP
+}
+
+' ===== Relationships =====
+
+Customers ||--o{ Orders : places
+Orders ||--o{ OrderItems : contains
+Products ||--o{ OrderItems : includes
+Orders ||--o{ Payments : paid_by
+Products ||--o{ InventoryEvents : logs
+Customers ||--o{ Subscription : subscribes
+
+@enduml
+```_
+```
+
+This example will output the following in the markdown file.
+
+![Example output of plantuml](../img/plantuml.png)
+
+### How it works?
+
+The PlantUML implementation takes your content and converts it to a PNG image using https://www.plantuml.com/plantuml/svg.
+
+![Example output of plantuml](../img/interactive.png)
+
+## Interactive controls
+
+<AddedIn version="3.5.0" />
+
+All PlantUML diagrams include interactive controls for better viewing and exploration.
+
+### Zoom and pan
+
+Click and drag to pan around the diagram, or use the zoom controls in the bottom-left corner to zoom in and out. Double-click the diagram to zoom in quickly.
+
+### Presentation mode
+
+Click the presentation button in the top-left corner to view the diagram in fullscreen. In presentation mode, mouse wheel zooming is enabled for precise control.
+
+Press `Escape` to exit presentation mode.
+
+### Copy diagram code
+
+Click the copy button in the top-right corner to copy the diagram code to your clipboard. 
+
+Useful for copying diagrams into LLM prompts.
+
+### More resources
+
+- [PlantUML documentation](https://plantuml.com) - Learn more about plantuml and how to use it
+- [Real world examples](https://real-world-plantuml.com/) - Real world examples of plantuml in use

package/dist/docs/development/components/diagram-syntax/03-structurizr.md

@@ -0,0 +1,24 @@
+---
+sidebar_position: 3
+keywords:
+- mermaid
+sidebar_label: Structurizr
+title: Using Structurizr
+description: Understanding how to use Structurizr with EventCatalog
+---
+
+import AddedIn from '@site/src/components/MDX/AddedIn';
+
+<AddedIn version="2.56.4" />
+
+You can embed your [Structurizr diagrams](https://structurizr.com/) into your EventCatalog pages using the [`<MermaidFileLoader />`](/docs/development/components/components/mermaid-file-loader) component.
+
+You will need to export your Structurizr diagrams into mermaid files and then use the [`<MermaidFileLoader />`](/docs/development/components/components/mermaid-file-loader) component to embed them into your EventCatalog pages.
+
+## How to export your Structurizr diagrams into mermaid files
+
+You will need to use the Structurizr CLI to export your diagrams into mermaid files.
+
+1. [Install the Structurizr CLI](https://docs.structurizr.com/cli/installation)
+2. [Export your diagrams into mermaid files](https://docs.structurizr.com/cli/export)
+3. Use the [`<MermaidFileLoader />`](/docs/development/components/components/mermaid-file-loader) component to embed them into your EventCatalog pages.

package/dist/docs/development/components/diagram-syntax/04-icepanel.md

@@ -0,0 +1,75 @@
+---
+sidebar_position: 4
+keywords:
+- icepanel
+- diagrams
+- architecture
+sidebar_label: IcePanel
+title: Using IcePanel
+description: Understanding how to embed IcePanel diagrams in EventCatalog
+---
+
+import AddedIn from '@site/src/components/MDX/AddedIn';
+
+<AddedIn version="3.2.1" />
+
+EventCatalog supports embedding [IcePanel](https://icepanel.io/) diagrams in all your markdown files.
+
+IcePanel is a collaborative diagramming tool designed for visualizing software architecture using the [C4 model](https://c4model.com/). It helps teams create interactive system context, container, and component diagrams that can be shared and explored.
+
+![Example output](/img/ice-panel.png)
+
+## Using IcePanel in EventCatalog
+
+To embed an IcePanel diagram, use the `<IcePanel />` component in any markdown file.
+
+### Getting your IcePanel share URL
+
+1. Open your diagram in IcePanel
+2. Click the **Share** button
+3. Copy the share/embed URL (it should look like `https://s.icepanel.io/...`)
+
+### Basic Example
+
+```markdown
+---
+# your frontmatter
+---
+
+<IcePanel url="https://s.icepanel.io/OpQVdslrqhZkyb/0QfB" />
+```
+
+### Example with title and description
+
+```markdown
+---
+# your frontmatter
+---
+
+<IcePanel
+  url="https://s.icepanel.io/OpQVdslrqhZkyb/0QfB"
+  title="System Architecture"
+  description="Overview of our microservices architecture showing how services communicate."
+  height="800"
+/>
+```
+
+### Full screen mode
+
+Each embedded IcePanel diagram includes a full screen button, allowing your teams to explore the diagram in detail without leaving EventCatalog.
+
+### Props
+
+| Name          | Type     | Default | Required | Description                                                                                                     |
+| ------------- | -------- | ------- | -------- | --------------------------------------------------------------------------------------------------------------- |
+| `url`         | `string` |         | Yes      | The share URL of the IcePanel diagram. To get the URL, click "Share" in IcePanel and copy the embed/share URL. |
+| `title`       | `string` |         | No       | The title to display above the diagram.                                                                         |
+| `description` | `string` |         | No       | A description to display below the title.                                                                       |
+| `height`      | `string` | `600`   | No       | The height of the embedded diagram in pixels.                                                                   |
+| `width`       | `string` | `100%`  | No       | The width of the embedded diagram.                                                                              |
+
+### More resources
+
+- [IcePanel documentation](https://docs.icepanel.io/) - Learn more about IcePanel and how to use it
+- [C4 model](https://c4model.com/) - Learn about the C4 model for visualizing software architecture
+- [IcePanel component reference](/docs/development/components/external-diagram-embeds/icepanel) - Full component documentation

package/dist/docs/development/components/diagram-syntax/_category_.json

@@ -0,0 +1,12 @@
+{
+  "label": "Diagram syntax",
+  "position": 4,
+  "collapsible": true,
+  "collapsed": true,
+  "link": {
+    "type": "generated-index",
+    "slug": "components/diagram-syntax",
+    "title": "Diagram syntax",
+    "description": "Use diagram languages and tools inside EventCatalog documentation."
+  }
+}

package/dist/docs/development/components/external-diagram-embeds/01-miro.md

@@ -0,0 +1,64 @@
+---
+sidebar_position: 2
+keywords:
+- components
+sidebar_label: <Miro />
+title: <Miro />
+description: Embed a Miro board in your documentation
+---
+
+import AddedIn from '@site/src/components/MDX/AddedIn';
+
+<AddedIn version="2.33.4" />
+
+The `<Miro />` component renders a [Miro board](https://miro.com/) in your documentation.
+
+Each Miro board embedded can also be loaded in a full screen mode, letting your teams edit the board live ([view demo](https://demo.eventcatalog.dev/miro?autoplay=true&embedMode=view_only_without_ui&moveToWidget=3074457347671667709&boardId=uXjVIHCImos=/&back=/docs/domains/Orders/0.0.3)).
+
+### Support
+
+The `<Miro />` component is supported in domains, services, all messages and [custom documentation](/docs/development/bring-your-own-documentation/custom-pages/introduction).
+
+### Usage
+
+1. Include the `<Miro />` component inside the markdown
+    - e.g `/events/MyEvent/index.mdx`
+
+**Basic Example**
+
+```md /events/OrderAmended/index.mdx
+---
+#event frontmatter
+---
+
+<Miro boardId="uXjVIHCImos=/" edit={false} />
+```
+**Example with edit enabled and scroll to default widget in Miro**
+
+```md /events/OrderAmended/index.mdx
+---
+#event frontmatter
+---
+
+<Miro boardId="uXjVIHCImos=/" moveToWidget="3074457347671667709" edit={false} />
+```
+
+### Output example in EventCatalog
+
+![Example output](../components/img/miro.png)
+
+- [Example: View demo in a domain page](https://demo.eventcatalog.dev/docs/domains/Orders/0.0.3)
+- [Example: View demo in custom documentation page](https://demo.eventcatalog.dev/docs/custom/guides/event-storming/01-index)
+- [Example: View demo of screen Miro board in EventCatalog](https://demo.eventcatalog.dev/miro?autoplay=true&embedMode=view_only_without_ui&moveToWidget=3074457347671667709&boardId=uXjVIHCImos=/&back=/docs/domains/Orders/0.0.3#undefined-miro-title)
+
+### Props
+| Name                    | Type      | Default           | Required | Description                                                       |
+| ----------------------- | --------- | ----------------- | -------- | ----------------------------------------------------------------- |
+| `boardId`               | `string`  |               | Yes      | The ID of the Miro board to embed. ([miro docs](https://developers.miro.com/docs/miro-live-embed-with-a-direct-link#get-the-board-id))
+| `edit`                  | `boolean` | `false`           | No       | Whether to enable edit mode for the Miro board.                    |
+| `moveToViewport`        | `string`  |        | No       | The ID of the widget to scroll to. ([miro docs](https://developers.miro.com/docs/miro-live-embed-with-a-direct-link#set-the-initial-view-based-on-a-specific-viewport))                                |
+| `moveToWidget`          | `string`  |        | No       | The ID of the widget to scroll to. ([miro docs](https://developers.miro.com/docs/miro-live-embed-with-a-direct-link#set-the-initial-view-based-on-a-specific-board-item))                                |
+| `height`                | `string`  | `500`             | No       | The height of the Miro board.                                        |
+| `title`                 | `string`  |        | No       | The title of the Miro board.                                        |
+| `autoplay`              | `boolean` | `true`            | No       | Whether to skip the preloader of the miro board. ([miro docs](https://developers.miro.com/docs/miro-live-embed-with-a-direct-link#skip-the-preloader-screen))                                  |
+

package/dist/docs/development/components/external-diagram-embeds/02-lucid.md

@@ -0,0 +1,47 @@
+---
+sidebar_position: 2
+keywords:
+- components
+sidebar_label: <Lucid />
+title: <Lucid />
+description: Embed a Lucid diagram in your documentation
+id: lucid
+---
+
+import AddedIn from '@site/src/components/MDX/AddedIn';
+
+<AddedIn version="2.34.4" />
+
+The `<Lucid />` component renders a [Lucid diagram](https://lucid.app/) in your documentation.
+
+### Support
+
+The `<Lucid />` component is supported in domains, services, all messages and [custom documentation](/docs/development/bring-your-own-documentation/custom-pages/introduction).
+
+### Usage
+
+1. Include the `<Lucid />` component inside the markdown
+    - e.g `/events/MyEvent/index.mdx`
+
+**Basic Example**
+
+```md /events/OrderAmended/index.mdx
+---
+#event frontmatter
+---
+
+<Lucid diagramId="e29f42a0-67e2-4f80-b0d7-6922bb7dd9c5" />
+```
+
+### Output example in EventCatalog
+
+![Example output](../components/img/lucid.png)
+
+- [Example: View demo in a domain page](https://demo.eventcatalog.dev/docs/domains/Orders/0.0.3)
+- [Example: View demo in custom documentation page](https://demo.eventcatalog.dev/docs/custom/guides/event-storming/01-index)
+
+### Props
+| Name                    | Type      | Default           | Required | Description                                                       |
+| ----------------------- | --------- | ----------------- | -------- | ----------------------------------------------------------------- |
+| `diagramId`               | `string`  |               | Yes      | The ID of the Lucid diagram to embed. You can find the ID in the URL of the Lucid diagram or by clicking "Share" in Lucid and copying the ID from the URL.
+

package/dist/docs/development/components/external-diagram-embeds/03-drawio.md

@@ -0,0 +1,46 @@
+---
+sidebar_position: 2
+keywords:
+- components
+sidebar_label: <DrawIO />
+title: <DrawIO />
+description: Embed a DrawIO diagram in your documentation
+id: drawio
+---
+
+import AddedIn from '@site/src/components/MDX/AddedIn';
+
+<AddedIn version="2.34.5" />
+
+The `<DrawIO />` component renders a [DrawIO diagram](https://draw.io/) in your documentation.
+
+### Support
+
+The `<DrawIO />` component is supported in domains, services, all messages and [custom documentation](/docs/development/bring-your-own-documentation/custom-pages/introduction).
+
+### Usage
+
+1. Include the `<DrawIO />` component inside the markdown
+    - e.g `/events/MyEvent/index.mdx`
+
+**Basic Example**
+
+```md /events/OrderAmended/index.mdx
+---
+#event frontmatter
+---
+
+<DrawIO url="https://viewer.diagrams.net/?border=0&tags=%7B%7D&lightbox=1&highlight=0000ff&edit=_blank&layers=1&nav=1&title=Untitled%20Diagram.drawio&dark=auto#R%3Cmxfile%3E%3Cdiagram%20id%3D%22yPxyJZ8AM_hMuL3Unpa9%22%20name%3D%22complex%20gitflow%22%3E7V1dm6I2FP41c6kP4ZvL0dHd7bbbbWf7tNubPhmJSheIhTjj7K9vwoeiiRgREGfZi1kJECDvez5yzoHcaeNg8y6Cq%2BUv2EX%2Bnaq4mzvt4U5VgaIq9D%2FW8pq2mEBLGxaR52YH7Roeve8oPzNrXXsuivcOJBj7xFvtN85wGKIZ2WuDUYRf9g%2BbY3%2F%2Fqiu4QFzD4wz6fOufnkuWWStQlN2O98hbLLNL20a2I4D5wVlDvIQufik0aZM7bRxhTNJfwWaMfDZ4%2Bbik502P7N3eWIRCInPC%2Bs8%2Fwk%2BTB%2FP9xFfhR2Puwg9PAyvt5Rn66%2ByB32My9za0bYyDwCPZvZPXfEAI2tDLjZYk8GkDoD9jEuFvaIx9HNGWEIf0yNHc8%2F2DJuh7i5BuzugNI9o%2BekYR8ehQ32c7As912WVGL0uPoMcVnLFrvlBi0TZMj577yQAu6XGInjDihyAbFdYz2hSasiF5h3CASPRKD8n26qo1VI30rIyilKTp9ssOcDsDcVmAWsvaYEaxxbbzHQr0RwbEGaDYHCgcCsilLM02cUSWeIFD6E92raMIr0MXscso%2B3D9iwh5zQQNrglmY7vt4WeMV9lxKx964eApuYcRCt17Jk07NGnL1GPPlfSfciCXEJ1jxR0dreRfciYdpL%2ByE5ONr2xjaOSbD5vizofX4tZnFHl0lBl%2FksajFIjxOpqhklHONQyB0QJl5zrL0cfPD9%2BxR15WH0bu9%2BnDb9YAZHRgYy5DKdVROUoBcJwrWUefsUcfYUdM%2FXQv6a1nJx6Qbntf1XnoVKDdbB09J6wDZRxEG4%2F8VfhdIADdOsT4JGH4E8rZKisCPKvnOCTZicConX7iAw1J%2BkXIh8R73jdctSun%2FL7LtFOu2H%2BGT8j%2FjGOPeJgp%2BCdMCA4Emp%2BwIedtyp4%2BWcIV6z7YLJinMWS2YLaEERnicMCs8D8RmiOKAxv1feVFT3A9ClCJiaL6aWRMtCkq1Vw12BvV5MQaOLy90Vq1NxKQXiT5QuESCGFRQ5xtcLpiVnIv9aRcK07dgi22JJamD3Vn9%2B%2B6RgUoxvXJVWp%2BdjxhG6%2BFjbMN0zmUO5%2FxzBhNYeD5rN8xJaZHO1OVT%2Bgl27mnwxynXIfVyWy9WyYr19I3b7KOmyaRMZvUY7JMtXsma6s83yCmGkUV3DeLqW2C7mGq1uGGXDzvFXkW5Zr5KB4SmlJSUeag1jK1BHmM6lgXqSlozgXQOKADKicc2F0KNRUnftuJYHar4JQtrkNgtQNhVThhNQTCqqtNCaterxd3QXDgBub6hqw%2BsLrlOBm3Y2RX62jl1%2BE6PRgTO7mLGqRW05yhdaCvbXBlM2t2RnLfYljPkhX12mf%2Fl7GCzwT1on5WIkk3uyfqdi%2FqDYq6IyvqoFuifkNT506KuqF3z6qrfAwfDMFQGVBOIRijBiZXPpqTNzG1snk0%2BVCIqgvgVJuC05IIWZ4bC2klC1NdnZqy6tSSDZq0o06tKvmMGpDJLOp2o9XUw56T0ALmHUuCOzVHP%2FocVks5LGnC2WqnCGf2PtuF0zPATc8088o%2Bm1VLod%2B16y6qC6MlWwJldSssat1QCVQnhdEAeueEMc9%2B3rYwtmxOLdlop9Mt%2F83qo50XSrDTPQkGSs3hzkumZT%2BEN%2B1I5zUV2Rr6luZvfWLzwpowp4PuNG%2FBXfSMfApLH%2Fw8Gvy0eBx1DkcH8Dg2FvvMQ%2Bk%2FUOwzjzacDkt0q7I2v%2B9ej1b1oxTlUP50nS%2FtancmZF3fjeqDm1W0iC6pRTo2G8vvu9ciVb0xADqnRWzeG%2Fvpw%2B%2F3A80YDNAGBmwUVWWOIFlHfXa61EE7RNbgkG03OW3z0ZMvS4Zm5m4HKKk2x2wc4lWU1p4%2FRTCcLW8UaKWKvj4DY4Nzwm3eCW8ZZD458ZWyuyizPaZnYaqbVxdcPouYCu62SKiHtPSlKU5MlWsXCjl8LiqFNH2jZoun6bPRf6Lyay7Idjh6hLlSMO5jMLwfBQqlvu2ALBMR2c1OZj6MY29W5v6e9FzOHuSTc4kTbyrlbRe%2B7E4lktO7hp67UCdecOM%2FwmIIejvoq%2BmPsEiEWHrs0xMECtrSqyGvWaf7ahp5%2FjXJHnkxWipf3aPmCf1zkVf51AbXV%2BPfyOAV%2Fhe4uNPuaVtS1t2A%2BW7uXdkaDLPhKNz76pbAMoM2fS%2Bg8BJagEn58WBS%2BY%2BWiWCy2kVJotijr%2Bw59g2Xm8vtb%2B%2B8DydXlGJBcv%2Fq7zcBUOU1i7645xINYEprgI69y6xI1HL2GqBEA1j8TKoDGoBHteBtqT%2Bet2UD3tsy7Ws7xTJfEmhp2pqXEexKB77eFSoHhGUEUgpz%2Fhj%2BbTyHX7%2FE%2Ftj4BKOPQfTPQDap3s6U2ALcF75MzagaCBP0piuNhUOEw9vHQGWhtxWuHECzKgIv6kttLAIqBF7kzqfpjHgFwz0GmP%2Bt2ef0R0zxDzIdzsxDpsa3%2B%2FMsyBQlyxXMI8RSJtTfow%2FluvRviAmKE3SSRCd8wms2KCRJrawiPEMx243n9E%2BAooUXLthjhEkXRJhTG4qSMGkLHZb0UW4qN6PK5Gbq%2B3KyJYrI8hlVYGpbTVWULdM8LkayBq9M7Qvo6XrPQnbyPNwndCPcPMzao3h4lH7b5uQJelKW1W%2BqQ3P%2F03y6zZNSB7aQlFpTpJR4XbiFEmoRMHWuCFHdV8u8ZImprSZp2i%2FNYAg%2Bsmsf%2BOhH7Cx1eeBr4bAVOyCudKmjOZGTp9Af6X3UavpFL0hXM%2F2MLArj3yBOCJlMGsFqI1THE8hKJig7FgmwqwjFKBlSBaYq1l3PknDB1sof16U3oTVBu1rT0Q9qGoEhmLaqouiCfbbC%2FCNG0a9P%2F7LFoVTFZ9Ge9NTJtgjV9eAigkFCkCgD%2BQVH35IRo%2Bh5dH4Ao9wI7%2BjyziOD9JgdgZSEWuwWfS%2F8ll5pSQhbreqe3aE6DZ89NJxhernpCseMVVM4iNczZrbna3%2BwoL2mJpoa7kGQrqg1TfvMhUW4To1aGPNMuHjiidhxqLEPqltzkpg1RS04VSL4li1blqmmEhu6WaBAKSVyIWYEWEZovqdY6kHxUNXU1Guue%2BC%2B4mmdg1oNHKyBY9tswevBdjF4abTOr0eErqcerG5Aw4u%2FEBy1QfHnfA%2Fxsl8SacQ%2B4JRiavGL6B06r9IBJ0FfupwjXMHrFCN%2FfEr%2FViJOfQyqmvIy%2BPUXBHkxYIq9F7tEsmSn%2B2LXrxuvTB9%2BW%2FcWFvEqXfLxCp%2F2FWtFw%2BTq3xpcuKt0TG4hqX5kxR2qDSb35sg0Oe3FltexDd0Q5NWn9ngyHtejP3Ref7S57I4QV5PXHXtFjIBD%2BY2n1XXVPgxPNFfDSDd3S0CnorpbSFub%2FA8%3D%3C%2Fdiagram%3E%3C%2Fmxfile%3E" />
+```
+
+### Output example in EventCatalog
+
+![Example output](../components/img/drawio.png)
+
+- [Example: View demo in custom documentation page](https://demo.eventcatalog.dev/docs/custom/guides/event-storming/01-index)
+
+### Props
+| Name                    | Type      | Default           | Required | Description                                                       |
+| ----------------------- | --------- | ----------------- | -------- | ----------------------------------------------------------------- |
+| `url`               | `string`  |               | Yes      | The URL of the DrawIO diagram to embed. To get the URL, click "File", "embed", then "Notion...", copy the URL to the component.
+

package/dist/docs/development/components/external-diagram-embeds/04-figjam.md

@@ -0,0 +1,44 @@
+---
+sidebar_position: 2
+keywords:
+- components
+sidebar_label: <FigJam />
+title: <FigJam />
+description: Embed a FigJam diagram in your documentation
+id: figjam
+---
+
+import AddedIn from '@site/src/components/MDX/AddedIn';
+
+<AddedIn version="2.34.6" />
+
+The `<FigJam />` component renders a [FigJam diagram](https://www.figma.com/figjam/) in your documentation.
+
+### Support
+
+The `<FigJam />` component is supported in domains, services, all messages and [custom documentation](/docs/development/bring-your-own-documentation/custom-pages/introduction).
+
+### Usage
+
+1. Include the `<FigJam />` component inside the markdown
+    - e.g `/events/MyEvent/index.mdx`
+
+**Basic Example**
+
+```md /events/OrderAmended/index.mdx
+---
+#event frontmatter
+---
+
+<FigJam url="{embed_url_from_figjam}" />
+```
+
+### Output example in EventCatalog
+
+![Example output](../components/img/figjam.png)
+
+### Props
+| Name                    | Type      | Default           | Required | Description                                                       |
+| ----------------------- | --------- | ----------------- | -------- | ----------------------------------------------------------------- |
+| `url`               | `string`  |               | Yes      | The embed URL of the FigJam diagram. To get the URL, click "Shared", "Get embed code", then copy the URL from the iframe.
+

package/dist/docs/development/components/external-diagram-embeds/05-icepanel.md

@@ -0,0 +1,68 @@
+---
+sidebar_position: 5
+keywords:
+- components
+- icepanel
+- diagrams
+sidebar_label: <IcePanel />
+title: <IcePanel />
+description: Embed an IcePanel diagram in your documentation
+id: icepanel
+---
+
+import AddedIn from '@site/src/components/MDX/AddedIn';
+
+<AddedIn version="3.2.1" />
+
+The `<IcePanel />` component renders an [IcePanel diagram](https://icepanel.io/) in your documentation.
+
+Each IcePanel diagram embedded can also be loaded in a full screen mode, letting your teams explore the diagram in detail.
+
+### Support
+
+The `<IcePanel />` component is supported in domains, services, all messages and [custom documentation](/docs/development/bring-your-own-documentation/custom-pages/introduction).
+
+### Usage
+
+1. Get your IcePanel share URL from your IcePanel diagram (click "Share" and copy the embed URL)
+2. Include the `<IcePanel />` component inside the markdown
+    - e.g `/events/MyEvent/index.mdx`
+
+**Basic Example**
+
+```md /events/OrderAmended/index.mdx
+---
+#event frontmatter
+---
+
+<IcePanel url="https://s.icepanel.io/OpQVdslrqhZkyb/0QfB" />
+```
+
+**Example with title and description**
+
+```md /events/OrderAmended/index.mdx
+---
+#event frontmatter
+---
+
+<IcePanel
+  url="https://s.icepanel.io/OpQVdslrqhZkyb/0QfB"
+  title="System Architecture"
+  description="Overview of our microservices architecture and communication patterns."
+  height="800"
+/>
+```
+
+### Output example in EventCatalog
+
+![Example output](/img/ice-panel.png)
+
+### Props
+| Name          | Type     | Default | Required | Description                                                                                                     |
+| ------------- | -------- | ------- | -------- | --------------------------------------------------------------------------------------------------------------- |
+| `url`         | `string` |         | Yes      | The share URL of the IcePanel diagram. To get the URL, click "Share" in IcePanel and copy the embed/share URL. |
+| `title`       | `string` |         | No       | The title to display above the diagram.                                                                         |
+| `description` | `string` |         | No       | A description to display below the title.                                                                       |
+| `height`      | `string` | `600`   | No       | The height of the embedded diagram in pixels.                                                                   |
+| `width`       | `string` | `100%`  | No       | The width of the embedded diagram.                                                                              |
+

package/dist/docs/development/components/external-diagram-embeds/_category_.json

@@ -0,0 +1,12 @@
+{
+  "label": "External diagram embeds",
+  "position": 5,
+  "collapsible": true,
+  "collapsed": true,
+  "link": {
+    "type": "generated-index",
+    "slug": "components/external-diagram-embeds",
+    "title": "External diagram embeds",
+    "description": "Embed external diagramming tools in EventCatalog documentation."
+  }
+}