About Markpad integration

[kurai021]

I'm not clear about Markpad integration, Mermaid seems not to work with key events. I even tried a simpler example by passing the value of a textarea to a div (without Markpad) and still does not work.

https://jsfiddle.net/rLLdgn3v

[kurai021]

It works with mermaid.init(); but is deprecated in favor of mermaidAPI but I can understand how to use it

[Ryuno-Ki]

I toyed around with your fiddle and made some modifications.

First, I include these assets from their live editor:

• https://knsv.github.io/mermaid/css/mermaid.css
• https://cdn.rawgit.com/knsv/mermaid/0.5.8/dist/mermaid.js

Then, my HTML looks like this:

<textarea name="" id="input" cols="30" rows="10"></textarea>
Preview: <pre id="preview"></pre>
<button type="button" id="render">Render</button>
Output: <div id="output"></div>

My CSS:

#output, #preview {
  color: #000;
}

And the JavaScript code:

var input = document.getElementById("input");
var preview = document.getElementById("preview");
var output = document.getElementById("output");
var renderBtn = document.getElementById("render");

var config = {
    startOnLoad: false,
    flowchart: {
        useMaxWidth: false,
        htmlLabels:true
    }
};

render.onclick = function() {
    preview.innerHTML = input.value;
    // mermaid.initialize(config);
    mermaidAPI.render('output', input.value, function(svgCode, bindFunctions) {
        console.log("Render", svgCode, bindFunctions);
        output.innerHTML = svgCode;
    });
}

When I enter

sequenceDiagram
A->> B: Query
B->> C: Forward query
Note right of C: Thinking...
C->> B: Response
B->> A: Forward response

and hit the button, I see

ABCQueryForward queryThinking...

[Ryuno-Ki]

Working JavaScript part:

var input = document.getElementById("input");
var preview = document.getElementById("preview");
var output = document.getElementById("output");
var renderBtn = document.getElementById("render");

mermaidAPI.initialize({startOnLoad: false});

render.onclick = function() {
    preview.innerHTML = input.value;
    mermaidAPI.render('theGraph', input.value, function(svgCode) {
        output.innerHTML = svgCode;
    });
}

Note, that you need to include https://cdn.rawgit.com/knsv/mermaid/0.5.8/dist/mermaidAPI.js instead of mermaid.js!

The explanation of https://knsv.github.io/mermaid/#binding-events helped me.

[kurai021]

wowww thanks bro, let me test it :D

[Ryuno-Ki]

The third argument of mermaidAPI.render takes a second argument bindFunctions which - according to the docs - could be used for event management.

[kurai021]

I supposed it was for something like this