Rendering Mermaid Diagram with errors on Webpage

[mnidhi172]

Discussed in https://github.com/orgs/mermaid-js/discussions/5384

^{Originally posted by mnidhi172 March 14, 2024}
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]

Instead of using startOnLoad: true, you can use mermaid's render function to generate the SVG.

Example: https://github.com/mermaid-js/mermaid/blob/33287a63ad539959ce842613a5801cd92c5faaef/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue

Docs: https://mermaid.js.org/config/usage.html#api-usage

[mnidhi172]

I have sorted the issue, thanks for the reference. This is how I am doing it:

import React from 'react';
import mermaid from 'mermaid';

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) {
    mermaid.contentLoaded();
    if (prevProps.chart !== this.props.chart) {
      const mermaidgraph = document.getElementById('mermaid-chart');
      if (mermaidgraph) {
        mermaidgraph.removeAttribute('data-processed');
      }
      this.handleDiagramCodeChange(this.props.chart);
    }
  }
  
  

  handleDiagramCodeChange = async (newDiagramCode) => {
    try {
      const isValidSyntax = await mermaid.parse(newDiagramCode);
      if (isValidSyntax) {
        this.setState({ mermaidError: null });
      } else {
        this.setState({ mermaidError: mermaid.parseError });
      }
    } catch (error) {
      console.error('Error in handleDiagramCodeChange:', error);
      this.setState({mermaidError: error.message});
    }
  };

  render() {
  if ( !this.props.chart){
    return null;
  }      
  {
    return (
      <div>
        <div
          id="mermaid-chart"
          className="mermaid"
        >
          {this.state.mermaidError ? (
            <div style={{ color: 'red' }}>Error: {this.state.mermaidError}</div>
          ) : (
            this.props.chart
          )}
        </div>
      </div>
    );
  }
}}
`