Opening a mermaid diagram on fullscreen doesnt have any backdrop

[JorSoi]

Problem Statement

Hi everyone! Opening a mermaid diagram on fullscreen only shows the diagram but doesnt have any backdrop for clearer visualization. Its bad UX and just harder to use especially since its hard for users to find the exit button hidden in the top right.

Screen.Recording.2026-04-13.at.6.49.41.PM.mov

Proposed Solution

Add a darkened backdrop by default on fullscreen to separate the fullscreen view from the other UI in the background.

Alternatives Considered

No response

Use Case

Priority

Important

Contribution

• I am willing to help implement this feature

Additional Context

No response

[aradhyacp]

Hey @JorSoi Thanks for reporting this.

I tried reproducing the issue on my side, but I was unable to observe the issue. Could you share a bit more detail on how you’re triggering it? A minimal code snippet would really help narrow it down.

For context, I tested using the following package versions:

• "streamdown": "^2.5.0"
• "@streamdown/mermaid": "^1.0.2"

In my local environment, the fullscreen Mermaid view includes a backdrop by default, which properly separates the fullscreen modal from the background UI and improves focus.

I’ve attached a screen recording for reference:

Screen.Recording.2026-04-13.at.11.45.59.PM.mov

---

Code Sample

import React from "react";
import { Streamdown } from "streamdown";
import { mermaid } from "@streamdown/mermaid";

const App = () => {
  const markdown = `
# LLM Tool Calling Flow

## Overview
This diagram explains how an LLM processes a user query, decides whether tools are needed, executes tool calls, and then generates a final response.

## Key Points About LLM Tool Calling

- **Intent Understanding:** The LLM first interprets the user’s request to understand the goal.
- **Planning Stage:** It decides whether it can answer directly or needs external tools (APIs, search, databases, etc.).
- **Tool Selection:** If required, the LLM generates a structured tool call with parameters.
- **External Execution:** The tool (not the LLM) executes the request and returns results.
- **Result Integration:** The LLM processes tool output and combines it with reasoning.
- **Final Response:** A coherent, user-friendly answer is generated using both reasoning and tool results.

\`\`\`mermaid
flowchart TD

A1[User Query]
A2[LLM Receives & Interprets Prompt]
A3[Plan: Decide If Tools Are Needed]
A4[Tool Call Generated API / Function Call]
A5[Tool Execution Result Returned]
A6[Final Response Synthesized by LLM]

A1 --> A2 --> A3

A3 --> A4
A3 --> A5

A4 --> A6
A5 --> A6
\`\`\`

## Important Insight
Tool calling allows LLMs to go beyond static knowledge and interact with real-time systems, making them more accurate, dynamic, and capable.

`;

  return (
    <div className="App">
      <div className="mx-auto mt-5 w-200">
        <Streamdown plugins={{ mermaid }}>{markdown}</Streamdown>
      </div>
    </div>
  );
};

export default App;