Skip to main content

<Design />

Added in eventcatalog@2.56.0

The Design component is a EventCatalog component that will render a EventCatalog Studio diagram into your markdown page.

Support​

The <Design/> component is supported in domains, services, and all messages, changelogs, and custom documentation pages.

Usage​

Simply include the <Design/> component in your markdown with a file path to your EventCatalog Studio diagram.

Basic Example

---
# event frontmatter
---

The User Registered event is triggered when a new user signs up for our platform.

<Design file="event-stream-example" search={false} />

With Custom Title and Height

---
# event frontmatter
---

Here's our payment schema fetched directly from our API gateway:

<Design 
  file="event-stream-example" 
  title="Event Stream Example"
  maxHeight="600"
/>

Output example in EventCatalog​

When you use the <Design /> component, it will render the diagram in your EventCatalog page.

Example output

Props​

NameTypeDefaultDescription
file (required)string(empty)The .ecstudio file to load into the diagram block. Path is resolved by EventCatalog.
title (optional)string"Remote Schema"Title to display above the diagram
maxHeight (optional)string"400"Maximum height of the diagram in pixels
search (optional)booleanfalseShow or hide the search bar in the diagram