README file from
GithubMermaid 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.