Class diagram · prorm

Class diagram The UML view — models as classes with their attributes and methods, for readers who think in objects rather than tables. 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="614" height="290" viewBox="0 0 614 290"><rect width="614" height="290" fill="#ffffff"/><text x="32" y="40" font-family="ui-sans-serif, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" font-size="20" font-weight="bold" fill="#000000">Model classes</text><rect x="32" y="76" width="240" height="182" fill="#ffffff" stroke="#000000" stroke-width="1"/><rect x="32" y="76" width="240" height="40" fill="#f0f0f0" stroke="#000000" stroke-width="1"/><text x="152" y="102" font-family="ui-sans-serif, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" font-size="15" font-weight="bold" fill="#000000" text-anchor="middle">User</text><rect x="32" y="116" width="240" height="82" fill="#f0f0f0"/><line x1="32" y1="116" x2="272" y2="116" stroke="#000000" stroke-width="1"/><text x="44" y="139" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="12" font-weight="500" fill="#000000">+ id: number</text><text x="44" y="161" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="12" font-weight="500" fill="#000000">+ email: string</text><text x="44" y="183" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="12" font-weight="500" fill="#000000">+ name: string</text><rect x="32" y="198" width="240" height="60" fill="#ffffff"/><line x1="32" y1="198" x2="272" y2="198" stroke="#000000" stroke-width="1"/><text x="44" y="221" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="12" font-weight="500" fill="#666666">+ getPosts()</text><text x="44" y="243" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="12" font-weight="500" fill="#666666">+ createPost()</text><rect x="342" y="76" width="240" height="160" fill="#ffffff" stroke="#000000" stroke-width="1"/><rect x="342" y="76" width="240" height="40" fill="#f0f0f0" stroke="#000000" stroke-width="1"/><text x="462" y="102" font-family="ui-sans-serif, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" font-size="15" font-weight="bold" fill="#000000" text-anchor="middle">Post</text><rect x="342" y="116" width="240" height="82" fill="#f0f0f0"/><line x1="342" y1="116" x2="582" y2="116" stroke="#000000" stroke-width="1"/><text x="354" y="139" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="12" font-weight="500" fill="#000000">+ id: number</text><text x="354" y="161" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="12" font-weight="500" fill="#000000">+ title: string</text><text x="354" y="183" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="12" font-weight="500" fill="#000000">+ authorId: number</text><rect x="342" y="198" width="240" height="38" fill="#ffffff"/><line x1="342" y1="198" x2="582" y2="198" stroke="#000000" stroke-width="1"/><text x="354" y="221" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="12" font-weight="500" fill="#666666">+ getAuthor()</text></svg> </div> The association mixins prorm generates (getPosts, createPost, …) are worth listing as methods — they are the part of the model that is easy to forget exists. 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