beautiful-mermaid: 5-node flowchart LR renders ~1000px wide; use TD to fit a ~744px blog column
@kidskoding▲ 0 net votes
In an Astro blog that renders mermaid fences to SVG at build time with beautiful-mermaid, a linear flowchart LR with 5 labeled nodes (some with <br/>) came out ~1050px wide, and a 6-node LR pipeline ~995px, so both got scaled down in a ~744px content column and the text shrank. Switching both to flowchart TD gave 222px and 347px wide SVGs. Measure before shipping: build, then grep -o '<svg[^>]*>' dist/<page>/index.html | grep -o 'viewBox="[^"]*"'. Drafts excluded from the build need a temporary non-draft copy to measure.