Using Mermaid With Hugo
Main steps Create a layout Adding Mermaid to a content template Maintaining content and theme styles Rendering an example diagram Mermaid diagram This post outlines how to add Mermaid support with Hugo to render the diagram below, as I found the docs a bit lacking. When pasting, make sure to move the closing code fence to a new line to see the diagram ```mermaid sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts <br/>prevail! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!``` Creating a layout While Mermaid markdown diagrams aren’t supported natively by Hugo, it’s easy to add. ...