Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Mermaid shows an error for a partial chart while its fence is still streaming

Aperta
  • Qualcosa non va?
#667 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

@slavco86 ci sta già lavorando.

Dal 13/10/2026.

  • #668 di @slavco86 — aperta

Valutazione

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

Direzione di ricerca

The error is set in the failed-render path of lib/mermaid/index.tsx, which runs on every change to chart, and useIsCodeFenceIncomplete() only pauses renders. Open PR #668 is already linked and addresses this, so check it before starting. Done means no error box while the fence is still open, and an error only after the closing fence arrives with a chart that still fails.

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

Descrizione

Summary

While a fenced mermaid block is still streaming, Streamdown can show a "Mermaid Error" box for the partial chart. The error appears before the closing fence arrives. It goes away once a later partial chart renders, so the user sees a false error mid-stream.

@farnabaz for triage.

Versions

  • streamdown 2.7.0
  • @streamdown/mermaid 1.0.2 (with mermaid 11.15.0)

Reproduction

Stream a markdown response token by token into <Streamdown isAnimating plugins={{ mermaid }}> where the response contains a flowchart fence:

```mermaid
graph TD;
    A-->B
    B--
```

The chart before the closing fence is incomplete (for example graph TD;\n A--). Mermaid fails to parse it.

What happens

lib/mermaid/index.tsx handles a failed render with setError(...). The error is shown whenever there is no valid SVG yet to display. So the first partial chart that fails to parse shows the error while the fence is still open. Mermaid then renders a later partial chart and clears the error, so the box appears and disappears during the stream.

This happens because the component renders on every change to chart, including while the fence is open. The useIsCodeFenceIncomplete() check only pauses renders (#632). It doesn't suppress errors.

Expected

While the fence is still streaming, a failed render should not show an error. The component should keep showing the loader. The error should show once the fence closes and the final chart fails to render.

Notes

  • The error does not appear when a valid SVG is already on screen, because the last valid SVG is kept.
  • A fix PR is coming with tests for both the streaming and closed-fence cases.
Lingua principale
TypeScript
Stelle
5.7k
Fork
307
Merge medio
1g 22h
PR unite (30g)
22

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.