LearnNewsExamplesServices
Frontmatter
id8756
titleRefactor Mermaid Theming to use YAML Frontmatter Injection
stateClosed
labels
airefactoringarchitectureperformance
assigneestobiu
createdAtJan 17, 2026, 11:49 AM
updatedAtJan 17, 2026, 12:03 PM
githubUrlhttps://github.com/neomjs/neo/issues/8756
authortobiu
commentsCount1
parentIssuenull
subIssues[]
subIssuesCompleted0
subIssuesTotal0
blockedBy[]
blocking[]
closedAtJan 17, 2026, 12:03 PM

Refactor Mermaid Theming to use YAML Frontmatter Injection

Closed v11.23.0 airefactoringarchitectureperformance
tobiu
tobiu commented on Jan 17, 2026, 11:49 AM

Refactor the Mermaid integration to use diagram-specific YAML frontmatter configuration instead of global re-initialization.

Current State: The Main Thread Addon maintains a currentTheme state and calls mermaid.initialize({ theme }) whenever a diagram requests a different theme. This is global and affects all diagrams.

New Architecture:

  1. Wrapper Component (Neo.component.wrapper.Mermaid):

    • Owns the themeMap (Neo Theme -> Mermaid Theme).
    • Dynamically prepends the YAML frontmatter to the diagram code string before sending it to the addon.
    • Example:
  2. Main Thread Addon (Neo.main.addon.Mermaid):

    • Removes all theme-specific logic (themeMap, currentTheme, initialize).
    • Simply calls mermaid.render() with the code provided by the wrapper.

Benefits:

  • Isolation: Multiple diagrams with different themes can coexist.
  • Performance: Removes costly global re-initialization.
  • Separation of Concerns: The App Worker handles business logic (theming), Main Thread handles rendering.
tobiu added the ai label on Jan 17, 2026, 11:49 AM
tobiu added the refactoring label on Jan 17, 2026, 11:49 AM
tobiu added the architecture label on Jan 17, 2026, 11:49 AM
tobiu added the performance label on Jan 17, 2026, 11:49 AM
tobiu referenced in commit 9bcaa17 - "refactor: Implement Mermaid YAML Frontmatter Theming (#8756)" on Jan 17, 2026, 11:51 AM
tobiu assigned to @tobiu on Jan 17, 2026, 11:51 AM
tobiu referenced in commit bce0aa5 - "feat: Move mermaidTheme to static config to enable prototype overwrites (#8756)" on Jan 17, 2026, 11:57 AM
tobiu
tobiu Jan 17, 2026, 11:57 AM

Input from Gemini 3 Pro:

✦ I have refined the Neo.component.wrapper.Mermaid implementation based on the code review.

Refinement:

  • Moved the mermaidTheme property from a class field to the static config block.
  • Why: This allows the mermaidTheme default value to be overridden globally via Neo.overwrites, consistent with the framework's configuration architecture.

Status: The implementation is now complete, including dynamic theming, manual overrides, and correct architectural placement of configs.

tobiu closed this issue on Jan 17, 2026, 12:03 PM