I have some docs that have multiple diagrams in them and having to paste style code over and over seems unnecessary. If I were able to put it into the CSS that gets used when building the HTML or PDF output, that'd be ideal.
I understand where to put in-line style directives for mermaid charts in MM...
```mermaid
%% graph code here
%% styles here
classDef SqlStyle fill:#AFC9F8,color:black,stroke:#0A337F;
But what I can't seem to find is any documentation on where to put this when I want to just include all of this style code in a base theme or something...
Does this documentation exist and I'm just missing it? (entirely possible)
re: Where to find / place custom CSS for mermaid? Rick Strahl
John Nelson
Jan 26, 2022 @ 01:35pm
It should go into the HTML header of the document.
To see how the preview does, open a document with Mermaid, then go to the preview, and use View Html.
You can see the mermaid script loaded and the initialization code in the header. It should look something like this:
<html>
<head>
...
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>
mermaid.initialize({startOnLoad: true});
</script>
...
</head>
<body>
...
Note, the second script block in the View HTML with the renderMermaid() function isn't necessary - that's for MM's page refresh logic when content in the page is updated and replaced.
This is documented in the documentation:
+++ Rick ---
re: Where to find / place custom CSS for mermaid? John Nelson
Rick Strahl
Jan 26, 2022 @ 05:47pm
OK, so I saw that documentation but I'm missing how it applies to me. Sorry for being thick...
Like, I'm in a markdown doc, and I add some mermaid code...
And then I want everything with the id "primary" to get one color and everything with the id "secondary" to get another color. Easy enough to add that inline
But it got me thinking, is there a way to put all that CSS for mermaid into a theme file like you can for the markdown theme...
with the express goal of having it always use that style when I save to HTML?
If I'm reading you right, I'd have to crack open the HTML each time I save and try to inject CSS into it in a certain spot?
The way MM lets you put a bunch of stuff in a theme folder and then puts all that stuff into the self-contained HTML file made me think that maybe I could do that with a mermaid CSS file too?