<frame width="360" height="160" margin="24" layout="horizontal" gap="120" align="middle-center">
  <rectangle id="web" title="web" width="80" height="48" />
  <rectangle id="app" title="app" width="80" height="48" />
  <connection src="web" dst="app" />
</frame>

<frame width="360" height="160" margin="24" layout="horizontal" gap="120" align="middle-center">
  <rectangle id="web" title="web" width="80" height="48" />
  <rectangle id="app" title="app" width="80" height="48" />
  <connection src="web" dst="app" kind="route" />
</frame>

<frame width="360" height="160" margin="24" layout="horizontal" gap="120" align="middle-center">
  <rectangle id="web" title="web" width="80" height="48" />
  <rectangle id="app" title="app" width="80" height="48" />
  <connection src="web" dst="app" kind="route" />
  <connection src="web" dst="app"
              kind="traffic"
              stroke-style="dashed" />
</frame>