mermaid-从文本到流程图

6147a27a-8362-455f-9545-677da61b59aa.png

前段时间研究markdown发现了流程图这种用法，原来还可以直接将文本变成流程图，感觉很有意思，于是研究了一下其中一种叫mermaid的实现方式。正好项目要用流程图，就在这里简单整理一下。

安装

下载地址：https://unpkg.com/mermaid@8.0.0/dist/

使用

1. 引入js

     <script src="mermaid.min.js"></script>

2. 定义容器

    <div class="mermaid">
        graph LR
        A
        B
        C
        D
        E
        F
        A-->C
        B-->C
        C-->D
        C-->E
        D-->F
        E-->F
    </div>

3. 初始化

    <script>
        mermaid.initialize({startOnLoad:true});
    </script>

4. 效果

2ce074d2-5bc4-4f48-a9f6-3170292c337c.png

语法

1. 流程图方向

graph TB
A-->B

21a0a9fc-ca92-4d2e-8671-748a738a13a5.png

graph BT

dfda5de5-52dd-4450-9572-d62e64539bed.png

graph LR

57d73f46-4463-4ef9-8701-dd21acfcee8b.png

graph RL

921d254e-5702-4690-bef3-680d224c69f5.png

2. 给节点定义文字

        graph LR
        A-->B[张三]
        B-->C(李四)
        B-->D((王五))
        D-->E>爱谁谁]
        E-->F{who?}

3caf4af5-f076-40ee-babf-739dd39d859f.png

3. 线条箭头

        graph LR
        A-->C
        C-->|文字|A1
        B---C
        C---|文字|B1
        D-.->F
        F-.->|文字|D1
        E-.-F
        F-.-|文字|E1
        G==>I
        I==>|文字|G1
        H===I
        I===|文字|H1

7f5fcedf-751b-4fd2-822e-76f6e62c3ca6.png

参考

1. 项目github地址
2. 文档