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 stackoverflow.com/questions/74086784, whose sole response is nondescript.

Answered by RokeJulianLockhart

Oct 18, 2024

#discussioncomment-10982775

Indeed, getting-started.md#requirements-for-the-mermaid-api worked, for:

<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:

View full answer

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

RokeJulianLockhart
Oct 18, 2024
Author

#discussion-7336721

Per mermaid-js/mermaid-cli#48 (comment), getting-started.md#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

#discussioncomment-10982775

Indeed, getting-started.md#requirements-for-the-mermaid-api worked, for:

<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>

...produced:

Answer selected by RokeJulianLockhart

phil294 · 2025-09-05T11:10:30Z

phil294
Sep 5, 2025

To generate a static SVG/PNG, see https://github.com/mermaid-js/mermaid-cli

0 replies

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

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 2 comments 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

mermaid-js

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

Uh oh!

Uh oh!

RokeJulianLockhart Oct 18, 2024

Replies: 2 comments · 1 reply

Uh oh!

Uh oh!

RokeJulianLockhart Oct 18, 2024 Author

Uh oh!

Uh oh!

RokeJulianLockhart Oct 18, 2024 Author

Uh oh!

phil294 Sep 5, 2025

RokeJulianLockhart
Oct 18, 2024

Replies: 2 comments 1 reply

RokeJulianLockhart
Oct 18, 2024
Author

RokeJulianLockhart Oct 18, 2024
Author

phil294
Sep 5, 2025