在vue中集成使用mermaid画图

做项目需要展示表与表之间的依赖，前期先简单展示下，markdown中就可以画图，使用的是mermaid语法，于是我想在前端框架中集成mermaid。

github地址：https://github.com/knsv/mermaid

语法使用：https://mermaidjs.github.io/

 

注：我已经使用vue-cli搭建了脚手架

在前端框架中集成：

1、安装

项目根路径下执行命令：

cnpm install mermaid -S

安装后运行提示需要安装d3：

cnpm install -save d3

2、引用

main.js中引入：

import Mermaid from 'mermaid'

3、使用

在HelloWord.vue中添加：

<div class="mermaid">
  graph LR
  A --- B
  B-->C[fa:fa-ban forbidden]
  B-->D(fa:fa-spinner)
  B-->E(fa:fa-spinner aaa)
  B-->F(fa:fa-spinner aaa)
  B-->G(fa:fa-spinner aaa)
  B-->H(fa:fa-spinner aaa)
  B-->I(fa:fa-spinner aaa)
</div>

4、运行

 

mermaid使用的中文也有些写的非常好的博客，可以参考下：https://blog.csdn.net/wangyaninglm/article/details/52887045