import mermaid.css with ES6 + NPM

[zhihuiFan]

Hi:
I install mermaid library with npm install mermaid, the version I am using is 7.1.0. now I have an issue that looks the css is not imported correctly. Here is my code.

<script>
import {mermaidAPI} from 'mermaid'
export default {
  data () {
    return {
      dataReady: 0
    }
  },
  beforeCreate: function () {
    console.log(mermaidAPI)
    mermaidAPI.initialize(
      {
        startOnLoad: false,
        flowchart: {
          useMaxWidth: true,
          htmlLabels: true
        }
      })
  },
  mounted: function () {
    let self = this
    this.axios.get('/api/v1/workflows/' + this.$route.params.workflowId + '/graph').then((response) => {
      self.dataReady = 1
      mermaidAPI.render('s', response.data.data, function (graphHtml, bindFunctions) {
        self.$refs.graph.innerHTML = graphHtml
      })
    }, (response) => {
      console.log(response)
      self.dataReady = -1
    })
  }
}
</script>

and here is the files I installed.

./CHANGELOG.md
./dist
./dist/index.html
./dist/mermaid.core.js
./dist/mermaid.js
./dist/mermaid.min.js
./LICENSE
./node_modules
./node_modules/.bin
./node_modules/.bin/he
./package.json
./README.md
./src
./src/d3.js
./src/diagrams
./src/diagrams/classDiagram
./src/diagrams/classDiagram/classDb.js
./src/diagrams/classDiagram/classDiagram.spec.js
./src/diagrams/classDiagram/classRenderer.js
./src/diagrams/classDiagram/classRenderer.spec.js
./src/diagrams/classDiagram/parser
./src/diagrams/classDiagram/parser/classDiagram.jison
./src/diagrams/classDiagram/parser/classDiagram.js
./src/diagrams/example
./src/diagrams/example/example.spec.js
./src/diagrams/example/exampleDb.js
./src/diagrams/example/exampleRenderer.js
./src/diagrams/example/parser
./src/diagrams/example/parser/example.jison
./src/diagrams/example/parser/example.js
./src/diagrams/flowchart
./src/diagrams/flowchart/flowRenderer.js
./src/diagrams/flowchart/graphDb.js
./src/diagrams/flowchart/parser
./src/diagrams/flowchart/parser/dot.jison
./src/diagrams/flowchart/parser/dot.js
./src/diagrams/flowchart/parser/flow.jison
./src/diagrams/flowchart/parser/flow.js
./src/diagrams/flowchart/parser/flow.spec.js
./src/diagrams/gantt
./src/diagrams/gantt/exGantt.md
./src/diagrams/gantt/gant.css
./src/diagrams/gantt/gantt.spec.js
./src/diagrams/gantt/ganttDb.js
./src/diagrams/gantt/ganttDb.spec.js
./src/diagrams/gantt/ganttRenderer.js
./src/diagrams/gantt/parser
./src/diagrams/gantt/parser/gantt.jison
./src/diagrams/gantt/parser/gantt.js
./src/diagrams/gitGraph
./src/diagrams/gitGraph/gitGraphAst.js
./src/diagrams/gitGraph/gitGraphParser.spec.js
./src/diagrams/gitGraph/gitGraphRenderer.js
./src/diagrams/gitGraph/parser
./src/diagrams/gitGraph/parser/gitGraph.jison
./src/diagrams/gitGraph/parser/gitGraph.js
./src/diagrams/sequenceDiagram
./src/diagrams/sequenceDiagram/parser
./src/diagrams/sequenceDiagram/parser/sequenceDiagram.jison
./src/diagrams/sequenceDiagram/parser/sequenceDiagram.js
./src/diagrams/sequenceDiagram/sequenceDb.js
./src/diagrams/sequenceDiagram/sequenceDiagram.spec.js
./src/diagrams/sequenceDiagram/sequenceRenderer.js
./src/diagrams/sequenceDiagram/svgDraw.js
./src/less
./src/less/dark
./src/less/dark/classDiagram.less
./src/less/dark/flow.less
./src/less/dark/gantt.less
./src/less/dark/gitGraph.less
./src/less/dark/mermaid.less
./src/less/dark/sequenceDiagram.less
./src/less/dark/variables.less
./src/less/default
./src/less/default/classDiagram.less
./src/less/default/flow.less
./src/less/default/gantt.less
./src/less/default/mermaid.less
./src/less/default/sequenceDiagram.less
./src/less/default/variables.less
./src/less/forest
./src/less/forest/classDiagram.less
./src/less/forest/flow.less
./src/less/forest/gantt.less
./src/less/forest/mermaid.less
./src/less/forest/sequenceDiagram.less
./src/less/forest/variables.less
./src/less/neutral
./src/less/neutral/classDiagram.less
./src/less/neutral/flow.less
./src/less/neutral/gantt.less
./src/less/neutral/mermaid.less
./src/less/neutral/sequenceDiagram.less
./src/less/neutral/variables.less
./src/logger.js
./src/mermaid.js
./src/mermaid.spec.js
./src/mermaidAPI.js
./src/mermaidAPI.spec.js
./src/utils.js
./src/utils.spec.js

could anyone can help, thanks!

[tylerlong]

I don't think you can import {mermaidAPI} from 'mermaid' in a browser's <script> tag. You need to pre-compile your code with webpack or browserify before using it in browser.

Or you can use the pre-built version: <script src="https://unpkg.com/mermaid@8.0.0-alpha.6/dist/mermaid.min.js">

Since this is a general programming issue, I will close it now.