<MermaidFileLoader />

Added in eventcatalog@2.56.4

The MermaidFileLoader component is a EventCatalog component that will render a Mermaid file into your markdown page.

Support

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

Usage

Simply include the <MermaidFileLoader/> component in your markdown with a file path to your Mermaid file.

Basic Example

Markdown file

---
# event frontmatter
---

The User Registered event is triggered when a new user signs up for our platform.
<MermaidFileLoader file="mermaid.mmd" />

Mermaid file (.mmd or .mermaid)

sequenceDiagram
  participant Customer
  participant OrdersService
  participant InventoryService
  participant NotificationService

  Customer->>OrdersService: Place Order
  OrdersService->>InventoryService: Check Inventory
  InventoryService-->>OrdersService: Inventory Available
  OrdersService->>InventoryService: Reserve Inventory
  OrdersService->>NotificationService: Send Order Confirmation
  NotificationService-->>Customer: Order Confirmation
  OrdersService->>Customer: Order Placed Successfully
  OrdersService->>InventoryService: Update Inventory

Output example in EventCatalog

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

Props

Name	Type	Default	Description
file (required)	string	(empty)	The .mmd or .mermaid file to load into the diagram block. Path is resolved by EventCatalog.