Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
FuadEfendi opened this issue Jun 29, 2024 · 10 comments · Fixed by #11
Closed

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

FuadEfendi opened this issue Jun 29, 2024 · 10 comments · Fixed by #11

Comments

@FuadEfendi
Copy link

FuadEfendi commented Jun 29, 2024 •
edited
Loading

Here is scenario:

[PAGE]

example diagram

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

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

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>>
Loading
@FuadEfendi
Copy link
Author

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

@razonyang
Copy link
Member

razonyang commented Jun 30, 2024 •
edited
Loading

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
Copy link
Member

razonyang commented Jun 30, 2024 •
edited
Loading

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.

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

@FuadEfendi
Copy link
Author

FuadEfendi commented Jun 30, 2024 •
edited
Loading

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:

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

@razonyang razonyang mentioned this issue Jun 30, 2024
Merged
@razonyang
Copy link
Member

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

@FuadEfendi
Copy link
Author

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
Copy link
Author

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

I love "hbstack" ;)

@razonyang
Copy link
Member

razonyang commented Jul 1, 2024 •
edited
Loading

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
Copy link
Author

FuadEfendi commented Jul 1, 2024 •
edited
Loading

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)$
    }
Loading

Other than that... no any issues anymore!

@razonyang
Copy link
Member

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: htmlencode the Inner hugomods/mermaid
2 participants
@FuadEfendi @razonyang