compose icon indicating copy to clipboard operation
compose copied to clipboard

Weird Mermaid requirement for rendering

Open brendan-mccoy opened this issue 3 years ago • 7 comments

I have checked all the prerequisites below and I'm yet experiencing a problem

  • [x] Read the README.md
  • [x] Have the extended version of Hugo installed
  • [x] Used the exampleSite's config.toml as a reference

Describe the bug

When I try to use mermaid, it only works if the string "mermaid" is in the document outside of tags.

+++
title="Mermaid Test"
+++ 

mermaid
{{< mermaid >}}
pie
  title Key elements in Product X
  "Calcium" : 42.96
  "Potassium" : 50.05
  "Magnesium" : 10.01
  "Iron" :  5
{{< /mermaid >}}

The above works.

+++
title="Mermaid Test"
+++ 

{{< mermaid >}}
pie
  title Key elements in Product X
  "Calcium" : 42.96
  "Potassium" : 50.05
  "Magnesium" : 10.01
  "Iron" :  5
{{< /mermaid >}}

The above doesn't work, and just renders the following text under the title:

pie title Key elements in Product X "Calcium" : 42.96 "Potassium" : 50.05 "Magnesium" : 10.01 "Iron" : 5

I can put the string "mermaid" anywhere and it works, but it doesn't seem this is intentional.

Desktop (please complete the following information):

  • OS: Windows 10
  • Browser: Microsoft Edge Version 91.0.864.37 (Official build) (64-bit)

brendan-mccoy avatar Jun 01 '21 20:06 brendan-mccoy

@brendan-mccoy, thank you for bringing this to my attention. I will look into it within the next day.

onweru avatar Jun 01 '21 21:06 onweru

@brendan-mccoy, this should work correctly now.

onweru avatar Jun 02 '21 16:06 onweru

I'm having the same issue. Mermaid won't render unless I add "mermaid" somewhere in the text. Was it fixed?

victorpierredev avatar Oct 05 '21 13:10 victorpierredev

@vpakg, are you using the mermaid shortcode?

onweru avatar Oct 05 '21 16:10 onweru

Hi @onweru, thanks for getting back to me. Here is what my Markdown looks like:

---
title: "Mermaid Diagram example"
weight: 1
---
## Flowchart:

{{< mermaid >}}
flowchart TB
  c1-->a2
  subgraph one
  a1-->a2
  end
  subgraph two
  b1-->b2
  end
  subgraph three
  c1-->c2
  end
  one --> two
  three --> two
  two --> c2
{{< /mermaid >}}

this won't render, but if I add the word mermaid anywhere else in the file, it renders properly.

victorpierredev avatar Oct 05 '21 16:10 victorpierredev

@vpakg, I took your code as is and it worked alright. I'm on macos 12, using hugo v0.88.1+extended darwin/arm64. You?

onweru avatar Oct 06 '21 12:10 onweru

Hi @onweru I'm in the exact same version as you for Hugo: hugo v0.88.1+extended darwin/amd64 OS: MacOs 11.6 Darwin Kernel Version 20.6.0

victorpierredev avatar Oct 07 '21 18:10 victorpierredev