Diagram is too big

[pengyuwei]

Having started using mermaid, recently feels very good and it works well, but for me the diagram is a bit too big. Most of the time we just need a small diagram (maybe 1/4 of the current size is enough) . Hope to provide a way to zoom the diagram to change occupy screen space.

graph TD
    subgraph Research
    A(Test two var)-->B(test variables by statistical method))
    B-->C(correlation coefficient)
    end

[stevenzhli]

My current work around is to control graph size with markdown css. The selector is div.mermaid > svg.

However, I tried setting width:50% and it changes all graph sizes to the same width, which makes no sense because I have mixed large and small graphs and wish to adjust according to the embedded svg width.

Then I tried using transform:scale(0.5); transform-origin: top left; instead, and that properly shrinks embedded svg and moves it to the top, but does not change its container frame, and leaves large amount of empty spacing.

Still looking for a solution - any suggestion is appreciated.

[suika-kou]

I like this extension. And I have the same issue. Zoom in/out function expected. @mjbvz A simple solution: enable mouse wheel event for the container div of the SVG to change the container's size .

 onwheel=" javascript: 
    if (! event.ctrlKey) return true;

    event.preventDefault();
    var w = parseFloat(this.style.width); 
   this.style.width=(isNaN(w) ? 100 : w) * Math.pow(1.1, event.deltaY < 0 ? 1 : -1)+'%';
"

[rdkleine]

@suika-kou zoom function would be lovely.

[jan9won]

Another temporary solution. (in case your graph's direction is LR)

Add style block below, inside the markdown document itself (or to the custom css file).

1. You will get scrollable container.
2. You can change div.mermaid > svg > width as rem to zoom in and out consistently, regardless of preview window size.

<style>
div.mermaid {
    overflow-x: scroll;
    background: rgb(15, 15, 15);
}
div.mermaid > svg {
    width: 100rem; /* EDIT HERE */
    height: 50%;
    padding: 1em;
}
</style>

[mjbvz]

Duplicate of #125