Sequence diagram

Sequence diagram What actually happens during a write — the call order from your code down to the driver and back. The code What it produces Generated by running the snippet above — this is the generator's real output, rebuilt by scripts/build-diagram-examples.mjs, not a picture of it. <div class="diagram-example">  <svg xmlns="http://www.w3.org/2000/svg" width="880" height="604" viewBox="0 0 880 604"><defs><marker id="seqhead" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse"><path d="M 0 0 L 10 5 L 0 10 z" fill="#000000"/></marker></defs><rect width="880" height="604" fill="#ffffff"/><text x="440" y="54" font-family="ui-sans-serif, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" font-size="16" font-weight="bold" fill="#000000" text-anchor="middle">User.create()</text><line x1="100" y1="116" x2="100" y2="574" stroke="#000000" stroke-width="1" stroke-dasharray="6 5" class="lifeline"/><line x1="270" y1="116" x2="270" y2="574" stroke="#000000" stroke-width="1" stroke-dasharray="6 5" class="lifeline"/><line x1="440" y1="116" x2="440" y2="574" stroke="#000000" stroke-width="1" stroke-dasharray="6 5" class="lifeline"/><line x1="610" y1="116" x2="610" y2="574" stroke="#000000" stroke-width="1" stroke-dasharray="6 5" class="lifeline"/><line x1="780" y1="116" x2="780" y2="574" stroke="#000000" stroke-width="1" stroke-dasharray="6 5" class="lifeline"/><rect x="264" y="156" width="12" height="54" fill="#f0f0f0" stroke="#000000" stroke-width="1" class="activation"/><rect x="774" y="318" width="12" height="54" fill="#f0f0f0" stroke="#000000" stroke-width="1" class="activation"/><rect x="30" y="70" width="140" height="46" fill="#f0f0f0" stroke="#000000" stroke-width="1" class="participant"/><text x="100" y="88" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="9" fill="#666666" text-anchor="middle">ACTOR</text><text x="100" y="106" font-family="ui-sans-serif, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" font-size="11" font-weight="bold" fill="#000000" text-anchor="middle">App</text><rect x="200" y="70" width="140" height="46" fill="#f0f0f0" stroke="#000000" stroke-width="1" class="participant"/><text x="270" y="88" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="9" fill="#666666" text-anchor="middle">OBJECT</text><text x="270" y="106" font-family="ui-sans-serif, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" font-size="11" font-weight="bold" fill="#000000" text-anchor="middle">Model</text><rect x="370" y="70" width="140" height="46" fill="#f0f0f0" stroke="#000000" stroke-width="1" class="participant"/><text x="440" y="88" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="9" fill="#666666" text-anchor="middle">OBJECT</text><text x="440" y="106" font-family="ui-sans-serif, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" font-size="11" font-weight="bold" fill="#000000" text-anchor="middle">Hooks</text><rect x="540" y="70" width="140" height="46" fill="#f0f0f0" stroke="#000000" stroke-width="1" class="participant"/><text x="610" y="88" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="9" fill="#666666" text-anchor="middle">OBJECT</text><text x="610" y="106" font-family="ui-sans-serif, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" font-size="11" font-weight="bold" fill="#000000" text-anchor="middle">Dialect</text><rect x="710" y="70" width="140" height="46" fill="#f0f0f0" stroke="#000000" stroke-width="1" class="participant"/><text x="780" y="88" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="9" fill="#666666" text-anchor="middle">DB</text><text x="780" y="106" font-family="ui-sans-serif, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" font-size="11" font-weight="bold" fill="#000000" text-anchor="middle">Postgres</text><line x1="106" y1="156" x2="264" y2="156" stroke="#000000" stroke-width="1" marker-end="url(#seqhead)" class="message message-call"/><circle cx="117" cy="144" r="9" fill="#ffffff" stroke="#000000" stroke-width="1" class="seq-num"/><text x="117" y="148" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="9" font-weight="bold" fill="#000000" text-anchor="middle">1</text><text x="185" y="148" font-family="ui-sans-serif, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" font-size="10" font-weight="bold" fill="#000000" text-anchor="middle">create(values)</text><line x1="276" y1="210" x2="434" y2="210" stroke="#000000" stroke-width="1" marker-end="url(#seqhead)" class="message message-call"/><circle cx="287" cy="198" r="9" fill="#ffffff" stroke="#000000" stroke-width="1" class="seq-num"/><text x="287" y="202" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="9" font-weight="bold" fill="#000000" text-anchor="middle">2</text><text x="355" y="202" font-family="ui-sans-serif, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" font-size="10" font-weight="bold" fill="#000000" text-anchor="middle">beforeValidate / beforeCreate</text><line x1="276" y1="264" x2="604" y2="264" stroke="#000000" stroke-width="1" marker-end="url(#seqhead)" class="message message-call"/><circle cx="287" cy="252" r="9" fill="#ffffff" stroke="#000000" stroke-width="1" class="seq-num"/><text x="287" y="256" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="9" font-weight="bold" fill="#000000" text-anchor="middle">3</text><text x="440" y="256" font-family="ui-sans-serif, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" font-size="10" font-weight="bold" fill="#000000" text-anchor="middle">buildInsert(values)</text><line x1="616" y1="318" x2="774" y2="318" stroke="#000000" stroke-width="1" marker-end="url(#seqhead)" class="message message-call"/><circle cx="627" cy="306" r="9" fill="#ffffff" stroke="#000000" stroke-width="1" class="seq-num"/><text x="627" y="310" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="9" font-weight="bold" fill="#000000" text-anchor="middle">4</text><text x="695" y="310" font-family="ui-sans-serif, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" font-size="10" font-weight="bold" fill="#000000" text-anchor="middle">INSERT … RETURNING </text><line x1="774" y1="372" x2="616" y2="372" stroke="#000000" stroke-width="1" stroke-dasharray="5 4" marker-end="url(#seqhead)" class="message message-return"/><circle cx="763" cy="360" r="9" fill="#ffffff" stroke="#000000" stroke-width="1" class="seq-num"/><text x="763" y="364" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="9" font-weight="bold" fill="#000000" text-anchor="middle">5</text><text x="695" y="364" font-family="ui-sans-serif, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" font-size="10" font-weight="bold" fill="#000000" text-anchor="middle">row</text><line x1="276" y1="426" x2="434" y2="426" stroke="#000000" stroke-width="1" marker-end="url(#seqhead)" class="message message-call"/><circle cx="287" cy="414" r="9" fill="#ffffff" stroke="#000000" stroke-width="1" class="seq-num"/><text x="287" y="418" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="9" font-weight="bold" fill="#000000" text-anchor="middle">6</text><text x="355" y="418" font-family="ui-sans-serif, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" font-size="10" font-weight="bold" fill="#000000" text-anchor="middle">afterCreate</text><line x1="264" y1="480" x2="106" y2="480" stroke="#000000" stroke-width="1" stroke-dasharray="5 4" marker-end="url(#seqhead)" class="message message-return"/><circle cx="253" cy="468" r="9" fill="#ffffff" stroke="#000000" stroke-width="1" class="seq-num"/><text x="253" y="472" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="9" font-weight="bold" fill="#000000" text-anchor="middle">7</text><text x="185" y="472" font-family="ui-sans-serif, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" font-size="10" font-weight="bold" fill="#000000" text-anchor="middle">instance</text></svg> </div> Hooks run on the same connection as the statement, which is why a throw inside one rolls the write back with it. Saving it generate() returns the SVG as a string; save(path) writes it straight to disk. Related reading Diagram generators — every generator and its options Models — the definitions these are drawn from