Mermaid in React turns into plaintext when re-rendered-CodePudding

I have a Mermaid graph in a React project, and it renders beautifully when the project first loads, but if I make any changes to the graph markup programmatically it renders as plaintext instead of a graph.

Here's a code sandbox that demonstrates the problem; click the "refresh" button and notice that the beautiful Mermaid graph turns into plaintext. https://codesandbox.io/s/react-with-mermaid-rendering-problem-d8dqdp?file=/src/index.js

The expected behavior is that it should re-render the graph, with the "foo bar" in the last box replaced by "bing bong".

Any ideas how I can fix this?

EDIT: Per a suggested solution, I changed my Mermaid class to:

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

  componentDidMount() {
    mermaid.contentLoaded();
  }

  render() {
    return <div className="mermaid">{this.state.chart}</div>;
  }
}

But with that change the graph doesn't re-render at all when the data changes.

CodePudding user response：

It looks like the mermaid library adds a data-processed attribute to the resulting DOM after the chart is generated: https://github.com/mermaid-js/mermaid/issues/311#issuecomment-332557344.

You will need to remove the attribute and recall mermaid.contentLoaded() after your component state has been updated.

ref: https://github.com/mermaid-js/mermaid/issues/709

CodePudding user response：

Although potentially answered by kachow6, please note that there is a mermaid package made for react here: https://www.npmjs.com/package/react-mermaid.