UML Diagrams
These examples use the supported core UML strict V1 tags. Each source is validated and rendered through the same pipeline used by the CLI.
Class diagram
Classes, interfaces, enumerations, typed compartments, realization, and multiplicity-bearing associations.
<xaligo version="1">
<data></data>
<frames gap="56">
<frame id="class" title="Ordering Domain" version="2026.07" width="1440" height="760" class="pa-3" margin-top="48">
<metadata align="right" width="156" key-width="56" font-size="12" />
<uml id="domain-model">
<class-diagram direction="right" grid="3">
<interface id="repository" title="OrderRepository" stereotype="repository">
<operation>+ save(order: Order)</operation>
<operation>+ find(id: UUID): Order</operation>
</interface>
<class id="sql-repository" title="SqlOrderRepository">
<attribute>- dataSource: DataSource</attribute>
<operation>+ save(order: Order)</operation>
<operation>+ find(id: UUID): Order</operation>
</class>
<class id="customer" title="Customer">
<attribute>- id: UUID</attribute>
<attribute>- name: String</attribute>
<operation>+ placeOrder(): Order</operation>
</class>
<class id="premium-customer" title="PremiumCustomer" abstract="true">
<attribute>- discountRate: Decimal</attribute>
<operation>+ calculateDiscount(): Money</operation>
</class>
<class id="order" title="Order" stereotype="aggregate-root">
<attribute>- id: UUID</attribute>
<attribute>- status: OrderStatus</attribute>
<operation>+ confirm()</operation>
<operation>+ total(): Money</operation>
</class>
<class id="order-line" title="OrderLine">
<attribute>- productId: UUID</attribute>
<attribute>- quantity: Integer</attribute>
<operation>+ subtotal(): Money</operation>
</class>
<enumeration id="status" title="OrderStatus" static="true">
<literal>Draft</literal>
<literal>Confirmed</literal>
<literal>Cancelled</literal>
</enumeration>
<realization src="sql-repository" dst="repository" title="implements" />
<generalization src="premium-customer" dst="customer" title="specializes" />
<association src="customer" dst="order" title="places" src-multiplicity="1" dst-multiplicity="0..*" />
<composition src="order" dst="order-line" title="contains" src-multiplicity="1" dst-multiplicity="1..*" />
<dependency src="order" dst="status" title="uses type" />
<dependency src="order" dst="repository" title="persists through" />
</class-diagram>
</uml>
<connections>
<connection src="domain-model/repository" dst="repository-detail.repository-in" title="repository details" color="#052d6e" />
</connections>
</frame>
<frame id="repository-detail" title="Repository Contract" version="2026.07" width="720" height="420" class="pa-3" margin-top="48">
<metadata align="right" width="156" key-width="56" font-size="12" />
<rectangle id="repository-card" title="OrderRepository responsibilities" width="560" height="220">
<port id="repository-in" side="left" title="details" />
</rectangle>
</frame>
</frames>
</xaligo>
Component diagram
Components, artifacts, provided interfaces, associations, dependencies, and
automatic interface/fan-out-based component heights. Diagram-level
component-width and component-height provide defaults; per-component
width and height override them. The Order Workflow component also shows
interface-width, which gives every interface name in that component one
shared width while descriptions use the remaining space.
<xaligo version="1">
<data></data>
<frames>
<frame id="component" title="Ordering Platform Components" version="2026.07" width="1920" height="1180" class="pa-3" margin-top="48">
<metadata align="right" width="156" key-width="56" font-size="12" />
<uml id="service-components">
<component-diagram direction="right" grid="4" component-width="280">
<component id="web" title="Web UI">
<interface description="Checkout commands">Ordering API</interface>
</component>
<component id="mobile" title="Mobile App">
<interface description="Customer checkout">Ordering API</interface>
</component>
<component id="kiosk" title="Store Kiosk">
<interface description="In-store ordering">Ordering API</interface>
</component>
<component id="admin" title="Admin Console">
<interface description="Operational commands">Operations API</interface>
</component>
<component id="partner" title="Partner Portal">
<interface description="Partner order intake">Partner API</interface>
</component>
<component id="api" title="API Gateway" width="320">
<interface description="Public ordering boundary">Ordering API</interface>
<interface description="Back-office boundary">Operations API</interface>
<interface description="Partner integration boundary">Partner API</interface>
<interface description="Workflow command boundary">Workflow Commands</interface>
</component>
<component id="workflow" title="Order Workflow" width="340" interface-width="88">
<interface description="Workflow command handler">Workflow Commands</interface>
<interface description="Inventory reservation">Inventory API</interface>
<interface description="Payment authorization">Payment Gateway</interface>
<interface description="Shipment booking">Shipping API</interface>
<interface description="Persistence boundary">Order Store</interface>
<interface description="Domain event stream">Order Events</interface>
<interface description="Compliance event stream">Audit Events</interface>
</component>
<component id="inventory" title="Inventory Service">
<interface description="Stock reservation">Inventory API</interface>
</component>
<component id="payment" title="Payment Service">
<interface description="Authorization provider">Payment Gateway</interface>
</component>
<component id="shipping" title="Shipping Service">
<interface description="Carrier booking">Shipping API</interface>
</component>
<component id="repository-adapter" title="PostgreSQL Adapter">
<interface description="Order records">Order Store</interface>
</component>
<component id="event-bus" title="Event Bus Adapter">
<interface description="Order domain events">Order Events</interface>
<interface description="Notification dispatch events">Notification Events</interface>
</component>
<component id="notification" title="Notification Service">
<interface description="Email and push delivery">Notification Events</interface>
</component>
<component id="audit" title="Audit Service">
<interface description="Immutable compliance trail">Audit Events</interface>
</component>
<artifact id="schema" title="order-schema.sql">
<property>version = 12</property>
</artifact>
<artifact id="event-schema" title="order-events.avsc">
<property>compatibility = backward</property>
</artifact>
<artifact id="template" title="message-template.md">
<property>locale = ja-JP</property>
</artifact>
<association src="web" dst="api" />
<association src="mobile" dst="api" />
<association src="kiosk" dst="api" />
<association src="admin" dst="api" />
<association src="partner" dst="api" />
<association src="api" dst="workflow" />
<association src="workflow" dst="inventory" />
<association src="workflow" dst="payment" />
<association src="workflow" dst="shipping" />
<association src="workflow" dst="repository-adapter" />
<association src="workflow" dst="event-bus" />
<association src="workflow" dst="audit" />
<association src="event-bus" dst="notification" />
<dependency src="repository-adapter" dst="schema" />
<dependency src="event-bus" dst="event-schema" />
<dependency src="notification" dst="template" />
</component-diagram>
</uml>
</frame>
</frames>
</xaligo>
Activity diagram
ATM withdrawal swimlanes with supported activity partitions, decisions, guards, loop routes, and the xaligo activity theme.
<xaligo version="1">
<data></data>
<frames>
<frame id="activity" title="ATM Withdrawal Activity" version="2026.07" width="960" height="1160" class="pa-3" margin-top="48">
<metadata align="right" width="156" key-width="56" font-size="12" />
<uml id="atm-withdrawal" title="ATM Withdrawal Process">
<activity-diagram direction="down" theme="xaligo" lanes="vertical">
<partition id="customer" title="Customer">
<initial id="start" />
<action id="start-session" title="Start session" tone="primary" />
<action id="enter-pin" title="Enter PIN" />
<action id="enter-amount" title="Enter amount" />
<action id="take-cash" title="Take cash" tone="primary" />
<final id="done" />
</partition>
<partition id="atm" title="ATM">
<action id="request-pin" title="Request PIN" tone="primary" />
<decision id="pin-valid" title="PIN valid?" />
<action id="process-pin" title="Process PIN" />
<action id="request-amount" title="Request withdrawal amount" tone="primary" />
<decision id="amount-valid" title="Amount valid?" />
<action id="process-withdrawal" title="Process withdrawal" />
</partition>
<partition id="bank" title="Bank">
<action id="approve-card" title="Approve card" />
<action id="approve-withdrawal" title="Approve withdrawal" />
</partition>
<control-flow src="start" dst="start-session" />
<control-flow src="start-session" dst="request-pin" />
<control-flow src="request-pin" dst="enter-pin" />
<control-flow src="enter-pin" dst="process-pin" guard="PIN entered" />
<control-flow src="process-pin" dst="pin-valid" />
<control-flow src="pin-valid" dst="request-pin" guard="invalid PIN" route="loop" />
<control-flow src="pin-valid" dst="approve-card" guard="valid PIN" />
<control-flow src="approve-card" dst="request-amount" />
<control-flow src="request-amount" dst="enter-amount" />
<control-flow src="enter-amount" dst="amount-valid" guard="amount entered" />
<control-flow src="amount-valid" dst="request-amount" guard="invalid amount" route="loop" />
<control-flow src="amount-valid" dst="approve-withdrawal" guard="valid amount" />
<control-flow src="approve-withdrawal" dst="process-withdrawal" />
<control-flow src="process-withdrawal" dst="take-cash" />
<control-flow src="take-cash" dst="done" />
</activity-diagram>
</uml>
</frame>
</frames>
</xaligo>
Activity diagram - horizontal swimlanes
The same ATM withdrawal flow arranged as horizontal swimlanes for wide process views.
<xaligo version="1">
<data></data>
<frames>
<frame id="activity-horizontal" title="ATM Withdrawal Activity - Horizontal" version="2026.07" width="1480" height="720" class="pa-3" margin-top="48">
<metadata align="right" width="156" key-width="56" font-size="12" />
<uml id="atm-withdrawal-horizontal" title="ATM Withdrawal Process">
<activity-diagram direction="right" theme="xaligo" lanes="horizontal">
<partition id="customer" title="Customer">
<initial id="start" />
<action id="insert-card" title="Insert card" tone="primary" />
<action id="enter-pin" title="Enter PIN" />
<action id="enter-amount" title="Enter amount" />
<action id="take-cash" title="Take cash" tone="primary" />
<final id="done" />
</partition>
<partition id="atm" title="ATM">
<action id="read-card" title="Read card" />
<action id="request-pin" title="Request PIN" tone="primary" />
<decision id="pin-valid" title="PIN valid?" />
<action id="request-amount" title="Request amount" tone="primary" />
<decision id="amount-valid" title="Amount valid?" />
<action id="dispense-cash" title="Dispense cash" />
</partition>
<partition id="bank" title="Bank">
<action id="authorize-card" title="Authorize card" />
<action id="authorize-withdrawal" title="Authorize withdrawal" />
</partition>
<control-flow src="start" dst="insert-card" />
<control-flow src="insert-card" dst="read-card" />
<control-flow src="read-card" dst="request-pin" />
<control-flow src="request-pin" dst="enter-pin" />
<control-flow src="enter-pin" dst="pin-valid" guard="PIN entered" />
<control-flow src="pin-valid" dst="request-pin" guard="invalid PIN" route="loop" />
<control-flow src="pin-valid" dst="authorize-card" guard="valid PIN" />
<control-flow src="authorize-card" dst="request-amount" />
<control-flow src="request-amount" dst="enter-amount" />
<control-flow src="enter-amount" dst="amount-valid" guard="amount entered" />
<control-flow src="amount-valid" dst="request-amount" guard="invalid amount" route="loop" />
<control-flow src="amount-valid" dst="authorize-withdrawal" guard="valid amount" />
<control-flow src="authorize-withdrawal" dst="dispense-cash" />
<control-flow src="dispense-cash" dst="take-cash" />
<control-flow src="take-cash" dst="done" />
</activity-diagram>
</uml>
</frame>
</frames>
</xaligo>
State-machine diagram
States, initial/final pseudostates, transitions, guards, and state compartments.
<xaligo version="1">
<data></data>
<frames>
<frame id="state-machine" title="E-Commerce Order State Machine" version="2026.07" width="1680" height="900" class="pa-3" margin-top="48">
<metadata align="right" width="156" key-width="56" font-size="12" />
<uml id="order-state">
<state-machine-diagram direction="right">
<initial id="start" row="1" col="1" />
<state id="created" title="Order Created" row="1" col="2">
<entry>Assign order number</entry>
<do>Wait for payment</do>
<exit>Record result</exit>
</state>
<state id="awaiting-shipment" title="Awaiting Shipment" row="1" col="3">
<entry>Reserve inventory</entry>
<do>Request shipment</do>
</state>
<choice id="stock-check" title="Stock Check" row="1" col="4" />
<state id="shipped" title="Shipped" row="1" col="5">
<entry>Register tracking number</entry>
<do>Track delivery status</do>
</state>
<state id="delivering" title="In Transit" row="1" col="6">
<note>Monitor delivery events</note>
</state>
<state id="completed" title="Completed" row="1" col="7">
<note>Revenue has been finalized</note>
</state>
<final id="closed" row="1" col="8" />
<state id="refund-requested" title="Refund Requested" row="2" col="3">
<entry>Create refund ticket</entry>
<do>Request refund</do>
<exit>Store refund result</exit>
</state>
<choice id="refund-result" title="Refund Result" row="2" col="4" />
<state id="refund-failed" title="Refund Failed" row="2" col="5">
<note>Operator retries or contacts buyer</note>
</state>
<state id="return-requested" title="Return Requested" row="2" col="6">
<entry>Assign return request number</entry>
<do>Wait for returned item</do>
</state>
<choice id="return-result" title="Return Result" row="2" col="7" />
<state id="return-failed" title="Return Failed" row="2" col="8">
<note>Inspection failed or window expired</note>
</state>
<state id="buyer-cancelled" title="Buyer Cancelled" row="3" col="2">
<note>Cancelled by buyer request</note>
</state>
<state id="refund-succeeded" title="Refund Succeeded" row="3" col="4">
<note>Refunded event has been emitted</note>
</state>
<history id="order-history" title="H" row="3" col="5" />
<state id="return-succeeded" title="Return Succeeded" row="3" col="7">
<entry>Return item to inventory</entry>
<exit>Mark order as cancelled</exit>
</state>
<state id="system-cancelled" title="System Cancelled" row="3" col="8">
<region>Exceptional close</region>
<note>Out of stock or return completed</note>
</state>
<transition src="start" dst="created" event="Create order" />
<transition src="created" dst="awaiting-shipment" event="Payment succeeded" guard="Payment approved" action="Reserve inventory" />
<transition src="awaiting-shipment" dst="stock-check" event="Prepare shipment" />
<transition src="stock-check" dst="shipped" guard="In stock" action="Issue shipment" />
<transition src="shipped" dst="delivering" event="Start delivery" />
<transition src="delivering" dst="completed" event="Delivered" effect="Finalize revenue" />
<transition src="completed" dst="closed" event="Close" />
<transition src="created" dst="buyer-cancelled" event="Buyer cancels" guard="Not shipped" action="Cancel order">
<bend x="120" y="650" />
</transition>
<transition src="awaiting-shipment" dst="refund-requested" event="Refund requested" guard="Paid" action="Start refund">
<bend x="540" y="360" />
</transition>
<transition src="refund-requested" dst="refund-result" event="Refund result" />
<transition src="refund-result" dst="refund-failed" guard="Failed" action="Request retry" />
<transition src="refund-result" dst="refund-succeeded" guard="Succeeded" action="Mark refunded" />
<transition src="refund-succeeded" dst="buyer-cancelled" event="Refund completed" />
<transition src="shipped" dst="return-requested" event="Return requested" guard="Within return window" action="Accept return" />
<transition src="return-requested" dst="return-result" event="Inspection complete" />
<transition src="return-result" dst="return-failed" guard="Failed" action="Contact buyer" />
<transition src="return-result" dst="return-succeeded" guard="Succeeded" action="Refund and restock" />
<transition src="return-succeeded" dst="system-cancelled" event="Return completed" />
<transition src="return-requested" dst="order-history" event="Return cancelled" action="Resume previous state" />
<transition src="order-history" dst="shipped" event="Resume" />
<transition src="stock-check" dst="system-cancelled" guard="Out of stock" action="Close order">
<bend x="1560" y="196" />
<bend x="1560" y="760" />
</transition>
<transition src="buyer-cancelled" dst="closed" event="Close">
<bend x="1660" y="820" />
<bend x="1660" y="252" />
</transition>
<transition src="system-cancelled" dst="closed" event="Close" />
</state-machine-diagram>
</uml>
</frame>
</frames>
</xaligo>
Sequence diagram
Participants/lifelines and ordered call, self, create, return, and destroy messages.
<xaligo version="1">
<data></data>
<frames>
<frame id="sequence" title="Checkout Sequence" version="2026.07" width="1360" height="760" class="pa-3" margin-top="48">
<metadata align="right" width="156" key-width="56" font-size="12" />
<uml id="checkout-sequence">
<sequence-diagram>
<participant id="customer" title="Customer" />
<lifeline id="api" title="Ordering API" />
<lifeline id="session" title="CheckoutSession" />
<lifeline id="payment" title="Payment Gateway" />
<message src="customer" dst="api" order="1" title="checkout(cart)" />
<create-message src="api" dst="session" order="1.1" title="create(cart)" />
<message src="session" dst="session" order="1.2" title="validateCart()" />
<message src="session" dst="payment" order="1.3" title="authorize(total)" mode="async" />
<return-message src="payment" dst="session" order="1.4" title="authorization" />
<return-message src="session" dst="api" order="1.5" title="receipt" />
<message src="api" dst="session" order="1.6" title="release()" />
<return-message src="api" dst="customer" order="2" title="orderConfirmed" />
</sequence-diagram>
</uml>
</frame>
</frames>
</xaligo>