Dependency diagram

Dependency diagram Which models depend on which — the order tables must be created in, and the reverse order they must be dropped in. 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="519" height="234" viewBox="0 0 519 234"><defs><marker id="depArrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse"><path d="M 0 0 L 10 5 L 0 10 z" fill="#000000"/></marker><marker id="depArrowCycle" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse"><path d="M 0 0 L 10 5 L 0 10 z" fill="#000000"/></marker></defs><rect width="519" height="234" fill="#ffffff"/><text x="40" y="46" font-family="ui-sans-serif, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" font-size="22" font-weight="bold" fill="#000000">model dependencies</text><text x="40" y="66" font-family="ui-sans-serif, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" font-size="11" fill="#666666">4 nodes, 3 edges</text><g stroke-linecap="round"><line x1="208" y1="108" x2="118" y2="108" stroke="#000000" stroke-width="1" marker-end="url(#depArrow)"/><line x1="376" y1="108" x2="286" y2="108" stroke="#000000" stroke-width="1" marker-end="url(#depArrow)"/><line x1="376" y1="108" x2="118" y2="108" stroke="#000000" stroke-width="1" marker-end="url(#depArrow)"/></g><text x="163" y="104" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="8" fill="#666666" text-anchor="middle">authorId</text><text x="331" y="104" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="8" fill="#666666" text-anchor="middle">postId</text><text x="247" y="104" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="8" fill="#666666" text-anchor="middle">authorId</text><g><rect x="40" y="88" width="78" height="40" fill="#f0f0f0" stroke="#000000" stroke-width="1"/><text x="79" y="113" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="14" font-weight="bold" fill="#000000" text-anchor="middle">User</text><text x="48" y="101" font-family="ui-sans-serif, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" font-size="8" font-weight="bold" fill="#666666">L0</text></g><g><rect x="208" y="88" width="78" height="40" fill="#f0f0f0" stroke="#000000" stroke-width="1"/><text x="247" y="113" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="14" font-weight="bold" fill="#000000" text-anchor="middle">Post</text><text x="216" y="101" font-family="ui-sans-serif, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" font-size="8" font-weight="bold" fill="#666666">L1</text></g><g><rect x="376" y="88" width="103" height="40" fill="#f0f0f0" stroke="#000000" stroke-width="1"/><text x="427.5" y="113" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="14" font-weight="bold" fill="#000000" text-anchor="middle">Comment</text><text x="384" y="101" font-family="ui-sans-serif, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" font-size="8" font-weight="bold" fill="#666666">L2</text></g><g><rect x="43" y="154" width="72" height="40" fill="#f0f0f0" stroke="#000000" stroke-width="1"/><text x="79" y="179" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="14" font-weight="bold" fill="#000000" text-anchor="middle">Tag</text><text x="51" y="167" font-family="ui-sans-serif, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" font-size="8" font-weight="bold" fill="#666666">L0</text></g></svg> </div> Follow the arrows to create, reverse them to drop. A cycle here means you need a deferrable constraint. 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