在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

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/m0_38014125/article/details/86513050
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2020-04-18 22:34:47
阅读 ( 2518 )
分类：前端

在vue中集成使用mermaid画图

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看