Mermaid shows no error when a previously valid chart becomes invalid

Aperta
  • Qualcosa non va?
#724 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

@biggdawg320 ci sta già lavorando.

Dal 10/11/2026.

  • #725 di @biggdawg320 — aperta

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
74/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
react, typescript
Ambito
frontend

Direzione di ricerca

Start with lib/mermaid/index.tsx and the existing test, “should keep last valid SVG on subsequent errors.” Trace how a failed render updates svgContent, lastValidSvg, and the error component in both default and static modes; check streaming behavior against #668. Done means a previously valid chart still shows its last SVG while also showing the error after its source becomes invalid, without changing streaming behavior.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

bug
Bug Description

If a Mermaid chart renders successfully and the same block is then re-rendered with an invalid chart, the previous diagram remains visible, but no error is shown. The diagram no longer matches its source, and the reader has no indication of this.

This happens with a closed code fence in both the default and static modes, so it is not limited to streaming. A chart that is invalid from the start shows the error as expected. I noticed this in a live Markdown preview next to an editor, but it appears to affect other cases where the Markdown changes after the first render.

Steps to Reproduce

Live repro: https://stackblitz.com/edit/hyg2waqb?file=src%2Fmain.tsx

  1. Wait for the diagram showing Alpha pointing to Beta.
  2. In the textarea, delete “Beta,” leaving the arrow without a destination.
  3. The previous diagram remains visible, and the error component is not rendered.
Expected Behavior

The reader can tell that the current chart failed to render, ideally without losing the last valid diagram or causing flicker while editing.

Replacing the diagram with an error could cause flicker, since intermediate edits often produce temporarily invalid syntax. Keeping the last valid SVG while also showing the error would avoid this, as the Mermaid Live Editor does. Streaming behavior (#668) should remain unchanged.

Actual Behavior

The last valid SVG remains visible, but the error is not displayed. In lib/mermaid/index.tsx, a failed render preserves svgContent and lastValidSvg, and the error branch only runs when both are empty.

Keeping the last valid SVG is intentional (#34 and the test “should keep last valid SVG on subsequent errors”), and that behavior is useful for avoiding flicker. The issue is that readers cannot tell the current chart is invalid.

Reproduced with streamdown 2.7.1, @streamdown/mermaid 1.0.3, and mermaid 11.17.2. The same conditions are present on main (072ce7e).

Code Sample
import { useState } from "react";
import { Streamdown } from "streamdown";
import { mermaid } from "@streamdown/mermaid";

const initial = "\ngraph TD;\n  Alpha-->Beta\n\n";

const mermaidOptions = {
  errorComponent: ({ error }: { error: string }) => <div>Error: {error}</div>,
};

export function App() {
  const [source, setSource] = useState(initial);
  return (
    <>
      <textarea onChange={(e) => setSource(e.target.value)} value={source} />
      <Streamdown mermaid={mermaidOptions} plugins={{ mermaid }}>
        {source}
      </Streamdown>
    </>
  );
}
Streamdown Version

2.7.1

React Version

19.3.1

Node.js Version

24.13.0

Browser(s)

Chrome

Operating System

macOS

Additional Context

No response

Lingua principale
TypeScript
Stelle
5.8k
Fork
334
Merge medio
2g 4h
PR unite (30g)
33

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di vercel/streamdown

Tutte le issue di vercel/streamdown

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.