Module: JekyllMermaidPrebuild::SvgPostProcessor

Defined in:
lib/jekyll-mermaid-prebuild/svg_post_processor.rb

Overview

Post-processes mmdc-generated SVGs to fix rendering issues.

Four independent fixes:

  1. Text centering: Mermaid's CSS text-align: center targets SVG <g> elements where it has no effect on HTML inside <foreignObject>. We inject a CSS rule so that foreignObject content centers correctly regardless of text measurement differences between the generating and viewing browsers. Always applied, idempotent.
  2. Overflow protection: foreignObject defaults to overflow:hidden, which silently clips labels when the viewing browser renders text wider than the generating Chromium measured. We inject a CSS rule setting overflow:visible on all foreignObjects. Always applied, idempotent.
  3. Edge label padding: Widens edge-label <foreignObject> widths in any diagram type to prevent clipping when the viewing browser renders text wider than headless Chromium measured. Opt-in via postprocessing.edge_label_padding config.
  4. Root SVG background: mmdc always emits background-color: white on the root <svg> regardless of theme. The plugin replaces that token with configurable CSS color values for light and dark variants (defaults white / black) so charts match page background in both modes.

Constant Summary collapse

EDGE_LABEL_FOREIGN_OBJECT_RE =

Opening sequence produced by mmdc for block edge labels (deterministic minified output).

/
  (<g\sclass="edgeLabel"[^>]*><g\sclass="label"[^>]*><foreignObject)
  (\s[^>]+)
  (>)
/x
OVERFLOW_RULE = 
"foreignObject{overflow:visible;}"
CENTERING_RULE = 
"foreignObject > div{display:block !important;text-align:center;}"

Class Method Summary collapse