Jobstate

Another <graph> (see autograph), but this one has a cycle: retry runs from Failed back to Queued. A layered drawing has to flow one way, and a cycle has no one way to flow — so the engine reverses a minimal set of edges to break every cycle, found by a depth-first search, lays the rest out top-down, then draws the reversed ones against the flow. retry climbs the left margin from the bottom back up to Queued, routed around the boxes in its way. poll is a self-loop, Running to itself. It arches off a side the node's other edges leave free — here the right — rather than always the top, where in a downward flow the incoming edges land. Nothing here is placed by hand: the four states, the branch to Failed and Done, the self-loop and the cycle are all read off the five <connect> elements. Rewrite the transitions and the whole picture re-lays itself.

Layout 302 × 327 <connect><ellipse><graph><style>

Result

Source examples/jobstate.svgn

<diagram padding="26" theme="light">
  <!-- Another `<graph>` (see `autograph`), but this one has a *cycle*: `retry`
       runs from Failed back to Queued. A layered drawing has to flow one way,
       and a cycle has no one way to flow — so the engine reverses a minimal set
       of edges to break every cycle, found by a depth-first search, lays the
       rest out top-down, then draws the reversed ones against the flow. `retry`
       climbs the left margin from the bottom back up to Queued, routed around
       the boxes in its way.

       `poll` is a self-loop, Running to itself. It arches off a side the node's
       other edges leave free — here the right — rather than always the top,
       where in a downward flow the incoming edges land.

       Nothing here is placed by hand: the four states, the branch to Failed and
       Done, the self-loop and the cycle are all read off the five `<connect>`
       elements. Rewrite the transitions and the whole picture re-lays itself. -->
  <style>
    .wait { fill: #eef2ff; stroke: #6366f1; }
    .run  { fill: #fef9c3; stroke: #ca8a04; }
    .ok   { fill: #dcfce7; stroke: #16a34a; }
    .bad  { fill: #fee2e2; stroke: #dc2626; }
  </style>
  <graph gap="40" row-gap="52">
    <ellipse id="queued"  class="wait" label="Queued"/>
    <ellipse id="running" class="run"  label="Running"/>
    <ellipse id="failed"  class="bad"  label="Failed"/>
    <ellipse id="done"    class="ok"   label="Done"/>
  </graph>
  <connect from="queued"  to="running" label="start"/>
  <connect from="running" to="failed"  label="error"/>
  <connect from="running" to="done"    label="ok"/>
  <connect from="running" to="running" label="poll"/>
  <connect from="failed"  to="queued"  label="retry"/>
</diagram>

Open the SVG →