Mermaid: Adjusting size of fonts and arrow heads?

[jluttine]

I'm new to mermaid and not very familiar with JS/CSS. Any hints how I can adjust the size of the arrow heads and the text in nodes in flowcharts? The text and the arrow heads are both very tiny. Also, I would perhaps want to make the subgraph title smaller. I tried fiddling with the CSS file and changing some font sizes there but the results were always something other than I expected.

[jluttine]

I'm using htmlLabels:false because otherwise the font size of other content gets broken. And if it matters, I'm using mermaid.js inside reveal.js slides.

[jluttine]

With htmlLabels:true, text in nodes is just a little bit too large: the last letter isn't visible. Not sure how to fix that. Otherwise, these setting seems to have good looking sizes, so I'd prefer this.

[jluttine]

I'm using $(document).ready(...) to set up mermaid. It seems that .load doesn't exist (jQuery has deprecated it as far as I understand).

[jluttine]

Here's my project: https://github.com/jluttine/test-reveal-mermaid

Open test.html.

[jluttine]

Some findings:

• I wasn't able to configure some things from CSS because Reveal.js was overriding them, I suppose.

• Still, with htmlLabels:true and cloneCssStyles:false I'm getting almost perfect rendering. The node text boxes are just a bit too small: the last letter isn't visible. I guess it computes the width attribute incorrectly for some reason. I've noticed the advice to use load instead of ready but that doesn't work because load is apparently deprecated in jQuery. Any ideas?

[tylerlong]

May I ask: why do you want to change the default styles provided with mermaid? it's not perfect but most of time you don't need to change it: https://mermaidjs.github.io/mermaid-live-editor/#/edit/Z3JhcGggVEQKQVtDaHJpc3RtYXNdIC0tPnxHZXQgbW9uZXl8IEIoR28gc2hvcHBpbmcpCkIgLS0-IEN7TGV0IG1lIHRoaW5rfQpDIC0tPnxPbmV8IERbTGFwdG9wXQpDIC0tPnxUd298IEVbaVBob25lXQpDIC0tPnxUaHJlZXwgRltDYXJdCg

If you want to change CSS, you can use the Chrome developer tools to inspect the elements and their styles. I don't have much time at the moment, otherwise I will take a look.

[jluttine]

Actually, it turned out that I don't want to modify the default styles. I just want to make them work. This is most likely an issue in how Reveal.js and Mermaid.js work together.

I solved the actual CSS issue by removing the part from Reveal.js which did some overriding of Mermaid CSS.

Yet, with htmlLabels:true, the nodes are a bit too small to contain the text they have inside.

[tylerlong]

We have other issues which request to add CSS prefix to the mermaid styles so they won't be override. I think it's a good idea. I haven't started refactoring the CSS code yet. (just became a collaborator in April)

[tylerlong]

The CSS part has been rewritten. And now mermaid's CSS is scoped into its own ID and it won't pollute global CSS.

Please read https://mermaidjs.github.io/breakingChanges.html and https://mermaidjs.github.io/faq.html in case you want to use custom CSS in mermaid.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.