fix: responsive Mermaid SVG sizing via startOnLoad: false + auto-fit

[digitall-it]

Problem

Mermaid renders SVGs with hardcoded pixel width/height attributes. When those SVGs land inside flexbox-centered containers (.mermaid-wrap with align-items: center), they appear tiny — the fixed-size SVG floats in a sea of dead space rather than filling the card.

Additionally, startOnLoad: true fires with no render callback, so there's no way to post-process the SVGs after Mermaid finishes.

Solution

startOnLoad: false + await mermaid.run() + auto-fit loop

After mermaid.run() resolves, strip the pixel dimensions, preserve viewBox, and apply width: 100%; height: auto:

await mermaid.run({ nodes: document.querySelectorAll('.mermaid') });
document.querySelectorAll('.mermaid-wrap').forEach(wrap => {
  const svg = wrap.querySelector('svg');
  if (!svg) return;
  if (!svg.getAttribute('viewBox')) {
    const w = parseFloat(svg.getAttribute('width')) || 800;
    const h = parseFloat(svg.getAttribute('height')) || 400;
    svg.setAttribute('viewBox', `0 0 ${w} ${h}`);
  }
  svg.removeAttribute('width');
  svg.removeAttribute('height');
  svg.style.width = '100%';
  svg.style.height = 'auto';
  svg.style.display = 'block';
});

Also remove display: flex; align-items/justify-content: center from .mermaid-wrap — that was the layout causing the centering issue.

Files changed

• references/css-patterns.md — replaced "Centering fix" with "Responsive sizing" + new "Auto-fit after render (required)" section with the JS snippet
• references/libraries.md — updated CDN example to use startOnLoad: false pattern; added note that ELK can produce inconsistent sizing (dagre preferred for most diagrams)
• templates/mermaid-flowchart.html — CSS and script fixes applied to the reference template

Verified

Tested on a complex multi-diagram page (architecture flowchart + two sequence diagrams + ER diagram). Before: all diagrams rendered at ~200px centered in 600px+ cards. After: all diagrams fill their containers edge-to-edge and scale correctly on resize.

🤖 Generated with Claude Code

[Copilot]

Pull request overview

This PR updates the Mermaid reference template and documentation to render diagrams via startOnLoad: false + await mermaid.run(), then post-process the generated SVGs so they responsively fill their containers (removing fixed pixel sizing issues in centered/flex layouts).

Changes:

• Switch Mermaid initialization to startOnLoad: false and explicitly render via await mermaid.run().
• Add an “auto-fit” post-processing step that preserves/sets viewBox, strips width/height, and applies responsive sizing.
• Update Mermaid container CSS guidance (remove flex-centering approach; prefer responsive SVG sizing + top-centered zoom origin).

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.

File	Description
templates/mermaid-flowchart.html	Applies mermaid.run() rendering + SVG auto-fit logic and adds SVG responsive CSS in the reference template.
references/libraries.md	Updates CDN usage examples to the startOnLoad: false + mermaid.run() pattern and documents rationale.
references/css-patterns.md	Replaces prior centering guidance with responsive sizing guidance and adds a required auto-fit snippet.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The new wording says to always use startOnLoad: false, but later in this same doc the “Deep Theming” example still uses startOnLoad: true. This creates a direct contradiction for readers. Either soften this guidance to “recommended when you need a post-render hook (e.g., auto-fit)” or update the later examples to the mermaid.run() pattern as well so the doc is internally consistent.

[Copilot]

This comment is a bit misleading: the CSS rule isn’t “applied by” the auto-fit JS; rather, the JS removes Mermaid’s fixed width/height so this CSS can take effect. Consider rephrasing to avoid implying that JS injects the CSS, and to clarify the division of responsibilities (JS: strip attrs / ensure viewBox; CSS: responsive sizing).

[Copilot]

The SVG sizing is now set in two places: via CSS (.mermaid-wrap .mermaid svg { width: 100%; height: auto; display: block; }) and again via inline styles in this loop. Inline styles override CSS and create a second source of truth. Consider limiting the JS to viewBox/attribute cleanup and rely on the CSS rule for sizing/display to keep future tweaks in one place.

Suggested change

	svg.style.width = '100%';
	svg.style.height = 'auto';
	svg.style.display = 'block';