Gantt diagram · prorm

Gantt diagram A migration plan over time, for the rollouts that cannot all happen at once. 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="908" height="466" viewBox="0 0 908 466"><defs><marker id="ganttArrow" 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="908" height="466" fill="#ffffff"/><rect class="header" x="24" y="24" width="860" height="64" fill="#f0f0f0" stroke="#000000" stroke-width="1"/><text x="42" y="64" font-family="ui-sans-serif, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" font-size="22" font-weight="bold" fill="#000000">Schema rollout</text><line class="gridline" x1="244" y1="122" x2="244" y2="402" stroke="#000000" stroke-width="1"/><text class="axis-tick" x="247" y="114" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="8" fill="#666666">2026-01-05</text><line class="gridline" x1="315.1111111111111" y1="122" x2="315.1111111111111" y2="402" stroke="#000000" stroke-width="1"/><text class="axis-tick" x="318.1111111111111" y="114" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="8" fill="#666666">2026-01-06</text><line class="gridline" x1="386.22222222222223" y1="122" x2="386.22222222222223" y2="402" stroke="#000000" stroke-width="1"/><text class="axis-tick" x="389.22222222222223" y="114" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="8" fill="#666666">2026-01-07</text><line class="gridline" x1="457.3333333333333" y1="122" x2="457.3333333333333" y2="402" stroke="#000000" stroke-width="1"/><text class="axis-tick" x="460.3333333333333" y="114" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="8" fill="#666666">2026-01-08</text><line class="gridline" x1="528.4444444444445" y1="122" x2="528.4444444444445" y2="402" stroke="#000000" stroke-width="1"/><text class="axis-tick" x="531.4444444444445" y="114" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="8" fill="#666666">2026-01-09</text><line class="gridline" x1="599.5555555555555" y1="122" x2="599.5555555555555" y2="402" stroke="#000000" stroke-width="1"/><text class="axis-tick" x="602.5555555555555" y="114" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="8" fill="#666666">2026-01-10</text><line class="gridline" x1="670.6666666666666" y1="122" x2="670.6666666666666" y2="402" stroke="#000000" stroke-width="1"/><text class="axis-tick" x="673.6666666666666" y="114" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="8" fill="#666666">2026-01-11</text><line class="gridline" x1="741.7777777777778" y1="122" x2="741.7777777777778" y2="402" stroke="#000000" stroke-width="1"/><text class="axis-tick" x="744.7777777777778" y="114" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="8" fill="#666666">2026-01-12</text><line class="gridline" x1="812.8888888888889" y1="122" x2="812.8888888888889" y2="402" stroke="#000000" stroke-width="1"/><text class="axis-tick" x="815.8888888888889" y="114" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="8" fill="#666666">2026-01-13</text><line class="gridline" x1="884" y1="122" x2="884" y2="402" stroke="#000000" stroke-width="1"/><text class="axis-tick" x="887" y="114" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="8" fill="#666666">2026-01-14</text><line class="gridline" x1="884" y1="122" x2="884" y2="402" stroke="#000000" stroke-width="1"/><line class="axis-divider" x1="244" y1="88" x2="244" y2="402" stroke="#000000" stroke-width="2"/><rect class="section" x="24" y="122" width="860" height="30" fill="#f0f0f0"/><rect class="section-accent" x="24" y="122" width="5" height="30" fill="#000000"/><text class="section-label" x="40" y="141" font-family="ui-sans-serif, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" font-size="12" font-weight="bold" fill="#000000" letter-spacing="0.5">expand</text><text class="task-label" x="38" y="175" font-family="ui-sans-serif, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" font-size="12" font-weight="bold" fill="#000000">Add nullable column</text><rect class="bar" x="244" y="160" width="71.11111111111109" height="22" fill="#f0f0f0" stroke="#000000" stroke-width="1"/><rect class="bar-progress" x="244" y="160" width="71.11111111111109" height="22" fill="#000000"/><text class="bar-pct" x="321.1111111111111" y="175" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="8" font-weight="bold" fill="#666666">100%</text><text class="task-label" x="38" y="213" font-family="ui-sans-serif, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" font-size="12" font-weight="bold" fill="#000000">Backfill</text><rect class="bar" x="315.1111111111111" y="198" width="213.33333333333337" height="22" fill="#f0f0f0" stroke="#000000" stroke-width="1"/><rect class="bar-progress" x="315.1111111111111" y="198" width="128.00000000000003" height="22" fill="#000000"/><text class="bar-pct" x="534.4444444444445" y="213" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="8" font-weight="bold" fill="#666666">60%</text><rect class="section" x="24" y="228" width="860" height="30" fill="#f0f0f0"/><rect class="section-accent" x="24" y="228" width="5" height="30" fill="#000000"/><text class="section-label" x="40" y="247" font-family="ui-sans-serif, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" font-size="12" font-weight="bold" fill="#000000" letter-spacing="0.5">migrate</text><text class="task-label" x="38" y="281" font-family="ui-sans-serif, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" font-size="12" font-weight="bold" fill="#000000">Dual write</text><rect class="bar" x="528.4444444444445" y="266" width="213.33333333333337" height="22" fill="#f0f0f0" stroke="#000000" stroke-width="1"/><rect class="section" x="24" y="296" width="860" height="30" fill="#f0f0f0"/><rect class="section-accent" x="24" y="296" width="5" height="30" fill="#000000"/><text class="section-label" x="40" y="315" font-family="ui-sans-serif, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" font-size="12" font-weight="bold" fill="#000000" letter-spacing="0.5">contract</text><text class="task-label" x="38" y="349" font-family="ui-sans-serif, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" font-size="12" font-weight="bold" fill="#000000">Make NOT NULL</text><rect class="bar" x="741.7777777777778" y="334" width="71.11111111111109" height="22" fill="#f0f0f0" stroke="#000000" stroke-width="1"/><text class="task-label" x="38" y="387" font-family="ui-sans-serif, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" font-size="12" font-weight="bold" fill="#000000">Drop old column</text><path class="milestone" d="M812.8888888888889,375 L820.8888888888889,383 L812.8888888888889,391 L804.8888888888889,383 Z" fill="#000000" stroke="#000000" stroke-width="1"/><text class="footer" x="26" y="434" font-family="ui-sans-serif, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" font-size="11" fill="#666666">5 tasks, 2026-01-05 - 2026-01-14</text></svg> </div> The expand / migrate / contract shape is how you change a column without downtime — see the migrations guide. 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