Description
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?
Metadata
Metadata
Assignees
Type
Projects
Milestone
Relationships
Development
Participants
Activity
GDFaber commentedon Jul 24, 2019
I am also looking for a solution on that topic. Is there a way to do that? AFAIK
useMaxWidthcannot be used with flowcharts, or am I missing something?GDFaber commentedon Jul 24, 2019
Possible Workaround
Apparently the svg's
max-widthattribute 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 commentedon Sep 24, 2019
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 commentedon Sep 29, 2019
It'd be great to address this. Not being able to use
useMaxWidthwith flowcharts is awful.volkanunsal commentedon Sep 30, 2019
I've added a PR for the use case I needed to address, i.e.
useMaxWidthin Flowcharts. Let me know if this might be useful.#964
IOrlandoni commentedon Oct 21, 2019
The issue was tackled on #964. Will close soon, if no objections.