fabro/docs/images/preview-workflow.svg
Bryan Helmkamp 22b41f63fe Add Preview docs page with workflow SVG
Fill in the human-tools/preview page documenting how preview URLs
let users access running services in sandbox environments from
their browser. Includes how it works, web UI and API usage,
common use cases with an example workflow, and tips. Adds a
graphviz-generated SVG of the BuildAndPreview workflow with
dark mode support.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-07 13:42:51 -05:00

90 lines
5.1 KiB
XML

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 14.1.2 (20260124.0452)
-->
<!-- Title: BuildAndPreview Pages: 1 -->
<svg width="697pt" height="79pt"
viewBox="0.00 0.00 697.00 79.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>
@media (prefers-color-scheme: dark) {
[fill="#1a1a1a"] { fill: #e5e5e5; }
[fill="#666666"] { fill: #aaaaaa; }
[stroke="#666666"] { stroke: #aaaaaa; }
[stroke="#999999"] { stroke: #777777; }
}
</style>
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 75.12)">
<title>BuildAndPreview</title>
<!-- start -->
<g id="node1" class="node">
<title>start</title>
<polygon fill="none" stroke="#357f9e" points="35.26,-36.12 0,-18.13 35.26,-0.13 70.52,-18.12 35.26,-36.12"/>
<polyline fill="none" stroke="#357f9e" points="10.69,-23.58 10.69,-12.67"/>
<polyline fill="none" stroke="#357f9e" points="24.57,-5.58 45.95,-5.58"/>
<polyline fill="none" stroke="#357f9e" points="59.83,-12.67 59.83,-23.58"/>
<polyline fill="none" stroke="#357f9e" points="45.95,-30.67 24.57,-30.67"/>
<text xml:space="preserve" text-anchor="middle" x="35.26" y="-13.1" font-family="Helvetica,sans-Serif" font-size="12.00" fill="#1a1a1a">Start</text>
</g>
<!-- build -->
<g id="node3" class="node">
<title>build</title>
<path fill="none" stroke="#357f9e" d="M163.27,-36.12C163.27,-36.12 119.52,-36.12 119.52,-36.12 113.52,-36.12 107.52,-30.12 107.52,-24.12 107.52,-24.12 107.52,-12.12 107.52,-12.12 107.52,-6.12 113.52,-0.12 119.52,-0.12 119.52,-0.12 163.27,-0.12 163.27,-0.12 169.27,-0.12 175.27,-6.12 175.27,-12.12 175.27,-12.12 175.27,-24.13 175.27,-24.13 175.27,-30.12 169.27,-36.12 163.27,-36.12"/>
<text xml:space="preserve" text-anchor="middle" x="141.4" y="-13.1" font-family="Helvetica,sans-Serif" font-size="12.00" fill="#1a1a1a">Build Site</text>
</g>
<!-- start&#45;&gt;build -->
<g id="edge1" class="edge">
<title>start&#45;&gt;build</title>
<path fill="none" stroke="#666666" d="M71.52,-18.12C79.38,-18.12 87.81,-18.12 95.99,-18.12"/>
<polygon fill="#666666" stroke="#666666" points="95.77,-21.63 105.77,-18.13 95.77,-14.63 95.77,-21.63"/>
</g>
<!-- exit -->
<g id="node2" class="node">
<title>exit</title>
<polygon fill="none" stroke="#357f9e" points="689.22,-36.25 652.97,-36.25 652.97,0 689.22,0 689.22,-36.25"/>
<polyline fill="none" stroke="#357f9e" points="664.97,-36.25 652.97,-24.25"/>
<polyline fill="none" stroke="#357f9e" points="652.97,-12 664.97,0"/>
<polyline fill="none" stroke="#357f9e" points="677.22,0 689.22,-12"/>
<polyline fill="none" stroke="#357f9e" points="689.22,-24.25 677.22,-36.25"/>
<text xml:space="preserve" text-anchor="middle" x="671.09" y="-13.1" font-family="Helvetica,sans-Serif" font-size="12.00" fill="#1a1a1a">Exit</text>
</g>
<!-- serve -->
<g id="node4" class="node">
<title>serve</title>
<polygon fill="none" stroke="#357f9e" points="398.42,-71.12 250.36,-71.12 212.27,-35.13 360.33,-35.12 398.42,-71.12"/>
<text xml:space="preserve" text-anchor="middle" x="305.35" y="-48.1" font-family="Helvetica,sans-Serif" font-size="12.00" fill="#1a1a1a">Start Dev Server</text>
</g>
<!-- build&#45;&gt;serve -->
<g id="edge2" class="edge">
<title>build&#45;&gt;serve</title>
<path fill="none" stroke="#666666" d="M175.56,-25.29C185.24,-27.38 196.34,-29.78 207.87,-32.27"/>
<polygon fill="#666666" stroke="#666666" points="207.04,-35.67 217.55,-34.37 208.51,-28.83 207.04,-35.67"/>
</g>
<!-- review -->
<g id="node5" class="node">
<title>review</title>
<polygon fill="none" stroke="#357f9e" points="580.97,-18.12 544.58,-36.12 471.81,-36.12 435.42,-18.13 471.81,-0.13 544.58,-0.12 580.97,-18.12"/>
<text xml:space="preserve" text-anchor="middle" x="508.19" y="-13.1" font-family="Helvetica,sans-Serif" font-size="12.00" fill="#1a1a1a">Review Preview</text>
</g>
<!-- serve&#45;&gt;review -->
<g id="edge3" class="edge">
<title>serve&#45;&gt;review</title>
<path fill="none" stroke="#666666" d="M368.52,-42.29C391.89,-38.22 418.5,-33.58 442.12,-29.46"/>
<polygon fill="#666666" stroke="#666666" points="442.71,-32.92 451.96,-27.75 441.51,-26.02 442.71,-32.92"/>
</g>
<!-- review&#45;&gt;exit -->
<g id="edge4" class="edge">
<title>review&#45;&gt;exit</title>
<path fill="none" stroke="#666666" d="M581.64,-18.12C602.85,-18.12 624.81,-18.12 641.54,-18.12"/>
<polygon fill="#666666" stroke="#666666" points="641.2,-21.63 651.2,-18.13 641.2,-14.63 641.2,-21.63"/>
<text xml:space="preserve" text-anchor="middle" x="616.97" y="-19.88" font-family="Helvetica,sans-Serif" font-size="10.00" fill="#666666">Approve</text>
</g>
<!-- review&#45;&gt;build -->
<g id="edge5" class="edge">
<title>review&#45;&gt;build</title>
<path fill="none" stroke="#666666" d="M439.31,-15.78C425.77,-15.4 411.65,-15.07 398.42,-14.88 315.7,-13.64 294.98,-12.95 212.27,-14.88 204.01,-15.07 195.2,-15.39 186.72,-15.75"/>
<polygon fill="#666666" stroke="#666666" points="186.78,-12.25 176.95,-16.2 187.11,-19.24 186.78,-12.25"/>
<text xml:space="preserve" text-anchor="middle" x="305.35" y="-16.62" font-family="Helvetica,sans-Serif" font-size="10.00" fill="#666666">Revise</text>
</g>
</g>
</svg>