← All examples

Frames

Diagrams 744 × 727 <actor><column><else><frame><message><note><sequence><style><text>

Result

Source examples/frames.svgn

<diagram padding="20">
  <column gap="14" align="center">
    <text class="title" label="Checkout, with the branches drawn"/>
    <sequence gap="74">
      <actor id="ui" label="Browser"/>
      <actor id="api" label="Checkout"/>
      <actor id="pay" label="Payments"/>
      <actor id="db" label="Orders"/>
      <message from="ui" to="api" label="POST /checkout" activate="true"/>
      <frame kind="loop" label="each line item">
        <message from="api" to="db" label="reserve stock"/>
        <message from="db" to="api" label="held" dash="4 3" head="open"/>
      </frame>
      <frame kind="alt" label="card authorised">
        <message from="api" to="pay" label="authorise" activate="true"/>
        <message from="pay" to="api" label="approved" dash="4 3" head="open"
                 deactivate="true"/>
        <frame kind="opt" label="saved card">
          <message from="api" to="db" label="store token"/>
        </frame>
        <message from="api" to="db" label="INSERT order"/>
        <message from="api" to="ui" label="201 Created" dash="4 3" head="open"/>
        <else label="declined"/>
        <note over="api pay" label="the hold is released on the way out"/>
        <message from="api" to="ui" label="402 Payment Required" dash="4 3" head="open"
                 deactivate="true"/>
      </frame>
    </sequence>
  </column>
  <style>
    .title { font-size: 15px; font-weight: 700; fill: var(--sv-title); }
  </style>
</diagram>

Open the SVG →