We assume you have already tried out the editing experience via our online editor. If you have not, we strongly suggest you try it out first.

You are viewing a demo page. To edit the diagrams on this page, you have to click the edit button on the top left corner.

Sequence Diagram

The following diagram shows some basic features of ZenUML Sequence Diagram. If you are looking for a full syntax specification go to https://zenuml.atlassian.net/wiki/spaces/Doc/pages/518848513/Sequence+diagram+syntax.

@Lambda OrderController
<<BFF>> OrderService
group BusinessService {
  PurchaseService
  InvoiceService
}
//`POST /orders`
OrderController.create(payload1234) {
  OrderService.create(payload) {
    order = new Order(payload)
    par {
      PurchaseService.createPO(order)
      InvoiceService.createInvoice(order)      
    }
  }
}

Generic Diagrams

You can also use the “ZenUML Graph” component to draw any generic diagrams. This is done throw an integration with the opensource drawio project.

Mermaid

The following diagrams show some features of the mermaid component. The document of mermaid can be found here.

Flow chart

@Lambda OrderController
<<BFF>> OrderService
group BusinessService {
  PurchaseService
  InvoiceService
}
//`POST /orders`
OrderController.create(payload) {
  OrderService.create(payload) {
    order = new Order(payload)
    par {
      PurchaseService.createPO(order)
      InvoiceService.createInvoice(order)      
    }
  }
}

Class diagram

@Lambda OrderController
<<BFF>> OrderService
group BusinessService {
  PurchaseService
  InvoiceService
}
//`POST /orders`
OrderController.create(payload) {
  OrderService.create(payload) {
    order = new Order(payload)
    par {
      PurchaseService.createPO(order)
      InvoiceService.createInvoice(order)      
    }
  }
}

State diagram

@Lambda OrderController
<<BFF>> OrderService
group BusinessService {
  PurchaseService
  InvoiceService
}
//`POST /orders`
OrderController.create(payload) {
  OrderService.create(payload) {
    order = new Order(payload)
    par {
      PurchaseService.createPO(order)
      InvoiceService.createInvoice(order)      
    }
  }
}