How to render MermaidJS code in an HTML file? #5977

RokeJulianLockhart · 2024-10-18T11:58:16Z

RokeJulianLockhart
Oct 18, 2024

Rendering it in VS Code in a .Markdown file is trivial:

```mermaid
```

However, how to render it in an .HTML file is not so. The sole question online asking this that I've been able to locate thus far is https://stackoverflow.com/q/74086784/9731176, whose sole response is nondescript.

Answered by RokeJulianLockhart

Oct 18, 2024

https://github.com/orgs/mermaid-js/discussions/5977#discussioncomment-10982775

Indeed, http://mermaid.js.org/intro/getting-started.html#requirements-for-the-mermaid-api worked:

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

    <script type="module">
      import mermaid from 'https://cdn.jsdelivr.net/n…

View full answer

RokeJulianLockhart · 2024-10-18T12:01:08Z

RokeJulianLockhart
Oct 18, 2024
Author

https://github.com/orgs/mermaid-js/discussions/5977#discussion-7336721

Per mermaid-js/mermaid-cli#48 (comment), http://mermaid.js.org/intro/getting-started.html#requirements-for-the-mermaid-api might be suitable documentation. I'm trying to render this in a single HTML document, not a web page, ~~so I'm not confident it'll work (without a server)~~.

1 reply

RokeJulianLockhart Oct 18, 2024
Author

https://github.com/orgs/mermaid-js/discussions/5977#discussioncomment-10982775

Indeed, http://mermaid.js.org/intro/getting-started.html#requirements-for-the-mermaid-api worked:

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

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

Rendered

Answer selected by RokeJulianLockhart

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

mermaid-js

How to render MermaidJS code in an HTML file? #5977

{{title}}

Replies: 1 comment 1 reply

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

mermaid-js

How to render MermaidJS code in an HTML file? #5977

RokeJulianLockhart Oct 18, 2024

Replies: 1 comment · 1 reply

RokeJulianLockhart Oct 18, 2024 Author

RokeJulianLockhart Oct 18, 2024 Author

RokeJulianLockhart
Oct 18, 2024

Replies: 1 comment 1 reply

RokeJulianLockhart
Oct 18, 2024
Author

RokeJulianLockhart Oct 18, 2024
Author