0) {
+ // Mark blocks synchronously before the async render to prevent double-processing
+ // when ngAfterViewChecked fires again during the async mermaid import.
+ mermaidBlocks.forEach((block: Element) => block.setAttribute('data-mermaid-rendered', 'true'));
+ this.renderMermaid(mermaidBlocks);
}
- // Mark blocks synchronously before the async render to prevent double-processing
- // when ngAfterViewChecked fires again during the async mermaid import.
- mermaidBlocks.forEach((block: Element) => block.setAttribute('data-mermaid-rendered', 'true'));
- this.renderMermaid(mermaidBlocks);
+ this.enhanceDiagramImages();
}
public ngOnDestroy(): void {
@@ -186,14 +187,78 @@ export class ReferenceArchitectureDetailComponent implements OnInit, OnDestroy,
try {
const { svg } = await mermaid.render(id, graphDefinition);
- const wrapper = document.createElement('div');
- wrapper.classList.add('mermaid-diagram');
- wrapper.innerHTML = svg;
- pre.replaceWith(wrapper);
+ const holder = document.createElement('div');
+ holder.innerHTML = svg;
+ const svgEl = holder.firstElementChild as HTMLElement | null;
+
+ if (!svgEl) {
+ continue;
+ }
+
+ pre.replaceWith(svgEl);
+ this.makeZoomable(svgEl, svgEl, 'Diagram', null);
} catch {
// Leave the code block as-is if rendering fails
}
}
}
+
+ /**
+ * Diagrams in the markdown body are committed SVGs referenced as images. They are wide and
+ * detailed, and browser zoom does not help — the page just reflows and the diagram stays fitted
+ * to its column — so each one gets a fullscreen viewer with real zoom and pan.
+ */
+ private enhanceDiagramImages(): void {
+ const images: NodeListOf = this.el.nativeElement.querySelectorAll(
+ '.markdown-body img:not([data-diagram-enhanced])'
+ );
+
+ images.forEach(img =>
+ this.makeZoomable(img, img, img.getAttribute('alt') || 'Diagram', img.getAttribute('src'))
+ );
+ }
+
+ /**
+ * Wraps `element` in a figure carrying a fullscreen affordance. `viewerNode` is what the viewer
+ * clones and displays — the same element for images, the bare `