New Mermaid Test
Table of Contents
Using Mermaid Markdown Syntax in Hugo #
I am trying out the newest version of Mermaid, and also a new way to set it up
within Hugo. Instead of the shortcode I setup from the previous article, I have
created a code block render hook, as found in the Hugo documentation on the
Hugo Website.
I have written a markdown code block of type Mermaid, to render the diagram
found below…
I have abandoned the code block render of Mermaid and gone back to shortcodes. The code block render had some type of incompatibility with my previous Hugo theme. I have changed Hugo themes and the following Mermaid diagram was rendered via shotcode
Sequence Diagram #
---
config:
theme: 'base'
themeVariables:
darkMode: true
background: '#f4f4f4'
primaryColor: '#ccc4dd'
primaryTextColor: '#aa2825'
---
sequenceDiagram
actor Alice
participant Bob
actor John
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts
prevail! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!
prevail! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!