example diagram

[BACKTICKS]mermaid
classDiagram
    direction LR
    class Serializable {
        <<interface>>
    }
[/BACKTICKS]

classDiagram
    direction LR
    class Serializable {
        <<interface>>
    }

Rendered page shows error message; check HTML, empty line removed before </pre> tag. But, when I add comment, it works:

[BACKTICKS]mermaid
classDiagram
    direction LR
    class Serializable {
        <<interface>>
    }
%% This whole line is a comment classDiagram class Shape <<interface>>
[/BACKTICKS]

classDiagram
    direction LR
    class Serializable {
        <<interface>>
    }
%% This whole line is a comment classDiagram class Shape <<interface>>

FuadEfendi commented 4 months ago

Note that GitHub works fine ;) But Hugo will show error message for 1st diagram

razonyang commented 4 months ago

This seems not related to the module, this issue also appears on example with pure HTML.

<html>
  <body>
    Here is one mermaid diagram:
    <pre class="mermaid">
            graph TD 
            A[Client] --> B[Load Balancer] 
            B --> C[Server1] 
 B --> D[Server22]
    </pre>

    And here is another:
    <pre class="mermaid">
            graph TD 
            A[Client] -->|tcp_123| B
            B(Load Balancer) 
            B -->|tcp_456| C[Server1] 
            B -->|tcp_456| D[Server2]
    </pre>

   <pre class="mermaid">
           classDiagram
           direction LR
           class Serializable {
                   <<interface>>
           }
   </pre>

   <pre class="mermaid">
           classDiagram
    class BankAccount
    BankAccount : +String owner
    BankAccount : +Bigdecimal balance
    BankAccount : +deposit(amount)
    BankAccount : +withdrawal(amount)
   </pre>

    <script type="module">
      import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
      mermaid.initialize({ startOnLoad: true });
    </script>
  </body>
</html>

razonyang commented 4 months ago

You may need to request help from https://github.com/mermaid-js/mermaid/issues with the example (pure HTML) above.

Btw, you can use ```` to wrap code block, the inner will be shown as it is without parsing/rendering.

classDiagram
    direction LR
    class Serializable {
        <<interface>>
    }

FuadEfendi commented 4 months ago

Thanks Razon,

Ok, I'll report to them, interestingly GitHub doesn't have this issue. Adding %% line fixes the issue and diagram shown correctly:

```mermaid
classDiagram
    class WashingMachine {
        +MachineState currentState
        +startWashing() : void
        +stopWashing() : void
    }
    class MachineState {
        <<Enumeration>> 
        ON
        OFF
    }
    WashingMachine --> MachineState
    %%


The same diagram without `%%` shown Ok in GitHub, I am wondering meybe they use different version:

```mermaid
classDiagram
    class WashingMachine {
        +MachineState currentState
        +startWashing() : void
        +stopWashing() : void
    }
    class MachineState {
        <<Enumeration>> 
        ON
        OFF
    }
    WashingMachine --> MachineState

razonyang commented 4 months ago

I noticed that the diagram should be escaped, otherwise unable to be parsed, should be fixed since v0.1.2

FuadEfendi commented 4 months ago

After upgrade, much better, but I just caught this one, without adding %% on top it doesn't work; generated HTML doesn't have line break, maybe that's why:

<pre class="mermaid">classDiagram
    class WebDriver {
    }

When I add "comment" %% it works:

```mermaid
%%
classDiagram
    class WebDriver {
    }

    class WebElement {
    }

    class LoginPage {
        +WebElement usernameField
        +WebElement passwordField
        +WebElement loginButton
    }

    class LoginTest {
        +WebDriver driver
        +void testLogin()
    }

    WebDriver <|-- LoginTest
    WebElement <|-- LoginPage
    WebDriver <|-- LoginPage

FuadEfendi commented 4 months ago

This is website I am working, https://softwarepatternslexicon.com/

I love "hbstack" ;)

razonyang commented 4 months ago

Seems the JS library vary relys on diagrams formats (tabs), have to format the diagram in some way.

I made a new patch and drafted a new release v0.1.3, it works on your cases, but I'm not sure if it's perfect for other diagrams as well, if you found any diagrams not working, please provide, I will add it on https://hugomods.com/docs/content/mermaid/ to test this module.

FuadEfendi commented 4 months ago

Thanks; I found workaround at Mermaid forum, documenting here: use #44; instead of , (comma), and generics will work:

classDiagram
    class CurryingExample {
        +Function~Integer#44;Function~Integer#44;Function~Integer#44;Integer~~~ addThree()$
        +void main(String[] args)$
    }

Other than that... no any issues anymore!

razonyang commented 4 months ago

You're welcome, btw, there is another approach to generate diagram without JavaScript, please check out Kroki docs if you're interested in.

hugomods / mermaid

"pre" tag removes empty lines; broken diagram #10

example diagram