mermaidAPI gantt Vue.js

[mbertrandtrellisrx]

I'm using the mermaid package in Vue.js. I can successfully generate flowcharts - but if I paste in the samples for sequence or gantt - it does not successfully generate them. Are other people using mermaidAPI successfuly with gantt charts?

import mermaidAPI from 'mermaid'

in mounted
var config = {
startOnLoad: false
};
mermaidAPI.initialize(config);
this.mermaidEle = this.$el.querySelector("#therapy123")

        var that = this
        this.insertSvg = function(svgCode, bindFunctions) {
              that.mermaidEle.innerHTML = svgCode;
        }

in render method
var graphCode = 'gantt\n' +
'dateFormat YYYY-MM-DD\n' +
'title Adding GANTT diagram to mermaid\n' +
'\n' +
'section A section\n' +
'Completed task :done, des1, 2014-01-06,2014-01-08\n' +
'Active task :active, des2, 2014-01-09, 3d\n' +
'Future task : des3, after des2, 5d\n' +
'Future task2 : des4, after des3, 5d',

        var graph = mermaidAPI.render("therapy123", graphCode, this.insertSvg);

[GMaxera]

I'm using mermaid for flowchart, but I tested the graph you posted and it's working fine for me.
Although I use a different method for inject the SVG into the HTML.
I don't use .innerHTML function, but instead the v-html bind of Vue.js

Are you still having problem on visualise it ?

[tylerlong]

I have no experience with Vue. But here is a working project in React: https://github.com/mermaidjs/mermaid-live-editor

Invoke mermaid.init(undefined, this.container) to render the chart. Feel free to create a new issue if you still cannot get it work.