diff --git a/content/posts/adding-mermaid-diagrams.md b/content/posts/adding-mermaid-diagrams.md index b513179..926277c 100644 --- a/content/posts/adding-mermaid-diagrams.md +++ b/content/posts/adding-mermaid-diagrams.md @@ -7,7 +7,26 @@ draft = true ## Mermaid Using [this help post](https://discourse.gohugo.io/t/correct-way-to-embed-mermaid-js/43491/11) I'll try and add mermaid diagrams to this blog. +Themes can also be set for the diagrams by adding in `%%{init: {'theme':'[theme.name]'}}%%` to the code block + +```mermaid +%%{init: {'theme':'forest'}}%% + +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
prevail! + John-->>Alice: Great! + John->>Bob: How about you? + Bob-->>John: Jolly good! +``` ```mermaid +%%{init: {'theme':'dark'}}%% + sequenceDiagram participant Alice participant Bob @@ -21,6 +40,8 @@ sequenceDiagram Bob-->>John: Jolly good! ``` + + ## GoAT diagrams [GoAT](https://github.com/bep/goat) diagrams are supported natively, which is great!