Support Mermaid diagram markup in Hugo documentation

[WhitWaldo]

Thank you for helping make the Dapr documentation better!

Please follow this checklist before submitting:

• Commits are signed with Developer Certificate of Origin (DCO - learn more)
• Read the contribution guide
• Commands include options for Linux, MacOS, and Windows within tabpane
• New file and folder names are globally unique
• Page references use shortcodes instead of markdown or URL links
• Images use HTML style and have alternative text
• Places where multiple code/command options are given have tabpane

In addition, please fill out the following to help reviewers understand this pull request:

Description

It's difficult to maintain flowcharts as images. Everyone has different image editing software, not everyone has the same fonts, colors look different on different monitors and it's a little annoying to maintain references to static content (and handle scaling well). Further, when a tweak needs to be made, it's a not insignificant effort to make the change.

As I'm looking to build out more of the protocol-level documentation per this other PR, I would like to take a stab at implementing the workflow diagrams using Mermaid instead. It appears to be sufficiently flexible to accommodate our use cases and with time we can establish a more consistent styling schema so colors are uniform, addressing the numerous shortcomings listed above.

This PR follows the guidance on Hugo's website for adding support for Mermaid by providing a codeblock render hook and modifying the HTML template to include the mermaid script only if the page displays a Mermaid diagram (that .Page.Store.Set "hasMermaid" true bit).

That should enable us to readily add graphs not unlike the following:

graph LR
    Client[Workflow Client] -- Management API --> Sidecar[Dapr Sidecar Engine]
    Sidecar -- Task Hub Protocol --> Worker[Workflow Worker SDK]
    Sidecar -- State Store --> Actors[Dapr Actors Backend]

Loading

via:

  ```mermaid
graph LR
    Client[Workflow Client] -- Management API --> Sidecar[Dapr Sidecar Engine]
    Sidecar -- Task Hub Protocol --> Worker[Workflow Worker SDK]
    Sidecar -- State Store --> Actors[Dapr Actors Backend]
```

Issue reference

[marcduiker]

I'm in favor of this because I think this will enable more people to add diagrams easily, which will improve the docs. And having diagrams part of the 'code' is indeed the way to go IMO.

We should do some expectation management though. Quite a few diagrams (the larger/complexer ones) will probably never be moved to mermaid, so we should not expect to get rid of the Google Slides with all the diagrams in the short term.

We can definitely style these mermaid diagrams to be close to the existing style.

[marcduiker]

LGTM

We do need a style guide as part of the docs when we start using this. We can copy a lot of the guide information from the Google Slides.

[msfussell]

@WhitWaldo @marcduiker - We do need to maintain some level of Dapr branding and colors. The general example of the mermaid diagram is bland. Happy to approved this though