Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
nomorechickennuggets opened this issue May 14, 2019 · 6 comments
Closed

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

nomorechickennuggets opened this issue May 14, 2019 · 6 comments
Assignees
@volkanunsal
Labels
Area: Development Status: Approved Is ready to be worked on Type: Enhancement New feature or request

Comments

@nomorechickennuggets
Copy link

nomorechickennuggets commented May 14, 2019 •
edited

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
Copy link
Member

GDFaber commented Jul 24, 2019

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
Copy link
Member

GDFaber commented Jul 24, 2019 •
edited

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

This was referenced Jul 24, 2019
Closed
Closed
@GDFaber GDFaber mentioned this issue Aug 11, 2019
Closed
@github-actions
Copy link

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.

@github-actions github-actions bot added the Type: New Shape Request for new shape label Sep 24, 2019
@volkanunsal
Copy link
Contributor

volkanunsal commented Sep 29, 2019 •
edited

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

@stale stale bot removed the Type: New Shape Request for new shape label Sep 29, 2019
@volkanunsal
Copy link
Contributor

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
Copy link
Member

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

@github-actions github-actions bot locked and limited conversation to collaborators Oct 22, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@volkanunsal volkanunsal

Labels
Area: Development Status: Approved Is ready to be worked on Type: Enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@volkanunsal @IOrlandoni @GDFaber @nomorechickennuggets