feat: add beautiful-mermaid as optional mermaid renderer

README.md

@@ -135,6 +135,23 @@ require('livepreview.config').set()
 
 See [`:h livepreview`](./doc/livepreview.txt) for all configurations options, as well as usage and FAQ.
 
+## Mermaid Rendering
+
+By default, the plugin uses [mermaid.js](https://github.com/mermaid-js/mermaid) for rendering diagrams. You can switch to [beautiful-mermaid](https://github.com/lukilabs/beautiful-mermaid) for improved aesthetics:
+
+```lua
+require('livepreview.config').set({
+    mermaid = {
+        renderer = "beautiful",  -- "default" (mermaid.js) or "beautiful" (beautiful-mermaid)
+        theme = "github-light",   -- beautiful-mermaid theme (default: 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.
+
 # Contributing :handshake:
 
 Since this is a young project, there should be a lot of rooms for improvements. If you would like to contribute to this project, please feel free to open an issue or a pull request.
@@ -152,6 +169,7 @@ See [TODO](https://github.com/brianhuster/live-preview.nvim/milestone/1)
 * [asciidoctor/asciidoctor.js](https://github.com/asciidoctor/asciidoctor.js) for parsing AsciiDoc files
 * [KaTeX](https://github.com/KaTeX/KaTeX) for rendering math equations
 * [mermaid-js/mermaid](https://github.com/mermaid-js/mermaid) for rendering diagrams
+* [lukilabs/beautiful-mermaid](https://github.com/lukilabs/beautiful-mermaid) for beautiful diagram rendering
 * [digitalmoksha/markdown-it-inject-linenumbers](https://github.com/digitalmoksha/markdown-it-inject-linenumbers) : A markdown-it plugin for injecting line numbers into html output
 
 # Buy me a coffee ☕

doc/livepreview.txt

@@ -32,6 +32,10 @@ Link to repo https://github.com/brianhuster/live-preview.nvim
 	sync_scroll = true,
 	picker = "",
 	address = '127.0.0.1',
+	mermaid = {
+		renderer = 'default',
+		theme = 'github-light',
+	},
     })
 <
 
@@ -48,6 +52,15 @@ Explaination of each option:
   |fzf-lua|, |mini.pick|, |snacks.picker| or |vim.ui.select|. If nil, the plugin look for the first available picker
   when you call the `pick` command.
 - `address`: Hostname/IP-address to bind the server to. Default: `127.0.0.1`.
+- `mermaid`: Options for mermaid diagram rendering.
+  - `renderer`: Renderer to use. Use "default" for mermaid.js or "beautiful" for
+    beautiful-mermaid. Default: "default".
+  - `theme`: Theme to use when renderer is "beautiful". Default: `github-light`.
+    Available 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 only supports 6 diagram types (flowchart, state,
+    sequence, class, ER, xychart).
 
 Note: If you wish to config the plugin in Vimscript, see |v:lua-call| for
 instruction on how to call Lua function in Vimscript

lua/livepreview/config.lua

@@ -10,20 +10,29 @@ M.pickers = {
 	default = "",
 }
 
+---@class LivePreviewMermaidConfig
+---@field renderer "default"|"beautiful" Renderer to use for mermaid diagrams (default: "default")
+---@field theme string beautiful-mermaid theme name (only used when renderer = "beautiful")
+
 ---@class LivePreviewConfig
 ---@field picker Picker? picker to use to quickly open HTML/Markdown/Asciidoc/SVG files and run live-preview server
 ---@field port number? port to run the server on
 ---@field address string? address to bind the server to
 ---@field browser string? browser to open the preview in
 ---@field dynamic_root boolean? Whether to use the basename of the file as the root
 ---@field sync_scroll boolean? Whether to sync scroll the preview with the editor
+---@field mermaid LivePreviewMermaidConfig? Mermaid rendering options
 M.default = {
 	picker = "",
 	address = "127.0.0.1",
 	port = 5500,
 	browser = "default",
 	dynamic_root = false,
 	sync_scroll = true,
+	mermaid = {
+		renderer = "default",
+		theme = "github-light",
+	},
 }
 
 M.config = vim.deepcopy(M.default)
@@ -33,9 +42,14 @@ M.config = vim.deepcopy(M.default)
 ---@return boolean ok
 ---@return string? message
 ---@return vim.log.levels? level
----
----@diagnostic disable not right now
-function M.validate(name, value) end
+function M.validate(name, value)
+	if name == "mermaid" then
+		if value.renderer and value.renderer ~= "default" and value.renderer ~= "beautiful" then
+			return false, "mermaid.renderer must be 'default' or 'beautiful'", vim.log.levels.ERROR
+		end
+	end
+	return true
+end
 
 --- Configure live-preview.nvim
 --- @param opts Config?

lua/livepreview/template.lua

@@ -1,4 +1,5 @@
 local M = {}
+local config = require("livepreview.config")
 
 -- HTML escape function using table-based substitution for better performance
 local html_escapes = {
@@ -18,6 +19,20 @@ local function html_escape(text)
 end
 
 local html_template = function(body, stylesheet, script_tag)
+	local mermaid_renderer = config.config.mermaid.renderer
+	local mermaid_theme = config.config.mermaid.theme
+
+	local mermaid_config_script = string.format(
+		"<script>window.__livepreview_mermaid_config = { renderer: %q, theme: %q };</script>",
+		mermaid_renderer,
+		mermaid_theme
+	)
+
+	local beautiful_mermaid_script = ""
+	if mermaid_renderer == "beautiful" then
+		beautiful_mermaid_script = '<script src="/live-preview.nvim/static/mermaid/beautiful-mermaid.js"></script>'
+	end
+
 	return [[
         <!DOCTYPE html>
         <html lang="en">
@@ -29,6 +44,7 @@ local html_template = function(body, stylesheet, script_tag)
 ]] .. stylesheet .. [[
 			<link rel="stylesheet" href="/live-preview.nvim/static/katex/katex.min.css">	
             <script defer src="/live-preview.nvim/static/katex/katex.min.js"></script>
+]] .. beautiful_mermaid_script .. [[
             <script src="/live-preview.nvim/static/mermaid/mermaid.min.js"></script>
 			<link rel="stylesheet" href="/live-preview.nvim/static/highlight/main.css">
 			<script defer src="/live-preview.nvim/static/highlight/highlight.min.js"></script>
@@ -38,8 +54,9 @@ local html_template = function(body, stylesheet, script_tag)
 				.katex .array{border-collapse:collapse}
 				.katex .array>tbody>tr>td{padding:0}
 				.katex .delimsizing{font-family:KaTeX_Size1,KaTeX_Size2,KaTeX_Size3,KaTeX_Size4,serif}
+				pre[class*="language-mermaid"],code[class*="language-mermaid"]{background:transparent !important;border:0;margin:0;padding:0}
 			</style>
-]] .. script_tag .. [[
+]] .. mermaid_config_script .. script_tag .. [[
 			<script defer src='/live-preview.nvim/static/ws-client.js'></script>
         </head>