Mermaid plugin

thebigdatajedi · March 6, 2025, 10:56pm

First, search the help docs - help and this forum. Maybe your question has been answered! The debugging steps -forum link can help, too. Still stuck? Delete this line and proceed.

What I’m trying to do

Things I have tried

I’m building a data capture and meaningful context retrieval application to use with Obsidian. I was working with Claude.ai, and Claude.ai is very good at expressing software design ideas using Mermaid. He told me that since I was using Obsidian to document and archive the things I was learning from Claude.ai, Mermaid was part of the Core plugins, and I should be able to just put in the code, and it would work. But when I conjure up a code ‘’'mermaid

‘’’ using the commad palette I can’t get any syntax hightligthing. This is what I’ve done to research it before comming to the Forum: Conversation with Gemini: Me:: I’m using Obsidian, I have a code snippet and is mermaid code so I thought I could use the regular code block nottion ‘’‘mermaid ‘’’ but that doesn’t Gemini:: You’re right, simply using '''mermaid might not be enough to get Mermaid code highlighting working perfectly in Obsidian. Here’s a comprehensive list of tasks you can follow to ensure proper Mermaid rendering and highlighting:


1. Enable the Mermaid Plugin:

Check if it’s installed:

Go to “Settings” (gear icon).
Click on “Community plugins”.
Click “Installed plugins”.
Look for “Mermaid”.


Enable the plugin:

If you see “Mermaid” in the list, make sure it’s toggled “on”.


Install the plugin (if it’s not installed):

Go to “Settings” > “Community plugins”.
Click “Browse”.
Search for “Mermaid”.
Click “Install”.
After installation, enable it as described above.



2. Use the Correct Code Block Syntax:

Ensure you’re using the correct syntax: ````mermaid` (four backticks, followed by “mermaid”).
Example:graph TD
    A[Start] --> B{Is it?};
    B -- Yes --> C[OK];
    B -- No --> D[KO];
    C --> E[End];
    D --> E;



3. Check for Theme Conflicts:

Some Obsidian themes might interfere with Mermaid rendering or highlighting.
Test with the default theme:

Go to “Settings” > “Appearance”.
Select the “Default” theme.
See if Mermaid works correctly.


If it works with the default theme:

The issue is likely with your custom theme.
Try updating your theme or contacting the theme’s developer.
Alternatively, you can try to modify your themes css to correct mermaid syntax highlighting.



4. Check for Conflicting Plugins:

Other plugins might be causing conflicts.
Disable other community plugins:

Go to “Settings” > “Community plugins”.
Disable all other community plugins except for “Mermaid”.
See if Mermaid works.


Re-enable plugins one by one:

If Mermaid works with other plugins disabled, re-enable them one by one to identify the conflicting plugin.



5. Restart Obsidian:

Sometimes, changes to plugins or settings require a restart to take effect.
Close and reopen Obsidian.

6. Update Obsidian and Mermaid Plugin:

Ensure you’re using the latest versions of Obsidian and the Mermaid plugin.
Update Obsidian:

Obsidian usually prompts you to update when a new version is available.
You can also manually check for updates in “Settings” > “About”.


Update Mermaid plugin:

Go to settings>Community plugins. Then click on installed plugins, and check for updates.



7. Review Mermaid Syntax:

Double-check that your Mermaid code is valid. Even a small syntax error can prevent it from rendering.
The official Mermaid documentation is an excellent resource:

[Mermaid.js Documentation] Link



Troubleshooting Tips:

Use the developer console:

Press Ctrl+Shift+I (or Cmd+Option+I on macOS) to open the developer console.
Look for any error messages that might indicate a problem.


Create a minimal test vault:

Create a new, empty Obsidian vault.
Install only the Mermaid plugin.
Test your Mermaid code in the new vault to isolate the issue.



By following these steps, you should be able to get Mermaid code highlighting and rendering working correctly in Obsidian.
Me:: I’m still on step 1, I have Mermaid Tools installed, 1.2.0 is that even the right Mermaid plugin in? See screeshot
Gemini:: You’ve hit on a crucial point! “Mermaid Tools” is NOT the core Mermaid plugin.
Here’s the breakdown:


Mermaid Tools (by dartungar):

This is a helper plugin that enhances the experience of using Mermaid within Obsidian.
It provides a visual toolbar with common Mermaid elements, making it easier to create diagrams.
It relies on the core Mermaid functionality being present.
It does NOT provide the fundamental rendering of Mermaid code blocks.



The Core Mermaid Functionality:

This is built into Obsidian itself.
It allows you to render Mermaid code blocks using the ````mermaid` syntax.
It is not a plugin that you install from the community plugins, it is a core plugin that is toggled on or off.



Therefore, you need to ensure the core Mermaid functionality in Obsidian is enabled, in addition to or instead of, using the Mermaid Tools plugin.
Here’s what you should do:


Go to Obsidian Settings:

Click the gear icon in the bottom left corner.



Go to Core Plugins:

In the settings menu, scroll down to “Core plugins”.



Find “Mermaid”:

Look for the core plugin called “Mermaid”.



Enable “Mermaid”:

Make sure the toggle switch next to “Mermaid” is turned on (it should be highlighted).



After enabling the core “Mermaid” plugin:

Try using the ````mermaid` code block syntax again.
See if your Mermaid diagrams render correctly.

Important Notes:

“Mermaid Tools” can be a valuable addition to your workflow, but it’s not a replacement for the core Mermaid functionality.
If you were only using “Mermaid Tools” and not the core “Mermaid” plugin, that would explain why your code wasn’t rendering.

By ensuring the core “Mermaid” plugin is enabled, you should be able to get your Mermaid code blocks working.

Me::  I then went to Claude and this is what it said:: I’m archiving the conversation today in my Obsidian vault for safekeeping, or I should say secure keep and back ups.  In the mermaid code what do I chose as the language for the markdown code ‘’’ segement, if I choose text it doesn’t do any color highlighting is there something else I can pick that is more suitable?

Claude:: For Mermaid diagrams in Obsidian, you should use mermaid as the language identifier in your code blocks. So your code blocks should look like this:
flowchart TD
    subgraph User Interfaces
        iOS[iOS Share Extension]
        WebApp[Web Application]
        iOSApp[iOS App]
    end
    
    // rest of your diagram

This will enable proper syntax highlighting and, more importantly, will tell Obsidian to render the Mermaid diagram visually rather than just showing the code. Obsidian has built-in support for Mermaid, so using this language identifier will ensure your diagrams are displayed correctly.
Me:: Brilliant! Thank you!

Claude:: You’re welcome! Using mermaid as the language identifier will ensure your diagrams render properly in Obsidian. The built-in Mermaid support is one of Obsidian’s great features for technical documentation and planning.
If you need anything else as you set up your PrismCompass project in your vault, just let me know!
So even Claude thinks this::  Using mermaid as the language identifier will ensure your diagrams render properly in Obsidian.
Can anyone tell me. Is mermaid a part of Obsidian in a way that I can use it to document some flowcharts in Obsidian?

ariehen · March 6, 2025, 11:29pm

There’s no need to paste your entire chat in here.

LLMs don’t really know much about Obsidian and tend to get things wrong or just make stuff up. The official docs are the place to go first:

Create a code block using three backticks with the code language of mermaid. The Mermaid code goes in there.

```mermaid
graph TD
    A[Start] --> B{Is it?};
    B -- Yes --> C[OK];
    B -- No --> D[KO];
    C --> E[End];
    D --> E;
```

Source mode | Reading view