visual-explainer Files

Based on PR [#25] by @peak-flow, with additional multi-diagram architecture and bug fixes.

Multi-Diagram Support

• New vector-based zoom/pan engine replacing CSS zoom with direct SVG sizing
• Closure-based initDiagram(shell) pattern — per-diagram state in closures, shared drag listeners at module scope
• Unlimited diagrams per page with no ID collisions (each diagram gets a unique generated ID)
• New HTML structure: .diagram-shell > .mermaid-wrap > .mermaid-viewport > .mermaid-canvas
• Source Mermaid code lives in <script type="text/plain" class="diagram-source"> to avoid parsing issues
• Adaptive viewport height based on diagram aspect ratio
• Smart fit algorithm with readability floor (prevents tiny unreadable diagrams)
• New zoom controls: 1:1 button, zoom percentage label
• Touch pinch-to-zoom support with proper pan transition
• Double-click to fit diagram

Bug Fixes

• Fixed touch pinch→pan transition (reset start coords after pinch ends)
• Removed dead fitZoom variable from previous implementation
• Removed 12 lines of dead scrollbar CSS (no longer needed with new viewport approach)

Documentation

• Updated css-patterns.md with new multi-diagram structure and JavaScript pattern
• Simplified Mermaid section to reference mermaid-flowchart.html as canonical source