Rendering Mermaid Diagram with errors on Webpage

[mnidhi172]

I am trying to render the mermaid diagrams along with the errors in the mermaid code if any on the webpage using react js. In my app the diagram is reflecting properly however the errors in the code are not going from the page even if the mermaid code is correct.

Here is how I am doing it:

import React from 'react';
import mermaid from 'mermaid';
import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch';

class Mermaid extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      mermaidError: null,
    };
  }

  componentDidMount() {
    mermaid.initialize({
      startOnLoad: true
    });
    mermaid.contentLoaded();

    mermaid.parseError = (error, hash) => {
      console.error('Mermaid errors:', error);
      this.setState({ mermaidError: error.str });
    };
  }

  componentDidUpdate(prevProps) {
    if (prevProps.chart !== this.props.chart) {
      const mermaidChart = document.getElementById('mermaid-chart');
      if (mermaidChart) {
        mermaidChart.removeAttribute('data-processed');
        mermaid.contentLoaded();
      }
    }
  }

  render() {
    return (
      <TransformWrapper>
        <TransformComponent>
          <div
            id="mermaid-chart"
            className="mermaid"
            style={{
              width: '800px',
              height: '600px',
              boxSizing: 'border-box',
              overflow: 'auto',
            }}
          >
            {this.props.chart}
          </div>
          {this.state.mermaidError && (
            <div style={{ color: 'red' }}>
              Mermaid Error: {this.state.mermaidError}
            </div>
          )}
        </TransformComponent>
      </TransformWrapper>
    );
  }
}

export default Mermaid;

<div className="col-md-6 diagram">
  <div >
    <Mermaid chart={diagramCode} onParseError={handleMermaidError} mermaidError={mermaidError} />
  </div>

Anyone knows how can we properly show the mermaid diagram as well as error in the mermaid code on the webpage using react?

@sidharthv96