Rendering Mermaid Diagram with errors on Webpage

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 (

{this.props.chart}

      {this.state.mermaidError && (
        <div style={{ color: 'red' }}>
          Mermaid Error: {this.state.mermaidError}
        </div>
      )}
    </TransformComponent>
  </TransformWrapper>
);

} }

export default Mermaid;

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

sidharthv96 commented 4 months ago

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 commented 3 months ago

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>
    );
  }
}}
`

mermaid-js / mermaid

Rendering Mermaid Diagram with errors on Webpage #5385

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