Mermaid graphs not rendering

[ericcsinger]

Prerequisites

• I have searched for duplicate or closed issues
• I have searched for relatived questions
• I have read documentations

Describe the issue

Hi,

As a newbie, I sure had a tough time revers engineering / poking around how to get mermaid rendered. Even when looking at your diagram example, it didn't stand out to me, what I needed to do. Or at least not entirely. I finally figured it out, after a bit of trial and error, and combing through your diagram example themes\hugo-theme-bootstrap\exampleSite\content\posts\diagram\index.md.

Ultimately it was really easy, once I figured out the missing front matter.

I wanted to do a pull request to suggest a page update on your diagram to help a newbie like myself figure it out. However, I've never done a pull request (ever) and figured rather than messing up something, I'd just put the small suggested addition for you below.

## Instructions

### Front Matter (Page)

You must add the following key / value pair to your front matter.  This tells the page you have a mermaid graph to render.  If you do not add this to your front matter, your mermaid diagram(s) will not render.

```yaml
diagram: true

diagram = true

"diagram": true

Diagram wrapper

Unlike standard markdown hints for mermaid charts, which typically look like this:

```mermaid
graph LR
  A --> B

You need to wrap your mermaid code so it looks like this.

```text
{{< mermaid >}}
graph LR
    A --> B
{{< /mermaid >}}

Feel free to ignore or change any verbiage as you see fit.  

### Steps to reproduce

see my description, nothing to reproduce.

### Expected behavior

Making instructions a little clearer.

### What operating system(s) are you seeing the problem on?

Windows

### What browser(s) are you seeing the problem on?

Chrome

### What version of theme are you using?

v0.8xx

### What version of Hugo are you using?

doesn't matter

### What version of Node.js are you using?

doesn't matter

### What version of Git are you using?

doesn't matter

### Additional context

_No response_

[razonyang]

Sorry for the inconvenience, the docs not detail enough. I updated the Diagram Guide in detail.
BTW, you could wrap the diagram with other shortcode, such as align the diagram to center:

{{% text/align-center %}}
{{< mermaid >}}
YOUR DIAGRAM INSTRUCTIONS
{{< /mermaid >}}
{{% /text/align-center %}}

Thanks for your feedback.

[ericcsinger]

Thanks for putting all this together :) Just wanted to help!

…

Sent from my iPhone

On Sep 18, 2022, at 11:50, Razon Yang ***@***.***> wrote:  Sorry for the inconvenience, the docs not detail enough. I updated the Diagram Guide in detail. BTW, you could wrap the diagram with other shortcode, such as align the diagram to center: {{% text/align-center %}} {{< mermaid >}} YOUR DIAGRAM INSTRUCTIONS {{< /mermaid >}} {{% /text/align-center %}} Thanks for your feedback. — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.