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    @return
6    Database -> API: Result
7    @return
8    API -> Client: Response
9```

Result:

zenuml
    Client -> API: Request
    API -> Database: Query
    @return
    Database -> API: Result
    @return
    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    @return
 7    Auth -> API: Valid
 8    API -> Database: Save Data
 9    @return
10    Database -> API: Success
11    @return
12    API -> Frontend: 201 Created
13    @return
14    Frontend -> User: Show Success
15```

Result:

zenuml
    User -> Frontend: Click Button
    Frontend -> API: POST /data
    API -> Auth: Validate Token
    @return
    Auth -> API: Valid
    API -> Database: Save Data
    @return
    Database -> API: Success
    @return
    API -> Frontend: 201 Created
    @return
    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
  • A -> B: msg - Async message; A.method() - sync call; replies use return x, x = B.method(), or @return before a message (there is no -->)
  • 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