can't have more than 2 sequence diagrams in each page

[arthurtofani]

It's not possible to add more than 2 sequence diagrams in each page. After that, all code blocks are rendered as simple code blocks. I have also tried with flow charts and the behavior is the same...

That's my test.

Title: Here is a title
A->B: Normal line
B-->C: Dashed line
C->>D: Open arrow
D-->>A: Dashed open arrow

Title: Here is a title
A->B: Normal line
B-->C: Dashed line
C->>D: Open arrow
D-->>A: Dashed open arrow

Title: Here is a title
A->B: Normal line
B-->C: Dashed line
C->>D: Open arrow
D-->>A: Dashed open arrow

[facelessuser]

Yeah, my Javascript skills are pretty week as I am not a web developer. I am sure JS code is bombing. I just haven't tested more than two until now. Extensions are still in a beta state as a couple of things like this turn up now and then. Thanks for the report. I'll figure it out and let you know.

[arthurtofani]

I think these extensions are great, thank you for that! I got a fork and I wished to try to solve this by myself but I didn't understand how to set an environment up to edit it. If you could send me some clues, maybe I could do it here and send a pull request... (is that a matter of JS code? I thought it was a python issue...)

[facelessuser]

Nah, it's without a doubt JS. My Python-fu is much greater than my JS-fu. I assume you are using the JS that I provided. I guess that is the next question, how are you loading things up?

On my end, everything is actually classed up just fine in HTML. Python code actually just has an exception for flow and sequence language, and adds a class to the pre block and skips code highlighting. Pretty straight forward. And if you look at the HTML, you will see it's all there. The grunt work is actually done by flowchart.js or sequence-diagram.js, and I just provide a JS wrapper around that to automate the converting of pre blocks with the class uml-flowchart (albeit a crappy wrapper).

Basically, I was supposed to be looping through the pre objects that were classed up as uml-flowchart. I extract the text from the code block, render the flowchart with flowchart.js or the sequence-diagrams.js. Insert the svg image before the pre and remove the pre. But the browsers, they say NO.

Something changes after the first two blocks are processed, because the parentNodes of anything after the first two suddenly become null. If your JS-fu is greater, take a swing. It will probably take me a bit to re-think and re-factor this. I know it's something silly in my assumptions of the DOM or something. Logic wise, I don't see the problem, but my lack of understanding of how the DOM responds is my weakness.

(function (win, doc) {
  win.convertUML = function(className, converter, settings) {
    var charts = doc.querySelectorAll("pre." + className),
        arr = [],
        i, maxItem, diagaram, text, curNode;

    // Is there a settings object?
    if (settings === void 0) {
        settings = {};
    }

    // Make sure we are dealing with an array
    for(i = 0, maxItem = charts.length; i < maxItem; i++) arr.push(charts[i])

    // Find the UML source element and get the text
    for (i = 0, maxItem = arr.length; i < maxItem; i++) {
        childEl = arr[i].firstChild;
        parentEl = childEl.parentNode;
        text = "";
        for (var i = 0; i < childEl.childNodes.length; i++) {
            curNode = childEl.childNodes[i];
            whitespace = /^\s*$/;
            if (curNode.nodeName === "#text" && !(whitespace.test(curNode.nodeValue))) {
                text = curNode.nodeValue;
                break;
            }
        }

        // Do UML conversion and replace source
        el = doc.createElement('div');
        el.className = className;
        parentEl.parentNode.insertBefore(el, parentEl);
        parentEl.parentNode.removeChild(parentEl);
        diagram = converter.parse(text);
        diagram.drawSVG(el, settings);
    }
  }
})(window, document)

[facelessuser]

Hah, I'm an idiot. Man those is and js look the same sometimes 😄.

This worked for me. Notice above I am reusing i in all of them. There was nothing wrong with the flow, but I was screwing up my indexing.

(function (win, doc) {
  win.convertUML = function(className, converter, settings) {
    var charts = doc.querySelectorAll("pre." + className),
        arr = [],
        i, j, maxItem, diagaram, text, curNode;

    // Is there a settings object?
    if (settings === void 0) {
        settings = {};
    }

    // Make sure we are dealing with an array
    for(i = 0, maxItem = charts.length; i < maxItem; i++) arr.push(charts[i])

    // Find the UML source element and get the text
    for (i = 0, maxItem = arr.length; i < maxItem; i++) {
        childEl = arr[i].firstChild;
        parentEl = childEl.parentNode;
        text = "";
        for (j = 0; j < childEl.childNodes.length; j++) {
            curNode = childEl.childNodes[j];
            whitespace = /^\s*$/;
            if (curNode.nodeName === "#text" && !(whitespace.test(curNode.nodeValue))) {
                text = curNode.nodeValue;
                break;
            }
        }

        // Do UML conversion and replace source
        el = doc.createElement('div');
        el.className = className;
        parentEl.parentNode.insertBefore(el, parentEl);
        parentEl.parentNode.removeChild(parentEl);
        diagram = converter.parse(text);
        diagram.drawSVG(el, settings);
    }
  }
})(window, document)

[facelessuser]

If your issue was the same as mine, I will commit this and hopefully your issue will be fixed.

[arthurtofani]

I tried it here and it worked for me too. Thanks!
Do you know how to update this on Sublime Markdown Preview package?

[facelessuser]

Yeah, I'll do it. I have a push I havn't committed yet. I'll add it to that.

[arthurtofani]

👍 👍 👍 👍

[facelessuser]

Reopenning until I actually push the fix.

[facelessuser]

The extension itself doesn't provide the JS file, that is provided by PyMdown or Markdown Preview in this case. But the file has been updated in PyMdown facelessuser/PyMdown@884fc6a.