Search...Search plugins and themes...
⌘K
Sign in
  • Get started
  • Download
  • Pricing
  • Enterprise
  • Account
  • Obsidian
  • Overview
  • Sync
  • Publish
  • Canvas
  • Mobile
  • Web Clipper
  • CLI
  • Learn
  • Help
  • Developers
  • Changelog
  • About
  • Roadmap
  • Blog
  • Resources
  • System status
  • License overview
  • Terms of service
  • Privacy policy
  • Security
  • Community
  • Plugins
  • Join the community
  • Discord
  • Forum / 中文论坛
  • Merch store
  • Brand guidelines
Follow us
DiscordTwitterBlueskyThreadsMastodonYouTubeGitHub
© 2026 Obsidian

Mermaid Themes

jvsteinerjvsteiner15k downloads

Alternate support for mermaid.js that supports theming and customization.

Add to Obsidian
  • Overview
  • Scorecard
  • Updates4

This is a plugin for Obsidian. It was generated based on the standard plugin template.

This project allows the user to easily apply and customize themes to mermaid.js diagrams in obsidian.

This plugin is supported by advertisements.

Note: this plugin is still in development, and there may be some bugs. Please report any issues you find.

It was inspired by the awesome new plugin for publishing your note content to Confluence. This project introduced me to Mermaid, and prompted me to make this.

  • Markdown Confluence

Usage

Allows you to apply other themes to your mermaid diagrams in your notes. There are two main options, which are mutually exclusive. Either you supply an entire mermaid theme object, or you provide the parts of that object that you want to change. The plugin will then merge your customizations with the base theme, and apply the result to your diagrams. Documentations about how to create and use mermaid themes can be found here.

The mermaid code fence label is reserved. You have to use merm as an alternate. The code block looks like:

    ```merm
    ```

Installation

Until this plugin is available in the community plugins list, you can install it as a beta tester using the BRAT plugin.

Details on how to use it are available in their documentation. The short version is that you can install this plugin by adding the following custom plugin repository to your list of repositories in the BRAT plugin settings.

Development

PR's are welcome. You can build the plugin with npm run build and the plugin will be built to the root folder, so using the built artifacts is easy. You can also run npm run dev to have it automatically rebuild when you make changes.

Releasing new releases

This section is here to remind me how to release this.

Update your manifest.json with your new version number, such as 1.0.1, and the minimum Obsidian version required for your latest release.

Update your versions.json file with "new-plugin-version": "minimum-obsidian-version" so older versions of Obsidian can download an older version of your plugin that's compatible.

Create new GitHub release using your new version number as the "Tag version". Use the exact version number, don't include a prefix v. See here for an example: https://github.com/obsidianmd/obsidian-sample-plugin/releases

Upload the files manifest.json, main.js, styles.css as binary attachments. Note: The manifest.json file must be in two places, first the root path of your repository and also in the release.

Publish the release.

You can simplify the version bump process by running npm version patch, npm version minor or npm version major after updating minAppVersion manually in manifest.json. The command will bump version in manifest.json and package.json, and add the entry for the new version to versions.json

51%
HealthFair
ReviewRisks
About
Apply and customize themes to mermaid.js diagrams in Obsidian. Supply a full mermaid theme object or override parts to merge with a base theme, and use the merm code fence to render themed diagrams.
ThemingVisualizationCharts
Details
Current version
0.1.3
Last updated
3 years ago
Created
3 years ago
Updates
4 releases
Downloads
15k
Compatible with
Obsidian 0.15.0+
Platforms
Desktop, Mobile
License
MIT
Report bugRequest featureReport plugin
Sponsor
Buy Me a Coffee
Author
jvsteinerjvsteiner
github.com/jvsteiner
GitHubjvsteiner
  1. Community
  2. Plugins
  3. Theming
  4. Mermaid Themes

Related plugins

Life Tracker

Capture and visualize the data that matters in your life.

Charts

Easily create interactive charts in your notes.

Charts View

Visualize data from your notes with plots and graphs.

Bases Charts

Bases views for scatter, line, and bar charts.

Advanced Canvas

Supercharge your canvas experience. Create presentations, flowcharts and more.

Minimal Theme Settings

Control the colors and fonts in Minimal Theme.

Hider

Hide interface elements such as tooltips, status bar, titlebar, and more.

Breadcrumbs

Visualise the hierarchy of your vault using a breadcrumb trail or matrix view.

Mermaid Tools

Improved Mermaid.js experience: visual toolbar with common elements and more.

Maps

Adds a map layout to bases so you can display notes as an interactive map view.