mermaid-js / mermaid

Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
https://mermaid.js.org
MIT License
68.75k stars 6.08k forks source link

Syntax error in text mermaid version 10.9.0 #5454

Closed dariuszwojtowicz closed 2 months ago

dariuszwojtowicz commented 2 months ago

Description

When I try to render diagrams with Mermaid version 10 or above I always get this error instead of diagram "Syntax error in text mermaid version 10.9.0"

I tried many different diagrams and all of them work with version 9.0.0, but none works with 10 or higher.

This is my React Component with hardcoded Mermaid code.

import * as React from 'react';
import mermaid from 'mermaid';

mermaid.initialize({
  startOnLoad: true,
  securityLevel: 'loose',
  fontFamily: 'monospace',
  fontSize: 14,
});

export const MermaidDiagram: React.FC = ({children}) => {
  React.useEffect(() => {
    mermaid.contentLoaded();
  }, []);

  const diagram = `pie title NETFLIX
  "Time spent looking for movie" : 90
  "Time spent watching it" : 10
`;

  return <code className="mermaid">{diagram}</code>;
};

Steps to reproduce

  1. With Mermaid 10 or above, render any diagram code which works well with v9.0.0
  2. No diagram is rendered, instead I see this error "Syntax error in text mermaid version 10.9.0" rendered.

Screenshots

Screenshot by Dropbox Capture

Code Sample

No response

Setup

Suggested Solutions

No response

Additional Context

No response

niclinn commented 1 month ago

What was the fix?