2 posts tagged with "Component"

Many teams use diagrams to capture their architecture, event modeling, and event storming sessions, often these artifacts are left in Miro, Lucid, or Draw.io and can be difficult to find when you need them.

EventCatalog now supports embedding these diagrams into your documentation, making it easier to collaborate and get more value from your diagrams.

We have introduced new components which can be used in your domains, services, and messages:

• <Miro />
• <Lucid />
• <DrawIO />

We have also introduce a new EventCatalog Miro Plugin which allows you to bring EventCatalog into Miro.

Miro​

The Miro component allows you to embed Miro boards into your documentation. These boards can be embedded into your domains, services, and messages.

View the demo

To get started you can use the new <Miro /> component in your documentation.

---
#event frontmatter
---

## Event storming session
<Miro boardId="uXjVIHCImos=/" />

You can also configure the Miro board to be editable, full screen, and more.

To get started you can read more about the Miro component and how to use it.

Miro Plugin​

We have launched our first version of the EventCatalog Miro plugin. This plugin allows you to bring EventCatalog into Miro, making it easier to collaborate and get more value from your diagrams.

Install the plugin

You can import all your resources into Miro, including services, messages, and more. Then drag these resources into your diagrams.

To get started you can read more about the Miro plugin and how to use it.

Lucid​

The Lucid component allows you to embed Lucid diagrams into your documentation. These diagrams can be embedded into your domains, services, messages and custom documentation pages.

View the demo

To get started you can use the new <Lucid /> component in your documentation.

---
#event frontmatter
---

## Event storming session
<Lucid diagramId="e29f42a0-67e2-4f80-b0d7-6922bb7dd9c5" />

To get started you can read more about the Lucid component and how to use it.

Draw.io (diagrams.net)​

The <DrawIO /> component allows you to embed Draw.io diagrams into your documentation. These diagrams can be embedded into your domains, services, messages and custom documentation pages.

View the demo

To get started you can use the new <Lucid /> component in your documentation.

---
#event frontmatter
---

## Event storming session
<DrawIO url={your_diagram_url} />

To get started you can read more about the Lucid component and how to use it.

Summary​

Miro, Lucid, and Draw.io are all great tools for capturing and sharing diagrams. With our new embedding feature, you can now bring those diagrams directly into your EventCatalog documentation—making it easier to collaborate, share context, and get more value from your visual workflows.

If you have any feedback or suggestions, please open an issue and we will look into it.

Our community has grown to over 1,100 members and continues to expand! If you haven’t already, join us on Discord and be part of the conversation.

Hope you enjoy the new feature!

Many teams turn to Miro to brainstorm, map out, and document their architecture. In the world of event-driven systems, techniques like Event Modeling and Event Storming are especially popular. Now, you can embed your Miro boards directly into your documentation—making it easier to collaborate, share insights with your team, and get more lasting value from your diagrams and workshops.

View the demo

Introducing the new Miro component — now you can seamlessly embed Miro boards into any EventCatalog page, from domains and services to messages and custom documentation. This makes it easier to bring your architecture diagrams, event modeling, and brainstorming sessions into context, keeping everything in one place and driving better alignment across teams.

How does it work?​

EventCatalog supports a range of components you can embed into your documentation.

The <Miro /> component is the latest addition to this list.

To embed a Miro board in your documentation, you can use the following code:

---
#event frontmatter
---

## Event storming session
<Miro boardId="uXjVIHCImos=/" />

Rendered output​

View the demo

The miro component also supports:

• Editing the board live in EventCatalog
• Full screen mode
• Embedding multiple boards
• Loading into a widget on the board

You can read the documentation and props here to get started and start building your own documentation.

Full-Screen Mode for Miro Boards​

Need more space to explore your diagrams? Clicking the full-screen icon on an embedded Miro board will open it in a new tab, giving your team a larger canvas to work with. If you have edit permissions, you can collaborate in real time—perfect for live sessions and ongoing updates.

View the demo

Getting started​

To get started update your EventCatalog to the latest version:

npm install @eventcatalog/core@latest

Then start using the new <Miro /> component in your documentation.

Summary​

Many teams use Miro to capture architecture decisions, event modeling, and event storming sessions. With our new Miro embedding feature, you can now bring those boards directly into your EventCatalog documentation—making it easier to collaborate, share context, and get more value from your visual workflows.

Check out the docs and props to get started and start enhancing your documentation today.

We’d love to hear your thoughts—feel free to open an issue with any feedback or suggestions.

Our community has grown to over 1,100 members and continues to expand! If you haven’t already, join us on Discord and be part of the conversation.

Excited to see what you build with this new feature!