showdown extend flowchart.js integrate

Question

showdown is used to convert markdown editor on my blog website, however it doesn't support flowchart which i need. Reading the extension showdown extension, i write a extions for showdown like the follow:

let showdown = require("showdown");
let jQuery = require("jquery");
let flowchart = require("flowchart.js");

function decodeLang(text) {
    return text
      .replace(/¨D/g, '$')
      .replace(/¨T/g, '¨')
      .trim();
}

let flowchartExt = function () {
    let matches = [];
    jQuery(document.head).append('<style>flow-container{display:block;text-align:center;}</style>');
    return [{
        type: 'lang',
        filter: function (text, converter, options) {
            return text.replace(/```\s*flow\s*\n+(((?!```)[^])+)\n+```/gm, function (wholeMatch, match) {
                matches.push(decodeLang(match));
                return '%flowchart_placeholder' + _.size(matches) + '%';
            });
        }
    }, {
        type: 'output',
        filter: function (text, converter, options) {
            if (!_.isEmpty(matches)) {
                let jqCanvas = jQuery('<div id="__canvas">').css({
                    position: 'absolute',
                    top: '-1000px',
                    left: '-1000px'
                }).appendTo(document.body);

                let chart = null;
                _.forEach(matches, function (match, i) {
                    let pattern = '%flowchart_placeholder' + (i + 1) + '%';
                    text = text.replace(new RegExp(pattern, 'g'), function () {
                        if (match) {
                            if (chart) {
                                chart.clean();
                            }
                            try {
                                chart = flowchart.parse(match);
                                chart.drawSVG('__canvas');
                                return '<flow-container>' + jqCanvas.html() + '</flow-container>';
                            } catch (e) {
                                console.log(e);
                            }
                        }
                        return match;
                    });
                });

                matches = [];
                jqCanvas.remove();
            }

            return text;
        }
    }]
};
showdown.extension('flowchart', flowchartExt);

export {showdown};

Now, i instance it's converter to convert the flowchart syntax

import {showdown} from '../_wraps/markdown';

let converter = new showdown.Converter({tables: true});

makeHtml(markdown) {
    return converter.makeHtml(markdown);
}

flowchart syntax like the following:

```flow
st=>start: Start
op=>operation: Your Operation
cond=>condition: Yes or No?
e=>end
st->op->cond
cond(yes)->e
cond(no)->op
```

However it not works! Any suggestion?

Answer 1

Sorry to forget to register the extension to the showdown.Converter, i thought showdown will register it to the Converter defaultly as i register it to the showdown object.

let converter = new showdown.Converter({tables: true, extensions: ['flowchart']});