Skip to content

Commit f4637cd

Browse files
fix multiple renders of the same mermaid diagram (vercel#59)
* Improve stable ID * Update mermaid.tsx * Create social-bugs-doubt.md
1 parent 7bd5fab commit f4637cd

File tree

3 files changed

+8
-3
lines changed

3 files changed

+8
-3
lines changed

.changeset/social-bugs-doubt.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"streamdown": patch
3+
---
4+
5+
fix multiple renders of the same mermaid diagram

apps/website/app/components/mermaid.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Section } from './section';
22

33
export const MermaidDemo = () => {
4-
const mermaidExample = `Interactive diagram rendering with manual control. Click the chart icon next to any Mermaid code block to render it!
4+
const mermaidExample = `Interactive diagram rendering with manual control. Click the copy icon next to any Mermaid diagram to copy the code to your clipboard.
55
66
## Simple Flowchart
77

packages/streamdown/lib/mermaid.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,12 +46,12 @@ export const Mermaid = ({ chart, className }: MermaidProps) => {
4646
// Initialize mermaid only once globally
4747
const mermaid = await initializeMermaid();
4848

49-
// Use a stable ID based on chart content hash to prevent re-renders
49+
// Use a stable ID based on chart content hash and timestamp to ensure uniqueness
5050
const chartHash = chart.split('').reduce((acc, char) => {
5151
// biome-ignore lint/suspicious/noBitwiseOperators: "Required for Mermaid"
5252
return ((acc << 5) - acc + char.charCodeAt(0)) | 0;
5353
}, 0);
54-
const uniqueId = `mermaid-${Math.abs(chartHash)}`;
54+
const uniqueId = `mermaid-${Math.abs(chartHash)}-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
5555

5656
const { svg } = await mermaid.render(uniqueId, chart);
5757

0 commit comments

Comments
 (0)