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

Can't Zoom the flowchart ? #399

Closed
Jiayi-Liao opened this issue Oct 14, 2016 · 7 comments
Closed

Can't Zoom the flowchart ? #399

Jiayi-Liao opened this issue Oct 14, 2016 · 7 comments

Comments

@Jiayi-Liao
Copy link

I can't zoom the flowchart to see them clearly when the flowchart fills the screen.It's very hard to recognize them because there are too many nodes.
Any way to fix it ?
@AndrewFeeney
Copy link

You can change the size of the container with CSS. This will allow the browser's zoom and scrollbar functionality to work.

@Jiayi-Liao
Copy link
Author

@WebSpanner Thanks~ I've waited for a very long time. Haha.

@fayaz-issak-bbc
Copy link

You can change the size of the container with CSS. This will allow the browser's zoom and scrollbar functionality to work.

Please can you show example how to do this?

@AndrewFeeney
Copy link

Suppose your mermaid diagram is inside a <div> element with an id of mermaid like below:

<div id="mermaid">
    graph myGraph
        ...
</div>

Then in your css file add the following:

#mermaid {
    /** Set this value to whatever is appropriate for your use case, or use the height property instead **/
    width: 800px; 
}

You could also add the above code to your .html file enclosed in <style></style> tags in either the <head></head> tag or the <body></body> tag.

I hope that helps.

@fayaz-issak-bbc
Copy link

Cant seem to get it working.. is the viewbox not going to interfere with this?

@AndrewFeeney
Copy link

I don’t know sorry. Could you share a code example on code pen or something?

@GDFaber
Copy link
Member

GDFaber commented Aug 11, 2019

I don't know if I understood correctly, perhaps the workaround mentioned in #838 (comment) can solve your problem?

mgenereu pushed a commit to mgenereu/mermaid that referenced this issue Jun 25, 2022
@sidharthv96
Merge pull request mermaid-js#399 from mermaid-js/dependabot/npm_and_…
47f8c6a 
…yarn/develop/cypress-8.4.1

chore(deps-dev): bump cypress from 8.4.0 to 8.4.1
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@GDFaber @AndrewFeeney @Jiayi-Liao @fayaz-issak-bbc