← All examples

Flowchart Lr

The same <graph> as flowchart.svgn, turned on its side. Only the downward layout is actually computed: flowing rightward is that layout with every node's size transposed and the offsets transposed back, so layer assignment, crossing reduction and straightening stay ONE implementation rather than four that can drift apart. direction takes down/right/up/left, and Mermaid's and Graphviz's codes (td, tb, lr, bt, rl) too, since those are what you will have typed.

Layout 829 × 176 <connect><diamond><ellipse><graph><rect>

Result

Source examples/flowchart-lr.svgn

<diagram padding="22">
  <!-- The same <graph> as flowchart.svgn, turned on its side. Only the
       downward layout is actually computed: flowing rightward is that layout
       with every node's size transposed and the offsets transposed back, so
       layer assignment, crossing reduction and straightening stay ONE
       implementation rather than four that can drift apart.

       `direction` takes down/right/up/left, and Mermaid's and Graphviz's codes
       (td, tb, lr, bt, rl) too, since those are what you will have typed. -->
  <graph direction="lr" gap="26" row-gap="58">
    <ellipse id="start" label="Request"/>
    <diamond id="auth"  label="Authed?"/>
    <diamond id="cache" label="Cached?"/>
    <rect    id="serve" label="Serve"/>
    <rect    id="fetch" label="Fetch"/>
    <rect    id="deny"  label="401"/>
    <ellipse id="done"  label="Response"/>
  </graph>

  <connect from="start" to="auth"/>
  <connect from="auth"  to="cache" label="yes"/>
  <connect from="auth"  to="deny"  label="no"/>
  <connect from="cache" to="serve" label="hit"/>
  <connect from="cache" to="fetch" label="miss"/>
  <connect from="serve" to="done"/>
  <connect from="fetch" to="done"/>
  <connect from="deny"  to="done"/>
</diagram>

Open the SVG →