在vue中集成使用mermaid画图
做项目需要展示表与表之间的依赖,前期先简单展示下,markdown中就可以画图,使用的是mermaid语法,于是我想在前端框架中集成mermaid。github地址:https://github.com/knsv/mermaid语法使用:https://mermaidjs.github.io/ 注:我已经使用vue-cli搭建了脚手架在前端框架中集成:1、安装项目根路径...
·
做项目需要展示表与表之间的依赖,前期先简单展示下,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
更多推荐
已为社区贡献3条内容
所有评论(0)