Mermaid

[Shloimele]

I have a mermaid diagram in a document. I got it to zoom and pan by adding mermaidZoom=true into the [params] section of my hugo.toml file.

I’d like to do two more things with mermaid:

1. Change the background color of the boxes (“primaryColor”?)
2. Give greater height to the diagram so when zoomed in the reader doesn’t lose half the node text!
   I’m guessing the color is a mermaidInitialize value, but where and how to put, I can’t figure out.

No idea about the diagram height. Its really annoying that the height is determined automatically when mermaid fits the entire width of your diagram (in this case a flowchart - left-to-right) within the width of the page. The longer the flow, the thinner the letter-box window becomes. Strange behavior!

Any ideas anyone?

[McShelby]

1. This can be done for many of the different diagram types. Please consult the Mermaid documentation

2. You may have success by tinkering around with the CSS of your specific diagramm.

   Style it in the browser dev tools first until satisfied. Afterwards, set the Hugo option renderer.unsafe=true in your hugo.toml and add the <style> element into your .md file.

[Shloimele]

Thanks. I've sorted the color definitions but so far, nothing on the diagram height.