How to render a mermaid flowchart dynamically?

Question

I am using the mermaid library to build flowcharts. The principle of its work is that inside a block there is a pseudocode - commands of a special syntax, on the basis of which the flowchart is built in the block.

I want to be able to change the contents of the block dynamically, and the script rebuilds the block diagram every time.

How should I set up initialization? Perhaps I should add some callback function in the settings?

I initialized in this way:

mermaid.init({/*what setting parameters should be here?*/}, ".someClass"/*selector*/);

but the script doesn’t render any new commands. It only renders the commands that existed at the moment the document was loaded.

In other words, I want to edit a flowchart online.

function edit() {
  const new_mermaid = document.createElement("div");
  new_mermaid.classList.add("mermaid");
  new_mermaid.classList.add(".someClass");
  /*new_mermaid.innerHTML =
            `graph TD
   1[point 1] --> 2[point 2]`;*/
  // it doesn't work when I append the new   element dynamically! 
  new_mermaid.innerHTML = document.querySelector(".mermaid").innerHTML;
  // it works always.
  document.body.append(new_mermaid);
  /* document.querySelector(".mermaid").innerHTML = 
            `
    graph TD
    A --> B`*/
  // it doesn’t work with event listener
}
edit(); // it works
document.body.addEventListener("click", edit)

<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>
  // how to do it correctly?
  mermaid.init({
    noteMargin: 10
  }, ".someClass");
</script>

<div class="mermaid someClass">
  graph TD
  1--> 2
  3 --> 2
  2 --> 1
</div>

I made you a snippet. Please provide a [mcve] - your mermaid init would not work in the head before "someclass" existed — mplungjan, Dec 09 '20 at 07:29
Thank you. I’ve edited the HTML-snippet, so now it’s correct, I hope. — Boris, Dec 09 '20 at 08:13
so on what event exactly do you want to trigger the rendering? — Markus Dresch, Dec 09 '20 at 09:49
Any changing of the ``textContent`` of the block with the class 'mermaid'. Or, better, a click on a special button. (There would be a form on the page, which user would enter his data in — a flowchart online editor. My code would listen to the input event or button clicks and change the contents of the block. I want to trigger the rendering each time. If I could write an instruction alike ``mermaid.render()``, or some of this kind in my form event handler, that would be sufficient!) — Boris, Dec 09 '20 at 10:04
Have you looked at mermaidJS' own live editor? https://github.com/mermaid-js/mermaid-live-editor. Is that sort of what you are thinking? — Justin Greywolf, Dec 11 '20 at 00:00
Yes, some of that sort. By the way, it doesn’t work in some browsers. — Boris, Dec 11 '20 at 11:53
Meanwhile I have found the solution! It’s compatible with mermaid version 7.1.0. There exists a method ``mermaid.render(selector, commands, callback);``; the first argument is a string, corresponding to a selector (className, for example) of the block which I want to render in, the second is a string containing the commands I want to put in the block, and the third is a function, which changes the contents of the block. I can call this method whenever it’s necessary, in any event handler. — Boris, Dec 11 '20 at 11:54

score 10 · Answer 1 · answered Dec 11 '20 at 12:20

It seems, I know the answer. Look at the solution below:

  document.querySelector("button").addEventListener("click", (e) => {
  const output = document.querySelector(".flowchart");
  if (output.firstChild !== null) {
    output.innerHTML = "";
  }
  const code = document.querySelector(" textarea").value.trim();
  let insert = function (code) {
    output.innerHTML = code;
  };
  mermaid.render("preparedScheme", code, insert);
});

   <script src="https://unpkg.com/mermaid@7.1.0/dist/mermaid.min.js"></script>

<p>Input your data:</p>
<div class="input">
  <textarea style="width:300px; height:200px"></textarea>
  <br>
  <button>render</button>
</div>
<div>
  <p>output:</p>

  <div class="render_container" style = "width:300px; height:200px; border:thin solid silver" >
      <div class="flowchart"></div>
    </div>
  </div>

The gates of Zion · Answer 2 · 2022-07-05T13:53:32.507

Thanks for the answer above. I would like to add a react wrapper to the answer scope for whoever using react:

import React, {Component} from "react";
import mermaid from "mermaid";

export default class Mermaid extends Component {
    constructor(props){
        super(props)
        this.state={
            chart: this.props.chart || ""
        }
        mermaid.initialize({
            mermaid : {
                startOnLoad: false,
            }
        })
        this.mermaidRef = React.createRef()
    }
    mermaidUpdate(){

        var cb = function (svgGraph) {
           this.mermaidRef.current.innerHTML = svgGraph
        };
        //console.log("this.state.chart", this.state.chart)
        mermaid.mermaidAPI.render('id0', this.state.chart, cb.bind(this));
    }
    componentDidMount(){
        this.mermaidUpdate()
    }
    componentDidUpdate(prevProps, prevState) {
        //console.log("Mermiad prevProps.chart", prevProps.chart)
        if (this.props.chart !== prevProps.chart) {
          this.setState({chart:this.props.chart},()=>{
            this.mermaidUpdate()
          })
        }
      }
    render() {
      var outObj = (
        <div 
            ref={this.mermaidRef}
            className="mermaid"
        >
            {this.state.chart}
        </div>
        )
      return outObj
    }
  }

How to render a mermaid flowchart dynamically?

2 Answers2

Linked