Mermaid ELK Renderer
approvedby smolblackhole
This plugin has not been manually reviewed by Obsidian staff. Re-enables the ELK (Eclipse Layout Kernel) renderer for Mermaid diagrams.
Mermaid ELK Renderer
Re-enables the ELK (Eclipse Layout Kernel) renderer for Mermaid diagrams in Obsidian.
Features
- Registers ELK layouts via
@mermaid-js/layout-elk. - Keeps default Mermaid behavior for all other diagrams unchanged.
- Enables ELK only where
%% elk %%is set, on a per-diagram basis. - Preserves custom
classDefstyling. - Respects Obsidian's light and dark mode color scheme.
Screenshots


Installation
Via Community Plugins
- Open Obsidian Settings and go to Community Plugins.
- Search for Mermaid ELK Renderer and install it.
- Enable the plugin.
- Restart Obsidian so the ELK renderer patch is fully applied.
- After restarting, verify the plugin is still shown as enabled under Community Plugins.
[!warning] A restart is required after enabling the plugin. Without it, the ELK renderer patch is not applied and
%% elk %%diagrams will not render correctly.
Manual Installation
[!info] Use this method if the plugin is not yet listed in the Community Plugins directory.
- Download the latest release:
main.js,manifest.json, andstyles.css. - Open Obsidian Settings and go to Community Plugins.
- At the bottom of the installed plugins list, click the folder icon on the right. This opens the plugins folder in your file explorer.
- Create a new folder named
mermaid-elk-rendererinside that folder. - Copy
main.js,manifest.json, andstyles.cssinto it. - Restart Obsidian, then enable Mermaid ELK Renderer under Community Plugins.
- Restart Obsidian once more and verify the plugin is still shown as enabled.
Usage
Add %% elk %% at the top of any mermaid code block to use the ELK renderer for that diagram.
```mermaid
%% elk %%
flowchart LR
A[Start] --> B[Analyze]
B --> C[Done]
```
Custom classDef styling works as expected:
```mermaid
%% elk %%
flowchart LR
A[Start] --> B[Process]
classDef highlight fill:#e8f5e9,stroke:#4caf50;
class A highlight;
```
[!tip] All diagrams without
%% elk %%continue to use the default Mermaid renderer. You can mix ELK and non-ELK diagrams freely in the same vault.
License
For plugin developers
Search results and similarity scores are powered by semantic analysis of your plugin's README. If your plugin isn't appearing for searches you'd expect, try updating your README to clearly describe your plugin's purpose, features, and use cases.