Skip to content

Info diagram does not render or behaves inconsistently in standalone HTML setup #7601

@EmnaBarbouch

Description

@EmnaBarbouch

Description

When using the info diagram type inside a standalone HTML page with Mermaid initialized via ESM, the diagram either does not render or produces inconsistent output. The behavior differs between info and info showInfo, and neither produces clear visible results in the page.

Steps to reproduce

  1. Create an HTML file with the following content:
    <!doctype html>
<title>Mermaid Info Diagram Test</title>

Info diagram demos

<pre class="mermaid">
  info
</pre>

<hr />

<pre class="mermaid">
  info showInfo
</pre>

<script type="module">
  import mermaid from './mermaid.esm.mjs';

  mermaid.initialize({
    theme: 'forest',
    logLevel: 3,
    securityLevel: 'loose',
  });
</script>
2. Serve the file: http://localhost:9000/info.html 3. Open in browser 4. Observe the rendered output

Screenshots

Image

Code Sample

info
info showInfo

Setup

  • Mermaid version: 11.13.0
  • Browser: Chrome

Suggested Solutions

  1. Clarify Documentation
    Define expected output of info diagrams
    Document differences between info and info showInfo
  2. Rendering Feedback
    Show warning if diagram produces no visible output
  3. Consistency
    Ensure both variants behave predictably across environments
  4. Initialization Handling
    Optionally auto-render or warn if mermaid.run() is missing

Additional Context

This affects debugging and developer experience, especially when testing Mermaid setup or trying to introspect configuration using info diagrams.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Status: TriageNeeds to be verified, categorized, etcType: Bug / ErrorSomething isn't working or is incorrect

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions