qiaoborui/obsidian-beautiful-mermaid

Obsidian is a popular note-taking application where users write notes in Markdown format. Mermaid is a syntax for creating diagrams, flowcharts, charts, and more, using plain text inside a code block. This plugin upgrades how Mermaid diagrams look inside Obsidian by rendering them using the "beautiful-mermaid" library, which produces polished SVG diagrams that automatically adapt to your current Obsidian theme's colors. To use it, you write a standard Mermaid diagram inside a code block in your notes, tagged as mermaid, mermaid-beautiful, beautiful-mermaid, or the shorthand bmmd. The plugin intercepts that block and renders it as a styled SVG image. In Obsidian's Live Preview editing mode, the diagram appears once you move the cursor away from the code block, and you can click an Edit button to jump back into the source. Both Live Preview and the separate Reading view are supported. The plugin can render several diagram types including flowcharts, XY bar charts, combined bar and line charts, and horizontal charts, and all of them pick up the current Obsidian theme's color variables so they look consistent with your workspace. Installation is manual: copy three files, main.js, manifest.json, and styles.css, into a designated folder inside your Obsidian vault, then enable the plugin in Obsidian's settings. A "Fit diagrams to width" setting controls whether diagrams scale to fill the editor or retain their natural height with horizontal scrolling. The plugin is written in TypeScript and built using the bun toolkit.