Mermaid Security

In Mermaid, Security Configuration controls how much trust Mermaid gives to diagram content, especially HTML labels, links, and JavaScript-related interactions. The default is strict.

Untrusted Mermaid Input

Mermaid diagrams may contain links and, depending on configuration, interactive JavaScript behavior.

Do not treat arbitrary Mermaid input as automatically safe.

Security Configuration

The source recommends careful use of securityLevel.

* * *
securityLevel: strict
* * *

Use less restrictive settings only when the required interactive behavior is understood and controlled.

External Links

External links can open in a new tab depending on configuration.

For untrusted content, sanitize input and avoid allowing arbitrary scripts or callbacks.

1. Strict — Default

---
config:
  securityLevel: strict
---
flowchart TD
    A[Start] --> B[Process]
    B --> C[End]

Try this code ❯

strict encodes HTML tags and disables click functionality. This is the default and is generally appropriate for untrusted diagram content. ([Mermaid][1])

2. Loose

---
config:
  securityLevel: loose
---
flowchart TD
    A[Start] --> B[Process]
    B --> C[End]

Try this code ❯

loose allows HTML tags in text and enables click functionality. It should be used when you trust the diagram source. ([Mermaid][1])

3. Antiscript

---
config:
  securityLevel: antiscript
---
flowchart TD
    A[Start] --> B[Process]
    B --> C[End]

Try this code ❯

antiscript allows HTML tags while removing <script> elements, and enables click functionality. ([Mermaid][1])

4. Sandbox

---
config:
  securityLevel: sandbox
---
flowchart TD
    A[Start] --> B[Process]
    B --> C[End]

Try this code ❯

sandbox renders the diagram inside a sandboxed iframe, preventing JavaScript from running in that context. Some interactive features may not work. ([Mermaid][1])

Security levels

For a website accepting user-provided Mermaid diagrams, strict or sandbox is particularly relevant because Mermaid specifically warns about the risks of rendering untrusted diagram content. ([Mermaid][2])

You can also configure it programmatically:

mermaid.initialize({
  securityLevel: "strict"
});

Try this code ❯

The current Mermaid documentation recommends configuration through mermaid.initialize() for site-level settings, while diagram-specific settings can use frontmatter.