The Diagrams present on this site are written in Mermaid, I use Pandoc to compile the site from Markdown to HTML. Using Mermaid Filter I’m able to extend pandoc to generate mermaid diagrams.
# This scripts file input/outputs are usually variables
pandoc content/file.md -t html -F mermaid-filter --wrap=none --template template/wiki.html > out/file.html
However, Mermaid Filter places an image tag with the SVG as Base64 in the source. This is fine for most people, but I need it as an inline SVG to apply my sites theming.
A Mermaid diagram in my markdown looks similar to this:
```{.mermaid format=svg background=transparent #mermaid}
flowchart LR
Foo --> Bar
```
.mermaid
is used by Mermaid Filter to detect mermaid diagrams, this is then followed by options. I then attach the ID of #mermaid
to the wrapping div.
The following script is used at runtime to convert the Base64 svg into an inline SVG:
export const svgDiagrams = () => {
const images = [
...document.querySelectorAll('#mermaid'),
as HTMLImageElement[];
]
.forEach((image) => {
imagesconst encoded = image.src.substring(26);
const decoded = atob(encoded); // atob deprecated?
const imageWrapper = image.parentElement;
.innerHTML = '';
imageWrapperconst newWrapper = document.createElement('div');
.setAttribute('class', 'mermaid');
newWrapper.innerHTML = decoded;
newWrapper
.append(newWrapper);
imageWrapper;
}); }
By default, the following SCSS is applied:
img {&#mermaid {
opacity: 0;
} }
This SCSS will hide the default mermaid image which is quickly replaced by the SVG. This stops any flicker/flash-bangs, since by default the diagram is light themed.
I then use my standard theming practice to style the inline SVG.