Class diagrams broken with official Mermaid, and shown fine at GitHub. #6075

FuadEfendi · 2024-11-23T16:08:05Z

Description

This class diagram will be shown fine here at Github, and will fail in minimalistic plain HTML:

classDiagram
    AbstractFactory <|.. ConcreteFactory1
    AbstractFactory <|.. ConcreteFactory2

    AbstractProductA <|-- ProductA1
    AbstractProductA <|-- ProductA2
    AbstractProductB <|-- ProductB1
    AbstractProductB <|-- ProductB2

    Client --> AbstractFactory
    Client --> AbstractProductA
    Client --> AbstractProductB

    class AbstractFactory {
        +CreateProductA() : AbstractProductA
        +CreateProductB() : AbstractProductB
    }

    class ConcreteFactory1 {
        +CreateProductA() : ProductA1
        +CreateProductB() : ProductB1
    }

    class ConcreteFactory2 {
        +CreateProductA() : ProductA2
        +CreateProductB() : ProductB2
    }

    class AbstractProductA {
        <<interface>>
    }

    class AbstractProductB {
        <<interface>>
    }

    class ProductA1
    class ProductA2
    class ProductB1
    class ProductB2

Steps to reproduce

This is plain minimalistic HTML. Save it in filesystem and open in the browser: you will see error icon.


<!DOCTYPE html>
<html lang="en" charset="utf-8">

</head>
<body>
	
<h2 id="class-diagram-with--createproducta--producta1">Class Diagram with <code> +CreateProductA() : ProductA1</code></h2>

<br/>

<pre class="mermaid">classDiagram
    AbstractFactory <|.. ConcreteFactory1
    AbstractFactory <|.. ConcreteFactory2

    AbstractProductA <|-- ProductA1
    AbstractProductA <|-- ProductA2
    AbstractProductB <|-- ProductB1
    AbstractProductB <|-- ProductB2

    Client --> AbstractFactory
    Client --> AbstractProductA
    Client --> AbstractProductB

    class AbstractFactory {
        +CreateProductA() : AbstractProductA
        +CreateProductB() : AbstractProductB
    }

    class ConcreteFactory1 {
        +CreateProductA() : ProductA1
        +CreateProductB() : ProductB1
    }

    class ConcreteFactory2 {
        +CreateProductA() : ProductA2
        +CreateProductB() : ProductB2
    }

    class AbstractProductA {
        <<interface>>
    }

    class AbstractProductB {
        <<interface>>
    }

    class ProductA1
    class ProductA2
    class ProductB1
    class ProductB2
</pre>
  <script type="module">
    import mermaid from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.esm.min.mjs';
    mermaid.initialize({ startOnLoad: true });
  </script>
</body>
</html>

Screenshots

No response

Code Sample

No response

Setup

Mermaid version:
Browser and Version: [Chrome, Edge, Firefox]

Additional Context

No response

The text was updated successfully, but these errors were encountered:

FuadEfendi · 2024-11-23T16:11:28Z

If I replace ( with #40; and ) with #41; it will work; however, it is just workaround. Why it works at GitHub, do GitHub use different patched version?

FuadEfendi · 2024-11-23T16:24:16Z

Note that this diagram doesn't fail in live editor,
https://mermaid.live/edit#pako:eNqVlNFqgzAUhl9FztXGVDQadVIKtdvuBoPdDW8yTVtBkxIjrOt896VOZVq7uoBoTr6c_89J4hESnlIIIclJWT5kZCtIETNNtdV7KQVJ5JN6uDhoiy_T1NacJYJK2gbt-SiK2RB-ETytErlStGFoXc-eA6FJKBpAkT0H6l2t84wyqRnGcryai-Odm2tA1Gk0NT4r1vFn8NTu1oISSbvEN7daeEHtnI6m6OiHrocOxpt4zcJoby5pjwr_tyiaK4rmiaJJ0bNj9Et0sciYpGJDErpczpkd_W_2qGrDIJoIRlPkaWGgQ0FFQbJUXdTGQwxyRwsaQ6g-U7ohVS5jiFmtUFJJ_npgCYQbkpdUB8Gr7a7vVftU1bC96X2Uppnalef2X3B66bAnDMIjfECIAzO49yzHxijAroddHQ4QIscyfQ8hy7ctx3F9y611-ORcZbVNJ_AchF0_wNjxfdRke2vGpKh6G4-NbOui_gZqZnSj

However, this minimalistic HTML fails, and I followed official guide found at https://mermaid.js.org/intro/getting-started.html#_4-calling-the-mermaid-javascript-api

jmooring · 2024-11-23T17:34:34Z

The error is triggered by this bit:

class AbstractProductA {
    <<interface>>
}

class AbstractProductB {
    <<interface>>
}

The HTML above is invalid. You can fix it with:

class AbstractProductA {
    &lt;&lt;interface&gt;&gt;
}

class AbstractProductB {
    &lt;&lt;interface&gt;&gt;
}

FuadEfendi · 2024-11-23T18:29:03Z

Yes, invalid, but GitHub handles that somehow... I tried to remove <<interface>> in plain HTML file and it works.

This is another "workaround" to make it work:

   class AbstractProductA {
        <~interface>~
    }

    class AbstractProductB {
        <~interface>~
    }

See: - https://discourse.gohugo.io/t/52506/10 - mermaid-js/mermaid#6075

FuadEfendi · 2024-11-23T18:32:28Z

Ok, if we open source of this GitHub page, it escapes:


class ConcreteFactory2 {
--
  | +CreateProductA() : ProductA2
  | +CreateProductB() : ProductB2
  | }
  |  
  | class AbstractProductA {
  | &lt;&lt;interface&gt;&gt;
  | }
  |  
  | class AbstractProductB {
  | &lt;&lt;interface&gt;&gt;
  | }

jgreywolf · 2024-11-23T22:11:54Z

This is odd, since this has "always" worked in the past. The "hack" fix of <~interface>~ is less than ideal given that the ~ character is used for declaring generic types (I am working on fixing this).

FuadEfendi · 2024-11-23T22:38:30Z

This is another "inconvenience":

graph TD;
    A[Gross Domestic Product (GDP)] --> B[Consumer Spending (C)];
    A --> C[Investment (I)];
    A --> D[Government Spending (G)];
    A --> E[Net Exports (NX)];
    E --> F[Exports (X)];
    E --> G[Imports (M)];

However, if I wrap ["Investment (I)"], or if I use #40; and #41; instead of brackets, it won't crash:

graph TD;
    A["Gross Domestic Product (GDP)"] --> B["Consumer Spending (C)"];
    A --> C["Investment (I)"];
    A --> D["Government Spending (G)"];
    A --> E["Net Exports (NX)"];
    E --> F["Exports (X)"];
    E --> G["Imports (M)"];

```mermaid
graph TD;
    A["Gross Domestic Product (GDP)"] --> B["Consumer Spending (C)"];
    A --> C["Investment (I)"];
    A --> D["Government Spending (G)"];
    A --> E["Net Exports (NX)"];
    E --> F["Exports (X)"];
    E --> G["Imports (M)"];
```

jgreywolf · 2024-11-23T23:13:43Z

Both flowcharts and class diagrams do not allow spaces in the "id" portion of the definition. If you need to show spaces in the diagram, you can add a label (like you have above).

https://mermaid.js.org/syntax/flowchart.html#a-node-with-text
https://mermaid.js.org/syntax/classDiagram.html#class-labels

FuadEfendi · 2024-11-24T02:05:58Z

Thanks for working on it; what is "id portion of definition", can you provide example? With class diagram, if I just replace E --> G[Imports (M)]; onto either E --> G[Imports #40;M#41;]; or E --> G["Imports (M)"]; it will fix the issue, although it looks like "workaround".

I believe "id" in C[Investment (I)] is "C", right?

FuadEfendi · 2024-11-25T03:07:09Z

graph TD;
    A["Tuple: {:ok, #34;Success#34;, 200}"]
    A --> B[:ok]
    A --> C["Success"]
    A --> D[200]

Note: quotes in C["Success"] are not rendered on chart. Maybe we can use some escaping for embedded quotes?

```mermaid
graph TD;
    A["Tuple: {:ok, #34;Success#34;, 200}"]
    A --> B[:ok]
    A --> C["Success"]
    A --> D[200]
```

graph TD;
    A["Map: %{#34;name#34; => #34;Alice#34;, #34;age#34; => 30, #34;city#34; => #34;New York#34;}"]
    A --> B[#34;name#34; => #34;Alice#34;]
    A --> C[#34;age#34; => 30]
    A --> D[#34;city#34; => #34;New York#34;]

```mermaid
graph TD;
    A["Map: %{#34;name#34; => #34;Alice#34;, #34;age#34; => 30, #34;city#34; => #34;New York#34;}"]
    A --> B[#34;name#34; => #34;Alice#34;]
    A --> C[#34;age#34; => 30]
    A --> D[#34;city#34; => #34;New York#34;]
```

jgreywolf · 2024-11-25T17:58:26Z

Thanks for working on it; what is "id portion of definition", can you provide example? With class diagram, if I just replace E --> G[Imports (M)]; onto either E --> G[Imports #40;M#41;]; or E --> G["Imports (M)"]; it will fix the issue, although it looks like "workaround".

I believe "id" in C[Investment (I)] is "C", right?

Yes

FuadEfendi added Status: Triage Needs to be verified, categorized, etc Type: Bug / Error Something isn't working or is incorrect labels Nov 23, 2024

jmooring added a commit to jmooring/hugo-docs that referenced this issue Nov 23, 2024

Revise code block render hook for Mermaid diagrams

95a9628

See: - https://discourse.gohugo.io/t/52506/10 - mermaid-js/mermaid#6075

jmooring mentioned this issue Nov 23, 2024

Revise code block render hook for Mermaid diagrams gohugoio/hugoDocs#2779

Merged

jgreywolf self-assigned this Nov 23, 2024

jgreywolf added Graph: Class Status: In progress and removed Status: Triage Needs to be verified, categorized, etc labels Nov 23, 2024

FuadEfendi mentioned this issue Nov 24, 2024

Broken diagrams (due to broken HTML) hugomods/mermaid#16

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Class diagrams broken with official Mermaid, and shown fine at GitHub. #6075

Class diagrams broken with official Mermaid, and shown fine at GitHub. #6075

FuadEfendi commented Nov 23, 2024

FuadEfendi commented Nov 23, 2024

FuadEfendi commented Nov 23, 2024

jmooring commented Nov 23, 2024 •

edited

Loading

FuadEfendi commented Nov 23, 2024

FuadEfendi commented Nov 23, 2024

jgreywolf commented Nov 23, 2024

FuadEfendi commented Nov 23, 2024 •

edited

Loading

jgreywolf commented Nov 23, 2024

FuadEfendi commented Nov 24, 2024 •

edited

Loading

FuadEfendi commented Nov 25, 2024 •

edited

Loading

jgreywolf commented Nov 25, 2024

Class diagrams broken with official Mermaid, and shown fine at GitHub. #6075

Class diagrams broken with official Mermaid, and shown fine at GitHub. #6075

Comments

FuadEfendi commented Nov 23, 2024

Description

Steps to reproduce

Screenshots

Code Sample

Setup

Suggested Solutions

Additional Context

FuadEfendi commented Nov 23, 2024

FuadEfendi commented Nov 23, 2024

jmooring commented Nov 23, 2024 • edited Loading

FuadEfendi commented Nov 23, 2024

FuadEfendi commented Nov 23, 2024

jgreywolf commented Nov 23, 2024

FuadEfendi commented Nov 23, 2024 • edited Loading

jgreywolf commented Nov 23, 2024

FuadEfendi commented Nov 24, 2024 • edited Loading

FuadEfendi commented Nov 25, 2024 • edited Loading

jgreywolf commented Nov 25, 2024

jmooring commented Nov 23, 2024 •

edited

Loading

FuadEfendi commented Nov 23, 2024 •

edited

Loading

FuadEfendi commented Nov 24, 2024 •

edited

Loading

FuadEfendi commented Nov 25, 2024 •

edited

Loading