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.