Interactivity and Embedding

Interactive Nodes

A flowchart node can link to a URL.

flowchart LR
    A[Website] --> B[Docs]
    click A "https://www.github.com" "GitHub"

JavaScript Callbacks

The source also describes call syntax:

click B call myFunction() "Tooltip"

Whether scripts can run depends on Mermaid's security settings.

Security Level

The source describes:

• strict — safer default behavior and scripts disabled.
• loose — allows interactive script behavior such as callbacks.

Example configuration:

* * *
securityLevel: strict
* * *

For interactive callback examples, the source notes that securityLevel: loose may be required.

Embedding in Markdown

Use a Mermaid fenced block:

```mermaid
flowchart LR
    A --> B
```

GitHub and GitLab can render Mermaid blocks where Mermaid support is enabled.

Embedding in HTML

<pre class="mermaid">
graph TD
    A[Client] --> B[Server]
</pre>

Load Mermaid and initialize it:

<script type="module">
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@12/dist/mermaid.esm.min.mjs';

    mermaid.initialize({
        startOnLoad: true
    });
</script>

Try this code ❯