I am using Mermaid tree diagrams to visualize the hierarchical relationships between mods and their dependencies for my next Skyrim playthrough. I’m doing this so that I can plan the order in which I install all my mods. However, I’m running into a “Error parsing Mermaid diagram! Too many edges.” This seems to be because Obsidian has a limit to how many Mermaid edges it can handle. I did some digging and found that the Mermaid Live Editor has an option to change the number of maxEdges up to 2000. However, I’d like to keep everything in Obsidian if possible. So is there a way to configure the number of maxEdges in Obsidian?
If not, is there an alternative software that can handle thousands of edges? I don’t mind running it on my computer even if it takes several minutes to render the diagram.
I ended up using a pretty janky workaround. Unfortunately, I can’t use the native editor in Obsidian to write my Mermaid code. Instead, I used Chat GPT to write me an HTML script that renders Mermaid Code and allows me to freely navigate the rendered diagram. I can manually set the maximum edges, and it works flawlessly. The only downside is that I can’t edit the html file in Obsidian and have to resort to using notepad++. Here’s the code for anyone interested. Again, I didn’t write the code myself bc I have very little experience programming. The following code was AI generated.
<!DOCTYPE html>
<html>
<head>
<style>
/* Style to make the mermaid container scrollable */
.mermaid-container {
overflow: auto;
width: 100%;
height: 100vh;
}
/* Style for the mermaid diagram */
.mermaid {
transform-origin: 0 0; /* Set transform origin to the top left corner */
transition: transform 0.25s ease; /* Smooth transition for zooming */
}
</style>
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
// Set the maxEdges configuration
mermaid.initialize({
maxTextSize: 150000,
maxEdges: 4000 // Increase this number to the required value
});
// Function to handle zooming and scrolling
function handleScroll(event) {
event.preventDefault();
const mermaidContainer = document.querySelector('.mermaid-container');
const mermaidElement = document.querySelector('.mermaid');
if (event.ctrlKey) {
// Zoom in and out with control key
let scale = Number(mermaidElement.getAttribute('data-scale')) || 1;
const zoomFactor = 0.1;
if (event.deltaY < 0) {
scale += zoomFactor; // Zoom in
} else {
scale -= zoomFactor; // Zoom out
if (scale < zoomFactor) scale = zoomFactor; // Prevent zooming out too far
}
mermaidElement.style.transform = `scale(${scale})`;
mermaidElement.setAttribute('data-scale', scale);
} else if (event.shiftKey) {
// Scroll left and right with shift key
mermaidContainer.scrollLeft += event.deltaY;
} else {
// Scroll up and down
mermaidContainer.scrollTop += event.deltaY;
}
}
// Add event listener for scrolling
document.addEventListener('wheel', handleScroll, { passive: false });
</script>
</head>
<body>
<div class="mermaid-container">
<div class="mermaid">
flowchart LR
%%{init:{'flowchart':{'htmlLabels': 'false', 'nodeSpacing': 50, 'rankSpacing': 100}}}%%
A --> B;
B --> C;
B --> D;
C --> D;
</div>
</div>
</body>
</html>