Mermaid ZenUML Diagrams

calendar Dec 13, 2024 · 3 min read · mermaid zenuml sequence uml diagram diagrams  ·
Share on: linkedin copy

ZenUML provides an alternative syntax for sequence diagrams, offering more concise notation. Perfect for complex sequence diagrams with less verbosity.

Use Case

Use ZenUML when you need to:

  • Create concise sequence diagrams
  • Show complex interactions
  • Document API flows
  • Visualize method calls
  • Use alternative sequence syntax

Code

1```mermaid
2zenuml
3    Client -> API: Request
4    API -> Database: Query
5    Database --> API: Result
6    API --> Client: Response
7```

Result:

zenuml
    Client -> API: Request
    API -> Database: Query
    Database --> API: Result
    API --> Client: Response

Examples

Example 1: API Flow

 1```mermaid
 2zenuml
 3    User -> Frontend: Click Button
 4    Frontend -> API: POST /data
 5    API -> Auth: Validate Token
 6    Auth --> API: Valid
 7    API -> Database: Save Data
 8    Database --> API: Success
 9    API --> Frontend: 201 Created
10    Frontend --> User: Show Success
11```

Result:

zenuml
    User -> Frontend: Click Button
    Frontend -> API: POST /data
    API -> Auth: Validate Token
    Auth --> API: Valid
    API -> Database: Save Data
    Database --> API: Success
    API --> Frontend: 201 Created
    Frontend --> User: Show Success

Example 2: Decorators, Groups, and Blocks

 1```mermaid
 2zenuml
 3    title Order Service
 4
 5    @Actor Client #FFEBE6
 6    @Boundary OrderController #0747A6
 7    @EC2 <<BFF>> OrderService #E3FCEF
 8
 9    group BusinessService {
10      @Lambda PurchaseService
11      @AzureFunction InvoiceService
12    }
13
14    @Starter(Client)
15    // POST /orders
16    OrderController.post(payload) {
17      OrderService.create(payload) {
18        order = new Order(payload)
19        if (order != null) {
20          par {
21            PurchaseService.createPO(order)
22            InvoiceService.createInvoice(order)
23          }
24        }
25      }
26    }
27```

Result:

zenuml
    title Order Service

    @Actor Client #FFEBE6
    @Boundary OrderController #0747A6
    @EC2 <<BFF>> OrderService #E3FCEF

    group BusinessService {
      @Lambda PurchaseService
      @AzureFunction InvoiceService
    }

    @Starter(Client)
    // POST /orders
    OrderController.post(payload) {
      OrderService.create(payload) {
        order = new Order(payload)
        if (order != null) {
          par {
            PurchaseService.createPO(order)
            InvoiceService.createInvoice(order)
          }
        }
      }
    }

Notes

  • zenuml - Start ZenUML diagram
  • -> - Synchronous call, --> - Return/response
  • title - Diagram title
  • Decorators like @Actor, @Boundary, @EC2, @Lambda, @AzureFunction declare participants with types and optional colors
  • group Name { ... } - Logical group of related participants
  • @Starter(Participant) - Entry point
  • Blocks ({ ... }), if (...) { ... }, and par { ... } describe control flow, conditions, and parallel execution

Gotchas/Warnings

  • ⚠️ Syntax: ZenUML syntax differs significantly from standard Mermaid sequenceDiagram
  • ⚠️ Support: ZenUML support in Mermaid may be limited or behind a feature flag in some versions
  • ⚠️ Fallback: Use standard sequenceDiagram if zenuml does not render in your environment
  • ⚠️ Versioning: Check current Mermaid / ZenUML docs for any syntax changes

Related Snippets