Fixing Cropped Mermaid Diagrams in Obsidian

Obsidian is a powerful note taking and knowledge management tool that supports various types of content, including diagrams created with Mermaid.

However, when using the Mermaid syntax you might encounter an issue where Mermaid diagrams appear cropped, cutting off essential parts of the diagrams. This post will guide you through the steps to resolve this issue and ensure your diagrams display correctly.

Understanding the Problem

Mermaid diagrams in Obsidian can sometimes be rendered incorrectly, resulting in parts of the diagram being cut off. This usually happens due to the default settings not allocating enough space for the diagram’s content as seen in below screenshot:

Cropped mermaid diagram in Obsidian

While plugins are available to help fix this issue, I was looking for a quick solution. The first step involves modifying the CSS styles to ensure the diagrams are allocated enough space. Here’s how you can do it:

Step 1 - Open Obsidian Settings

Click on the gear icon in the lower-left corner to open the settings.

Step 2 - Go to Appearance

In the settings menu, navigate to the Appearance tab.

Step 3 - Open CSS Snippets

Scroll down to the CSS snippets section and click on Open snippets folder icon.

Cropped mermaid diagram in Obsidian

Step 4 - Create a New CSS File

In the snippets folder, create a new CSS file. Name it something like mermaid.css.

Cropped mermaid diagram in Obsidian

Step 5 - Add the Following CSS

Open the newly created CSS file in a text editor and add the following CSS code:

.mermaid svg {
    max-width: 100%;
    height: auto;

Step 6 - Apply the CSS Snippet

Save the CSS file and go back to Obsidian. In the CSS snippets section, you should see your new snippet. Toggle it on to apply the changes.

Cropped mermaid diagram in Obsidian

The Mermaid diagram now well fits the width as seen in below screenshot:

Cropped mermaid diagram in Obsidian


By adjusting the CSS styles and modifying your Mermaid code blocks, you can resolve the issue of cropped diagrams in Obsidian. Additionally, using specialized plugins can offer more control and better rendering options. With these steps, your Mermaid diagrams should display correctly, ensuring that all parts of your diagrams are visible and properly rendered.