Part of ZenUML for Confluence · For retail and e-commerce engineering teams
Draw the Checkout Before Peak Season Tests It
Checkout, inventory, payments and fulfilment change every sprint. Write their flows as text in Confluence, so the diagram keeps up with the code and the whole team can find the latest call chain when something breaks.
Install Free — Lite Plan · See the example diagrams
✓ Diagrams written as text and updated in seconds ✓ Sequence diagrams, Mermaid, draw.io and OpenAPI in one app ✓ AI-assisted syntax repair on every plan
Diagrams that keep up with the code
Retail teams ship fast, and diagrams drawn by hand fall behind. With Mermaid and ZenUML sequence diagrams, changing a step means editing a line of text, and the layout updates on its own. When the source has a syntax mistake, AI-assisted syntax repair fixes it.
Checkout and orders
Show how you avoid overselling
Overselling happens when stock is taken without being reserved, or when a failed payment never releases it. Put the reservation and the release in the diagram so reviewers can check both paths.
title Checkout with Inventory Reservation
@Actor Shopper
@Boundary Storefront
@Control Orders
@Control Inventory
@Boundary Payments
Shopper->Storefront.placeOrder(cart) {
Storefront->Orders.create(cart) {
hold = Inventory.reserve(items)
if(hold.ok) {
paid = Payments.charge(total)
if(paid.ok) {
Inventory.commit(hold)
return orderConfirmed
} else {
Inventory.release(hold)
return paymentFailed
}
} else {
return outOfStock
}
}
}
Agree on what each order status means
Customer service, the warehouse and the storefront all show order statuses. A state diagram gives everyone the same list and the same transitions.
stateDiagram-v2
[*] --> Placed
Placed --> Paid: Payment captured
Placed --> Cancelled: Payment failed or customer cancels
Paid --> Picking: Sent to warehouse or store
Picking --> Shipped: Handed to carrier
Picking --> ReadyForPickup: Click and collect
Shipped --> Delivered: Carrier confirms
ReadyForPickup --> Collected: Customer collects
Delivered --> ReturnRequested: Customer starts return
Collected --> ReturnRequested: Customer starts return
ReturnRequested --> Refunded: Item received and checked
Cancelled --> [*]
Refunded --> [*]
The exact source above, rendered live in your browser by Mermaid.js — the same library the ZenUML macro uses.
Map orders across channels
Buy online, pick up in store touches the web store, order management, store inventory and the store team's app. One sequence diagram shows the whole path, including what happens when the store is out of stock.
title Buy Online, Pick Up in Store
@Actor Shopper
@Boundary Web
@Control OMS
@Database StoreStock
@Boundary StoreApp
@Boundary Notify
Shopper->Web.order(item, store) {
Web->OMS.route(order) {
stock = StoreStock.check(item)
if(stock.available) {
OMS->StoreApp.pick(order)
} else {
OMS->OMS.shipToStore(order)
}
}
}
StoreApp->OMS.picked(order) {
OMS->Notify.readyForPickup(order)
}
Peak traffic and incidents
Write down the fallback before you need it
When a dependency slows down during a sale, the team needs to know what the system does next. Keep the fallback plan as a flowchart on the incident runbook page.
flowchart TD
A[Order request] --> B{Inventory replies in 300 ms?}
B -- Yes --> C[Reserve live stock]
B -- No --> D[Use cached stock level]
D --> E{Above safety buffer?}
E -- Yes --> F[Accept order, reconcile later]
E -- No --> G[Show item as unavailable]
C --> H{Gateway healthy?}
F --> H
H -- Yes --> I[Charge card]
H -- No --> J[Switch to backup gateway]
J --> I
Rendered live in your browser by Mermaid.js.
Let your AI agent read the latest diagram
The ZenUML MCP server lets Claude Code, Codex, Cursor and other MCP clients find, read, create and update your diagrams in Confluence. An agent working on the checkout code can read the checkout diagram, and update it when the flow changes. The agent signs in as you and reaches only the pages your Confluence permissions allow.
Example diagrams
Every example on this page is a working diagram. Copy the source into a ZenUML macro and it renders on your Confluence page. The systems, names and numbers are illustrative.
| Example | Diagram type |
|---|---|
| Checkout with inventory reservation | ZenUML sequence diagram |
| Order lifecycle | Mermaid state diagram |
| Buy online, pick up in store | ZenUML sequence diagram |
| Peak-traffic fallbacks | Mermaid flowchart |
Frequently asked questions
Is writing diagrams as text really faster than drawing them?
For flows that change often, usually yes. Changing a step in a Mermaid or ZenUML diagram means editing a line, and the layout updates on its own. For free-form pictures such as store layouts or network maps, the draw.io editor in the same app is the better fit.
What happens if I make a syntax mistake?
The editor highlights the error as you type, and AI-assisted syntax repair can fix broken diagram source on every plan.
Can we copy Mermaid diagrams from our GitHub repositories?
Yes. ZenUML for Confluence uses the same Mermaid.js library as GitHub, so a Mermaid diagram from a README renders in Confluence without changes.
Where are the diagrams stored?
Diagrams are stored as Confluence custom content in your Atlassian site, under the same permissions as the page. See the Confluence app FAQ for details.
Start with the example diagrams
Install ZenUML for Confluence from the Atlassian Marketplace and paste any example above into a page. The Lite plan is free.