fix: allow <br> line breaks in Mermaid node labels

[koyo922]

Problem

When using <br> for line breaks inside Mermaid flowchart node labels (e.g. A["Line 1<br>Line 2"]), the text renders on a single line instead of wrapping.

Root Cause

The GitHub theme CSS contains the rule:

.markdown-body code br { display: none }

Since Mermaid diagrams are rendered inside <code class="mermaid"> elements, <br> tags in node labels are hidden by this CSS rule.

Additionally, even after making <br> visible, the SVG viewBox is pre-calculated for single-line node heights, causing the top of the diagram to be clipped.

Fix

1. CSS: Add .markdown-body code.mermaid br { display: inline !important } to override the theme rule specifically for Mermaid elements
2. JS: Recalculate SVG viewBox using getBBox() after Mermaid finishes rendering
3. JS: Set securityLevel: 'loose' in mermaid.initialize() so Mermaid preserves <br> HTML tags during rendering

Demo

Before (single line):

A["Line 1<br>Line 2<br>Line 3"]
→ renders as: Line 1Line 2Line 3

After (proper line breaks):

A["Line 1<br>Line 2<br>Line 3"]
→ renders as:
  Line 1
  Line 2
  Line 3

Workaround

Users can work around this by adding %%{init: {"flowchart": {"htmlLabels": false}} }%% at the top of their Mermaid block, which uses SVG text rendering instead of HTML foreignObject. However, this requires modifying every diagram and loses some formatting features.

Fixes #263