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

[nomorechickennuggets]

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]

I am also looking for a solution on that topic. Is there a way to do that? AFAIK useMaxWidth cannot be used with flowcharts, or am I missing something?

[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'));

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If you are still interested in it, and it is still relevant, you can comment or remove the label to revive it.

[volkanunsal]

It'd be great to address this. Not being able to use useMaxWidth with flowcharts is awful.

[volkanunsal]

I've added a PR for the use case I needed to address, i.e. useMaxWidth in Flowcharts. Let me know if this might be useful.

#964

[IOrlandoni]

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