Using mermaid
EventCatalog supports mermaid (v11.x) in all your markdown files.
This let's you create Class Diagrams, Sequence Diagrams, Entity Relationship Diagrams, Architecture Diagrams and much more.
Using mermaid in EventCatalog​
There are two ways to use mermaid in EventCatalog.
- Using the
mermaid
code block in any markdown file. - Using Mermaid files
.mmd
and.mermaid
files and loading them into your EventCatalog page.- Added in EventCatalog 2.56.4
Using the mermaid
code block in any markdown file.​
To use mermaid you need to use the mermaid
code block in any markdown file.
Example​
```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
```_
This example will output the following in the markdown file.
Loading Mermaid files into your EventCatalog page.​
eventcatalog@2.56.4
You can load Mermaid files using the <MermaidFileLoader />
component, if you prefer to use a file instead of a code block.
Add your .mmd or .mermaid file to your folder (e.g /events/MyEvent/mermaid.mmd
)
---
#event frontmatter
---
<!-- Using the .mmd file extension -->
<MermaidFileLoader file="mermaid.mmd" />
<!-- Using the .mermaid file extension -->
<MermaidFileLoader file="my-second-mermaid-file.mermaid" />
This example will load a mermaid file (.mmd or .mermaid) into your EventCatalog page.
The file must be in the same directory as the markdown file.
Architecture diagrams with mermaid​
eventcatalog@2.18.0
Mermaid 11 introduced the ability to create architecture diagrams.
You can use these diagrams to document your architecture.
Example​
```mermaid
architecture-beta
group api(cloud)[API]
service db(database)[Database] in api
service disk1(disk)[Storage] in api
service disk2(disk)[Storage] in api
service server(server)[Server] in api
db:L -- R:server
disk1:T -- B:server
disk2:T -- B:db
```_
This example will output the following in the markdown file.

Architecture diagrams with icons​
eventcatalog@2.18.0
EventCatalog supports over 200,000 icons from icones.js.org.
To add icon support you need to add the icon pack into your eventcatalog.config.js
file.
// eventcatalog.config.js
mermaid: {
iconPacks: ['logos'] // will load https://icones.js.org/collection/logos into eventcatalog
}
In this example above we import the icon pack logos from icones.js.org, but you can import any icon pack you like from icones.js.org.
To use the icons in your mermaid diagrams you need to prefix the icon name with pack name.
In this example we are using the logos
pack, so we prefix the icon name with logos:
.
```mermaid
architecture-beta
group api(logos:aws-lambda)[API]
service db(logos:aws-aurora)[Database] in api
service disk1(logos:aws-glacier)[Storage] in api
service disk2(logos:aws-s3)[Storage] in api
service server(logos:aws-ec2)[Server] in api
db:L -- R:server
disk1:T -- B:server
disk2:T -- B:db
```_
EventCatalog will then import the icons from the icon pack and render them in the diagram.

Mermaid with ELK (Eclipse Layout Kernel) layout algorithm​
eventcatalog@2.61.2
EventCatalog supports the ELK (Eclipse Layout Kernel) layout algorithm for mermaid diagrams.
To add support for the ELK layout algorithm you need to add the following to your eventcatalog.config.js
file.
// eventcatalog.config.js
mermaid: {
// default value is false
enableSupportForElkLayout: true
}
After you set the value, mermaid will be configured to use the ELK layout algorithm.
More resources​
- Mermaid documentation - Learn more about mermaid and how to use it
- Icon packs - Explore over 200,000 icons from iconify