Is there a way to increase the number of maxEdges for Mermaid in Obsidian?

Help
1

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.

2

https://graphviz.org/. There’s even a plugin for obsidian integration.

3

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>
4

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.