Skip to content

feat: add beautiful-mermaid as optional mermaid renderer#366

Open
dermorz wants to merge 1 commit intobrianhuster:mainfrom
dermorz:main
Open

feat: add beautiful-mermaid as optional mermaid renderer#366
dermorz wants to merge 1 commit intobrianhuster:mainfrom
dermorz:main

Conversation

@dermorz
Copy link
Copy Markdown

@dermorz dermorz commented Mar 17, 2026

Summary

Adds support for beautiful-mermaid as an alternative to the default mermaid.js renderer for rendering diagrams in Markdown and AsciiDoc files.

Changes

  • Add mermaid.renderer config option ("default" or "beautiful")
  • Add mermaid.theme config option for beautiful-mermaid themes
  • Bundle beautiful-mermaid library for offline use
  • Update HTML template to conditionally load the selected renderer
  • Update client-side JavaScript to use the configured renderer
  • Add documentation in README and help docs

Usage

require('livepreview.config').set({
    mermaid = {
        renderer = "beautiful",
        theme = "github-light",
    }
})

Available beautiful-mermaid themes: zinc-light, zinc-dark, tokyo-night, tokyo-night-storm, tokyo-night-light, catppuccin-mocha, catppuccin-latte, nord, nord-light, dracula, github-light, github-dark, solarized-light, solarized-dark, one-dark.

Note

beautiful-mermaid supports 6 diagram types (flowchart, state, sequence, class, ER, xychart). Some mermaid.js diagrams may not render with this renderer.

Breaking Changes

None - defaults to existing mermaid.js renderer.

Copy link
Copy Markdown
Contributor

@github-actions github-actions bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for your pull request! We appreciate your contribution. Please ensure that your changes are well documented and tested, and are formatted as noexpandtab.

Add configurable mermaid renderer option supporting both default
mermaid.js and beautiful-mermaid for improved aesthetics.
- Add mermaid.renderer ("default" | "beautiful") config option
- Add mermaid.theme config option for beautiful-mermaid themes
- Bundle beautiful-mermaid.js for offline use
- Update template to conditionally load renderer
- Update client to use selected renderer
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants