做项目需要展示表与表之间的依赖,前期先简单展示下,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

Logo

前往低代码交流专区

更多推荐