Tree diagram · prorm

Tree diagram A nested include, drawn as the tree it actually is. 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="748" height="314" viewBox="0 0 748 314"><rect width="748" height="314" fill="#ffffff"/><text x="40" y="64" font-family="ui-sans-serif, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" font-size="16" font-weight="bold" fill="#000000">include tree</text><path d="M 208 197 C 249 197, 249 143, 290 143" fill="none" stroke="#000000" stroke-width="1"/><path d="M 458 143 C 499 143, 499 107, 540 107" fill="none" stroke="#000000" stroke-width="1"/><path d="M 458 143 C 499 143, 499 179, 540 179" fill="none" stroke="#000000" stroke-width="1"/><path d="M 208 197 C 249 197, 249 251, 290 251" fill="none" stroke="#000000" stroke-width="1"/><rect x="40" y="174" width="168" height="46" fill="#f0f0f0" stroke="#000000" stroke-width="2"/><text x="124" y="202" font-family="ui-sans-serif, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" font-size="11" font-weight="bold" fill="#000000" text-anchor="middle">User</text><rect x="290" y="120" width="168" height="46" fill="#ffffff" stroke="#000000" stroke-width="1"/><text x="374" y="142" font-family="ui-sans-serif, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" font-size="11" font-weight="bold" fill="#000000" text-anchor="middle">Post</text><text x="374" y="158" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="9" fill="#666666" text-anchor="middle">hasMany</text><rect x="540" y="84" width="168" height="46" fill="#ffffff" stroke="#000000" stroke-width="1"/><text x="624" 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">Comment</text><text x="624" y="122" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="9" fill="#666666" text-anchor="middle">hasMany</text><rect x="540" y="156" width="168" height="46" fill="#ffffff" stroke="#000000" stroke-width="1"/><text x="624" y="178" font-family="ui-sans-serif, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" font-size="11" font-weight="bold" fill="#000000" text-anchor="middle">Tag</text><text x="624" y="194" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="9" fill="#666666" text-anchor="middle">belongsToMany</text><rect x="290" y="228" width="168" height="46" fill="#ffffff" stroke="#000000" stroke-width="1"/><text x="374" y="250" font-family="ui-sans-serif, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" font-size="11" font-weight="bold" fill="#000000" text-anchor="middle">Profile</text><text x="374" y="266" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="9" fill="#666666" text-anchor="middle">hasOne</text></svg> </div> Each level is another join. A tree this shape is where eager loading starts costing more than two queries would. 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