Configure flowchart to auto-resize so that nodes are always the same size.

I’ve tried playing with various useMaxWidth and HTML/css settings, however I’m unable to achieve the following behavior:

Given a #mermaid container sitting within an auto-width div, I would like to render flow charts so that the nodes are always the same size regardless of chart layout and regardless of the number of nodes.

In other words, I would like to force the flowchart to be as large or as small as it needs to be in order to avoid shrinking or expanding nodes from their default size.

I would then expect to have to scroll/pan for complex charts with many nodes.

I can achieve this manually by setting the width of the #mermaid container to a large value whenever the chart shrinks, however I would prefer an automatic solution.

How can this be achieved? Is the proper solution to use a very large fixed width for the #mermaid container while setting useMaxWidth to false? If so, what if I exceed that max-width, and what if I only want to scroll when there is overflow?

[GDFaber]

Possible Workaround

Apparently the svg’s max-width attribute can be used to set the container width directly after creating the flowchart. I’m using the following workaround which works for me (mermaid 8.2.1):

$('#container').html(graphDefinition).removeAttr('data-processed'); mermaid.init(undefined, $('#container')); $('#container').width($('#container svg').css('max-width'));

[IOrlandoni]

The issue was tackled on #964. Will close soon, if no objections.