Model diagram

Read this page in the documentation

Model diagram A single table in detail — every column, its type, and the keys and references it participates 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"> <!-- ModelDiagram Post --> <svg xmlns="http://www.w3.org/2000/svg" width="308" height="203" viewBox="0 0 308 203"><g><rect x="0" y="0" width="308" height="203" fill="#ffffff"/><text x="24" y="29" font-family="ui-sans-serif, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" font-size="16" fill="#000000" font-weight="bold">Model: Post</text><g><rect x="24" y="41" width="260" height="112" fill="#ffffff" stroke="#000000" stroke-width="1"/><rect x="24" y="41" width="260" height="36" fill="#f0f0f0" stroke="#000000" stroke-width="1"/><text x="32" y="58" font-family="ui-sans-serif, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" font-size="13" fill="#000000" font-weight="bold">Post</text><text x="32" y="72" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="9" fill="#666666">posts</text><text x="32" y="90" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="9" fill="#666666">PK</text><text x="51" y="90" font-family="ui-sans-serif, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" font-size="11" fill="#000000">id</text><text x="276" y="90" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="9" fill="#666666" text-anchor="end">INTEGER auto</text><text x="32" y="108" font-family="ui-sans-serif, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" font-size="11" fill="#000000">title</text><text x="276" y="108" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="9" fill="#666666" text-anchor="end">VARCHAR(200) not null</text><text x="32" y="126" font-family="ui-sans-serif, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" font-size="11" fill="#000000">body</text><text x="276" y="126" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="9" fill="#666666" text-anchor="end">TEXT</text><text x="32" y="144" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="9" fill="#666666">FK</text><text x="51" y="144" font-family="ui-sans-serif, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" font-size="11" fill="#000000">authorId</text><text x="276" y="144" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="9" fill="#666666" text-anchor="end">INTEGER not null</text></g><text x="24" y="171" font-family="ui-sans-serif, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" font-size="9" fill="#666666">Articles written by a user</text></g></svg> </div> Primary keys, unique constraints, nullability and foreign keys are all marked, so the diagram carries the same information as the CREATE TABLE. 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