Example of how to style a Mermaid.js diagram?

[gkapfham]

Again, thanks for investing your time and effort in creating slidev! I have really enjoyed using it so far and I'm finding that I can implement most, if not all, of the features that I normally rely on in my slide decks. And, some of the features are better than what I can implement in LaTeX and easier to implement than what I've done before with, for instance, reveal.js or Spectacle.js.

Although I have use Mermaid in the past, I've only done so through its command-line interface. In that situation, I know how to define a technical diagram and its configuration to carefully control characteristics of the diagram, like the size of nodes and the layout of the diagram (i.e., top to bottom or left to right). I have followed the example from the documentation in an attempt to create and style a simple Mermaid technical diagram. For instance, I have this in my slides.md file:

mermaid {scale: 1.0}
graph TD

B[Text] --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]

I've also read the following documentation https://sli.dev/custom/config-mermaid.html and done my best to study the source code in node_modules/@slidev in order to find all of the JavaScript and TypeScript related to Mermaid. However, I'm still not able to figure out how to, for instance, decrease the font size of a node or to define custom colors for nodes or to specify left to right for the orientation of the figure.

Can you provide a few follow-on examples that show how to configure Mermaid? If you could clarify whether you make the configuration changes in the slides.md file or in the ./setup/mermaid.ts that would also be greatly appreciated. While I recognize that slidev is not specifically focused on Markdown diagrams, it would really help me get started if you could share a few more examples. Thanks in advance for your insights and the time needed to answer this question!

[antfu]

Maybe this could help
https://mermaid-js.github.io/mermaid/#/flowchart?id=styling-and-classes

[gkapfham]

Hello @antfu thanks for your response to this question and thanks for developing this framework for creating slides. I have used many different frameworks for creating slides and, to date, this is the one that I prefer the most for slides that feature the kinds of content I include in my teaching slides. Thanks also for your patience in waiting for my reply!

I initially wrote this question because of the fact that I found that the font size of the labels inside of boxes in a Mermaid diagram were always a little too small. This made me think that it was due to the fact that my styling for the diagram was not being applied correctly.
It turns out that whenever I view slidev-created slides on Arch Linux and Firefox this is always evident. However, if I switch to the use of Chrome then the Mermaid diagrams appear with the correct style.

Here is an example:

https://github.com/gkapfham/simple-slidev-sample

I have deployed the slides and you can see a specific example at:

https://simple-slidev-sample.netlify.app/11

This is what I see on my screen when I view the slides in Firefox:

However, when I view the slides in Chrome I see that the words are displayed correctly:

I'm not sure if this is a defect in my slides, the way in which I styled the Mermaid diagrams, or a problem with either my browser or my browser's implementation on Arch Linux. Needless to say, styling of the Mermaid diagrams does work correctly and, as long as I pick the correct browser, I see results like I would have expected.

Are there any follow-on steps that you would like me to take in order to more fully answer this question?

[gkapfham]

Thanks again for creating this presentation framework @antfu! Here is an example of a presentation that I recently created using slidev:

https://github.com/gkapfham/pyohio2021-presentation

https://pyohio2021-presentation.netlify.app/

Note that for the aforementioned talk I did not use diagrams in Mermaid because I could not see the best way to ensure that they looked correct for all browser and operating system combinations.