井井客

搜索

mermaid帮你更轻松实现SVG流程图绘制

利用JS绘制流程图,原来想想都不可能,但是mermaid将这种变为可能,我也是因为需求才接触到这一块,它帮我节省了很多事情,它利用svg实现了流程图的绘制,只需要你按照格式传递规则即可。

mermaid帮你更轻松实现SVG流程图绘制

mermaid可以绘制多种图形,在这里我只用到了简单的流程图绘制,在此我也只对流程图绘制做一些说明。如果对其它感兴趣的话可以在github中自己看一下:https://github.com/knsv/mermaid,里面的说明比我的要详细些。

而在项目中使用的话,当然是install到项目中。
安装mermaid(我使用的是v7.1.0版本),支持npm和yarn。
然后在需要使用的地方require/import。
这些都是套路,就不细说了。

yarn add mermaid      //yarn安装
npm install mermaid   //npm安装

import mermaid from 'mermaid';      //引入项目中
var mermaid = require('mermaid');   //引入项目中

使用时分两步:
(1)在html中放入一行行规则;
(2)在JS中运行它的主方法“mermaid.init”。

html规则第一行是说明流程图类型,支持横向和竖向,使用“graph 方向词”用来说明。

下面每一行代码的就是一个从A到B的过程。

需要注意的是我们的规则需要一行行书写,所以常把它放在pre标签内,例如一个简单的流程图html代码:

<pre>
	graph LR
    A(开始) --> B[分支1]
    A(开始) -.-> C[分支2]
    B[分支1] --> D{归总}
    C[分支2] -.-> D{归总}
    D{归总} --成功--> E(结束)
</pre>

当然现在看到这一串代码你并不一定马上就在脑海中想像出它的效果,这需要你运行它,才能够一目了然:

	mermaid.init(undefined, '.lang-mermaid')

第一个传的参数是配置(一般用不上所以传undefined),第二个参数就是选择器,表示用在哪个地方。然后就是这么简单的一个小小的流程图就画好了~

而细心的你就会发现规则代码中的不一致的地方与一致的地方。推荐查看一个文档:http://www.360doc.com/content/16/0618/21/9482_568860791.shtml。找到“Flowcharts - Basic Syntax”这一段,里面有比较详细的说明。它说明了流程图支持的几个方向、一个节点的形状、连接线类型等,在此我也不细述了。

另外就是mermaid的配置信息,推荐使用“mermaid.initialize(obj)”。它传入的config对象,我们则需要去node_modules/mermaid/src/mermaidAPI.js中查看config这个对象。里面的属性就是可以传递进来,可以做为配置的。

它的第一个配置属性就是theme,所以我们换一个主题:

mermaid.initialize({
    theme:'forest'
})

贴一下我在我的VUE项目中使用的一个精简后的完整代码:

<template>
    <div>
        <div class="lang-mermaid" v-show='proStatus'>
            graph LR
            <template v-for='item of proList'>
                {{item}}
            </template>
        </div>
        <button @click='clickProcess'>点击预览流程</button>
    </div>
</template>
<script>
    import mermaid from 'mermaid';
    export default {
        data() {
            return {
                proStatus: false,
                proList: []
            }
        },
        methods: {
            clickProcess() {
                this.proList = [
                    "A(原始数据) --定时或分配规则--> B[收息前手]",
                    "B[收息前手] --定时或分配规则--> C[收息中手]",
                    "C[收息中手] -.- D[电催前手]",
                    "D[电催前手] -.- E[电催中手]",
                    "E[电催中手] -.- F[上门催收员]",
                    "C[收息中手] --触发规则--> F[上门催收员]"
                ];
                this.proStatus = true;
                setTimeout(() => {
                    mermaid.initialize({
                        theme: 'forest'
                    })
                    mermaid.init(undefined, '.lang-mermaid')
                }, 10)
            }
        }
    }
</script>
<style>
    .lang-mermaid .label {
        color: #333;
    }
</style>

分享完毕~欢迎拍砖

文章TAG:js

作者:井井客原创来源:原创
本文标题:mermaid帮你更轻松实现SVG流程图绘制
本文链接:/c/08309.html

上一篇:利用伪类制作凸起的背景带边框
下一篇:【VUE】做个dialog组件最简实例

文章分类

相关阅读

随便看看