Box in mermaid sequence in markdown does not render

support
,
1

Diagrams | Hugo provides a sample sequence diagram example for markdown.
I have a similar sequence diagram captured in a markdown. The difference is that I have encapsulating box for participants. This causes an error in rendering the sequence diagram. To ensure syntactic correctness, I am able to render it in VSCode.

Sample code -

```mermaid
sequenceDiagram
    box rgb(255, 244, 255) Setup
        participant ps as Server
        participant pc as Controller
    end
    box LightYellow Target
        participant ss as Setup Service
    end
autonumber
    Note over ps,ss: Phase1 :: Procure Credentials
    pc->>ss: Test request
    ss->>pc: Response :: Test Response
```

VSCode preview
VSCode preview1063×537 58.8 KB

vsCode renders well.

2

Please provide your failing example.

3

Error in Hugo
Error in Hugo1005×527 40 KB

Hugo cannot render mermaid.

4

I am unable to reproduce the problem as described. Try it:

git clone --single-branch -b hugo-forum-topic-43967 https://github.com/jmooring/hugo-testing hugo-forum-topic-43967
cd hugo-forum-topic-43967
hugo server
5

You are using an old version of mermaid.js (v9.1.3). The problem you describe is fixed with v9.4.0 and later. The current version is v10.1.0.

The sample code in the documentation pulls in the latest release.

6

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.