Package diagram

Package diagram How the ORM itself is put together — useful when finding your way around the source. 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="808" height="426" viewBox="0 0 808 426"><defs><marker id="pkgArrow" 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 class="canvas" width="808" height="426" fill="#ffffff"/><text class="title" x="32" y="58" font-family="ui-sans-serif, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" font-size="22" font-weight="bold" fill="#000000">prorm modules</text><line class="dependency" x1="376" y1="188" x2="432" y2="188" stroke="#000000" stroke-width="1" stroke-dasharray="7 5" marker-end="url(#pkgArrow)"/><text class="dependency-label" x="404" y="182" font-family="ui-sans-serif, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" font-size="11" font-style="italic" fill="#666666" text-anchor="middle">compiles through</text><rect class="package-tab" x="32" y="106" width="120" height="26" fill="#f0f0f0" stroke="#000000" stroke-width="1"/><rect class="package-body" x="32" y="132" width="344" height="112" fill="#ffffff" stroke="#000000" stroke-width="1"/><rect class="package-header" x="32" y="132" width="344" height="40" fill="#f0f0f0" stroke="#000000" stroke-width="1"/><text class="package-name" x="48" y="158" font-family="ui-sans-serif, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" font-size="15" font-weight="bold" fill="#000000">models</text><rect class="member" x="48" y="188" width="150" height="40" fill="#ffffff" stroke="#000000" stroke-width="1"/><rect class="member-stripe" x="48" y="188" width="4" height="40" fill="#000000"/><text class="member-name" x="62" y="213" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="12" font-weight="bold" fill="#000000">Model</text><rect class="member" x="210" y="188" width="150" height="40" fill="#ffffff" stroke="#000000" stroke-width="1"/><rect class="member-stripe" x="210" y="188" width="4" height="40" fill="#000000"/><text class="member-name" x="224" y="213" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="12" font-weight="bold" fill="#000000">DataTypes</text><rect class="package-tab" x="432" y="106" width="120" height="26" fill="#f0f0f0" stroke="#000000" stroke-width="1"/><rect class="package-body" x="432" y="132" width="344" height="112" fill="#ffffff" stroke="#000000" stroke-width="1"/><rect class="package-header" x="432" y="132" width="344" height="40" fill="#f0f0f0" stroke="#000000" stroke-width="1"/><text class="package-name" x="448" y="158" font-family="ui-sans-serif, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" font-size="15" font-weight="bold" fill="#000000">dialects</text><rect class="member" x="448" y="188" width="150" height="40" fill="#ffffff" stroke="#000000" stroke-width="1"/><rect class="member-stripe" x="448" y="188" width="4" height="40" fill="#000000"/><text class="member-name" x="462" y="213" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="12" font-weight="bold" fill="#000000">Dialect</text><rect class="member" x="610" y="188" width="150" height="40" fill="#ffffff" stroke="#000000" stroke-width="1"/><rect class="member-stripe" x="610" y="188" width="4" height="40" fill="#000000"/><text class="member-name" x="624" y="213" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="12" font-weight="bold" fill="#000000">PostgresDialect</text><rect class="package-tab" x="32" y="282" width="120" height="26" fill="#f0f0f0" stroke="#000000" stroke-width="1"/><rect class="package-body" x="32" y="308" width="344" height="112" fill="#ffffff" stroke="#000000" stroke-width="1"/><rect class="package-header" x="32" y="308" width="344" height="40" fill="#f0f0f0" stroke="#000000" stroke-width="1"/><text class="package-name" x="48" y="334" font-family="ui-sans-serif, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" font-size="15" font-weight="bold" fill="#000000">nosql</text><rect class="member" x="48" y="364" width="150" height="40" fill="#ffffff" stroke="#000000" stroke-width="1"/><rect class="member-stripe" x="48" y="364" width="4" height="40" fill="#000000"/><text class="member-name" x="62" y="389" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="12" font-weight="bold" fill="#000000">NoSqlStore</text><rect class="member" x="210" y="364" width="150" height="40" fill="#ffffff" stroke="#000000" stroke-width="1"/><rect class="member-stripe" x="210" y="364" width="4" height="40" fill="#000000"/><text class="member-name" x="224" y="389" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="12" font-weight="bold" fill="#000000">MongoStore</text></svg> </div> The stores deliberately do not depend on the dialects — they share only the connection lifecycle. 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