diagrams

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[];

  images.forEach((image) => {
    const encoded = image.src.substring(26);
    const decoded = atob(encoded); // atob deprecated?

    const imageWrapper = image.parentElement;

    imageWrapper.innerHTML = '';
    const newWrapper = document.createElement('div');
    newWrapper.setAttribute('class', 'mermaid');
    newWrapper.innerHTML = decoded;

    imageWrapper.append(newWrapper);
  });
};

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.

pfy.ch