LearnNewsExamplesServices
Frontmatter
id8755
titleEnhance LivePreview to Support Mermaid Diagrams
stateOpen
labels
enhancementdeveloper-experienceai
assignees[]
createdAtJan 17, 2026, 11:46 AM
updatedAtJan 17, 2026, 11:46 AM
githubUrlhttps://github.com/neomjs/neo/issues/8755
authortobiu
commentsCount0
parentIssuenull
subIssues[]
subIssuesCompleted0
subIssuesTotal0
blockedBy[]
blocking[]

Enhance LivePreview to Support Mermaid Diagrams

Openenhancementdeveloper-experienceai
tobiu
tobiu commented on Jan 17, 2026, 11:46 AM

To further unify the developer experience within the Portal and Documentation apps, we should extend the Neo.component.code.LivePreview component to support Mermaid diagrams.

Current State: LivePreview expects JavaScript code that exports a Neo.mjs component or VDOM, which it then executes and mounts in the preview area.

New Capability: Enable LivePreview to accept Mermaid diagram syntax.

Implementation Strategy:

  1. Detection/Configuration: Add a mechanism to determine if the content is Mermaid code (e.g., a language config or auto-detection).
  2. Renderer Switching:
    • If JavaScript: Keep existing execution logic.
    • If Mermaid: Instantiate Neo.component.wrapper.Mermaid in the preview container and bind its value to the editor content.
  3. Editor Integration: Ensure the Monaco Editor uses the correct syntax highlighting for Mermaid.

Benefits:

  • Unified "Playground" for both UI widgets and architectural diagrams.
  • Simplifies documentation authoring (one component for all live examples).
tobiu added the enhancement label on Jan 17, 2026, 11:46 AM
tobiu added the developer-experience label on Jan 17, 2026, 11:46 AM
tobiu added the ai label on Jan 17, 2026, 11:46 AM