fix: improve Mermaid diagram implementation

[delize]

This commit addresses multiple issues with Mermaid diagram rendering
and adds significant improvements to the user experience.

Bug Fixes

• Fix <br/> tags rendering as literal text instead of line breaks
• Fix flash of raw mermaid code before diagram renders
• Fix Gantt chart rendering issues in dark mode
• Fix diagrams briefly showing during theme switch re-render
• Fix expand modal showing diagram left-aligned before centering

New Features

• Add fullscreen expand modal with pan/zoom functionality
• Add toolbar with zoom controls (zoom in/out, reset, fit to screen)
• Add keyboard support (Escape to close modal)
• Add per-diagram transparent background via %%transparent%% directive
• Add comprehensive configuration options:
  • look: classic or handDrawn (sketch style)
  • lightTheme/darkTheme: theme selection per mode
  • lightThemeVariables/darkThemeVariables: custom theme colors
  • securityLevel, htmlLabels, maxTextSize, maxEdges
  • fontSize, fontFamily, curve, logLevel

Performance Improvements

• Switch from ESM to UMD bundle for faster initial load (~1s vs 2s+)
• Lazy-load panzoom library only when expand modal is opened
• Pre-render alternate theme during idle time for instant theme switching
• Cache rendered diagrams to avoid re-rendering on theme toggle

Code Quality

• Move all inline CSS to article.scss using SCSS nesting
• Extract helper functions for better maintainability
• Use data attributes and event delegation for cleaner handlers
• Reduce mermaid.html from 411 to 177 lines (57% reduction)

Documentation

• Add comprehensive mermaid-diagrams example post with all diagram types
• Document all configuration options in hugo.yaml

Closes #1213

[delize]

~600 of the 990 lines are documentation in a new markdown post.

Everything else is as compact and efficient as I could make it for this to work smoothly with the theme.

[delize]

Some explanations as why I switched it away from ESM:

1. The loading times when loading a diagram heavy page (like the docs page that was created), it took 2.5 seconds in the Chrome waterfall for it to fully load.
2. Themes were not displaying correctly when using the +esm version, but do display correctly when using the vendor'ed version. We could potentially look at using esm.min.js version, but the +esm version seemed to have issues around the various themes that were being applied.
3. Charts were not displaying correctly without heavy modifications to some of the css/scss.

The reasons for adding panzoom:

1. If a diagram is massive, and doesn't fit within the width area of the blog content center third, there needs to be a way for a reader to see / view it properly. This is where panzoom comes in to play. Open to an alternative or other service.

All other changes mainly have to do with matching the site's light / dark theme, allowing all configuration options, and more advanced features of the diagramming. I am super open to feedback for changes here, I am not necessarily a fan of the panzoom UI - but left it as default for now as I didn't want to modify it too much.

For the changes related to mermaid, unfortunately, to get it somewhat professional looking (eg: no code flash, theme switching recognition, etc) there was a lot of extra code needed to wrap all of it in. 😞

[SunsetMkt]

I would suggest adding script URLs to https://github.com/CaiJimmy/hugo-theme-stack/blob/master/data/external.yaml