Mermaid shows no error when a previously valid chart becomes invalid

オープン
  • 何か問題がありますか？
#724 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

@biggdawg320 がすでに取り組んでいます。

2026年11月10日 から。

  • #725 @biggdawg320 による — オープン

評価

難易度
3/5
見積もり時間
1〜2日
初心者へのやさしさ
74/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
react, typescript
領域
frontend

調査の方向性

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.

索引モデルが issue の本文から書いたものです。

説明

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

主要言語
TypeScript
スター
5.8k
フォーク
334
平均マージ
2日 4時間
マージ済み PR（30日）
33

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

vercel/streamdown のほかの issue

vercel/streamdown の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。