Mermaid.js使用markdown语法生成时序图(各种工程类图)

最新推荐文章于 2025-06-26 11:35:14 发布

原创最新推荐文章于 2025-06-26 11:35:14 发布 · 1k 阅读

CC 4.0 BY-SA版权

文章标签：

1.项目中需要实现一个流程图样式的界面，目前找了下，发现了Mermaid（美人鱼）可以直接使用markDown语法实现

mermaid.js文档地址：https://mermaid.nodejs.cn/intro/

Mermaid.js 的核心特点是：

文本驱动：通过简单的文本描述生成图表。
易于集成：可以轻松集成到网页、Markdown 文档或其他支持 JavaScript 的环境中。
支持多种图表类型：包括流程图、序列图、甘特图、类图、状态图、饼图等。
高度可定制：支持主题、样式和配置的灵活调整。

要想使用Mermaid.js完成前端图类的渲染（流程图）需要注意

一,引入Mermaid.js

<script src="../../../lib/mermaid-11.4.1/package/dist/mermaid.min.js"></script>

A2.初始化标签

要在标签中:使用 class=“mermaid”
标签内容就是markDown的流程图生成语法

    <div id="mermaidT" class="mermaid" style="background-color: #3cc6d3;text-align: center;">

        flowchart BT


    </div>

案列
页面效果:
在这里插入图片描述

html代码:

 <div id="mermaidT" class="mermaid" style="background-color: #3cc6d3;text-align: center;">
        ---
        config:
          theme: base
          themeVariables:
            primaryColor: "#2d6fb8"
        ---
                flowchart TD 
                test1["`
                名称:测试
                版本:1.1
                `"]
                style test1 fill:#00ff00
        
        
                test2["`
                名称:测试02
                版本:1.0
                `"]
                style test2 fill:#00ff00
        
                test3["`
                名称:测试02
                版本:1.0
                `"]
                style test2 fill:#00ff00
        
        
                test1 --> test2
                
                test1 --> test3
        
                test2 --> test3
        
                test4["`
                名称:测试04
                版本:1.0
                `"]
                style test2 fill:#00ff00
        
                test5["`
                名称:测试05
                版本:1.0
                `"]
                style test2 fill:#00ff00
        
        
        
                test4 --> test5
        
                class test1 cssClass
                //指定点击事件,事件方法提前定义在js中,在渲染时,通过下方的代码指定一下点击事件就可以
                //目前没有对这块进行应用.如果要复杂的操作需要参考其他文档
                click test1 call aaa(test1) "这是一段鼠标悬浮的提示"
    </div>

1.markDown语法

简要介绍一下：直接在标签中写入相应的字符串就可以了

<body>
    <div class="mermaid">
        flowchart TD
            A[开始] --> B[结束]
    </div>
</body>

二,标签中写入markDown语法

具体语法可以参考最上方的官方文档,文档中有详细的语法介绍和显示
这里只简单介绍
mermaid.js文档地址：https://mermaid.nodejs.cn/intro/

这一段是配置:可以使用js初始化完成也可以使用字符串直接定义

       ---
        config:
          theme: base
          themeVariables:
            primaryColor: "#2d6fb8"
        ---

语法简要说明

        flowchart BT     //flowchart  表示要显示的留图类型,BT表示图块节点之间的方向,BT是从上往下的,TD好像是从下往上
		
		//定义一个图中的节点 test1是节点块的ID,可以看作是一个主键
		//中括号对象,表示页面显示的节点块的内容
        test1["`
        名称:测试
        版本:1.1
        `"]
        //style 单独定义次节点的css样式
        //下面的test1就是通过上方定义的"ID"来配置节点的
        style test1 fill:#00ff00

        test2["`
        名称:测试02
        版本:1.0
        `"]
        style test2 fill:#00ff00

		//使用节点1(test1 ) 通过符号指向 节点2(test12)
		//这样就可以使两个节点进行连接
        test1 --> test2

三,初始化相关配置

如果正式运用到项目中的话,markDown生成的图语法应该是动态生成,这就需要运用官方提供初始化API等相关配置

配置好对应div标签后,在js中使用mermaid.initialize,这相当于一个全局配置

        //初始化启动
        //
        window.onload = mermaid.initialize({
            theme: "base", //需要使用 base 主题，因为它是唯一可修改的主题。
            'themeVariables': {//配置CSS相关的样式
                'primaryColor': '#2d6fb8',
            },
            //startOnLoad这个属性,true的话,会自动调用,mermaid.run(),可以理解为一个init()  --并且init()方法在10.0版本前弃用了.高版本使用run()
            //正常配置的话,设置为false,在你js其他操作完成后,动态生成的markdown字符串语法也渲染到对应div时.你就可以在其他地方使用mermaid.run()渲染页面了
            //不然你设置为true,自己动态渲染的时候会不生效(可以参考官方文档)
            startOnLoad: false,//点击事件开启 true
            securityLevel: 'loose',//启动安全级别、支持点击事件
        });


 var init = function (str) {
            const mermaidDiv = document.getElementById('mermaidT');

          
            mermaidDiv.innerHTML += "\n" + str;

			//处理完后,调用run()开启渲染
            mermaid.run({
                querySelector: '.mermaid',
            });

        }