Skip to main content

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​

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.

Example output of mermaid

Architecture diagrams with mermaid​

Added in 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.

Example output of mermaid

Architecture diagrams with icons​

Added in 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.

Example output of mermaid

More resources​