开源工具利器:Mermaid助力知识图谱可视化与分享

在现代 web 开发中,可视化工具对于展示流程、结构和数据关系至关重要。Mermaid 是一款强大的 JavaScript 工具,它使用基于 Markdown 的语法来呈现可定制的图表、图表和可视化。对于展示流程、结构和数据关系至关重要。通过简单的文本描述,你可以轻松创建流程图、思维导图、序列图等多种图表类型。本文将带你了解 Mermaid 的核心功能,并展示如何在 Vue 3 项目中集成和使用它。
在这里插入图片描述

本博文旨在帮助初学者快速掌握开发技能,同时解决在学习和实践过程中可能遇到的常见问题,如旧版代码兼容性问题和错误配置等。博文将兼顾基础知识的讲解和实用技巧的应用,确保读者能够顺利上手并提高开发效率。2025版最新避坑文章

一、Mermaid 简介

Mermaid 是一款开源工具,使用 MIT 协议授权。它支持多种图表类型,包括但不限于:

  • 流程图(flowchart)
  • 序列图(sequence diagram)
  • 甘特图(gantt)
  • 类图(class diagram)
  • Git 图(git graph)
  • 思维导图(mindmap)
  • 数据包图(packet diagram)
  • ER 图(er diagram)
  • 饼图(pie chart)
  • 象限图(quadrant chart)
  • 需求图(requirement diagram)

你可以通过修改图的描述来重新呈现或修改图。这种基于文本的图表定义方式,使得图表的维护和版本控制变得更加容易。

二、集成 Mermaid

CDN 引入

最简单的方式是通过 CDN 引入 Mermaid。jsDelivr 提供了 Mermaid 的 CDN 服务,你可以通过以下链接引入:

<script type="module">import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
</script>

你也可以通过右上角的下拉框切换版本,以适应你的项目需求。

npm 安装

对于需要离线使用或更稳定依赖的项目,可以通过 npm 安装 Mermaid:

npm install mermaid
# 或
yarn add mermaid
# 或
pnpm add mermaid

安装完成后,你可以在项目中通过 import 引入 Mermaid。

三、Vue 3 中的集成示例

以下是一个在 Vue 3 项目中使用 Mermaid 的完整示例,采用 setup 语法:

<template><div className="mermaid-container"><pre className="mermaid" ref="mermaidRef"></pre></div>
</template><script setup>
import {ref, onMounted, nextTick} from 'vue';
import mermaid from 'mermaid';
const mermaidRef = ref(null);const mermaidCode = `
flowchart TDA[开始] --> B[步骤 1]B --> C[步骤 2]C --> D[结束]
`;onMounted(async () => {// 初始化 mermaid 配置mermaid.initialize({startOnLoad: false, // 禁用自动渲染,手动控制securityLevel: 'loose', // 启用点击事件和 HTML 标签});// 确保 DOM 已经更新await nextTick();// 将 mermaid 代码设置到 pre 标签中if (mermaidRef.value) {mermaidRef.value.textContent = mermaidCode;}// 手动渲染 mermaid 图表await mermaid.run({querySelector: '.mermaid',});
});
</script><style>
.mermaid-container {width: 100%;height: 400px;display: flex;justify-content: center;align-items: center;
}pre.mermaid {font-family: 'trebuchet ms', verdana, arial;width: 100%;height: 100%;
}
</style>

运行效果:
在这里插入图片描述

代码说明

  1. 模板部分:定义了一个容器 div 和一个 pre 标签,pre 标签的类名是 mermaid,这是 Mermaid 识别图表定义的关键。

  2. 脚本部分

    • 引入了 Mermaid 的 ESM 模块。
    • 定义了一个 ref 来引用 pre 标签。
    • 在 onMounted 生命周期钩子中,初始化 Mermaid 配置,并在 DOM 更新后设置 pre 标签的内容,最后手动渲染图表。
  3. 样式部分:为容器和 pre 标签设置了基本的样式,确保图表能够正确显示。

四、配置与高级用法

安全配置

Mermaid 提供了 securityLevel 配置项,用于设置已解析图表的信任级别:

  • ‘strict’(默认):对文本中的 HTML 标记进行编码,并禁用单击功能。
  • ‘antiscript’:允许在文本中使用 HTML 标记(仅删除脚本元素),并启用单击功能。
  • ‘loose’:允许在文本中使用 HTML 标记,并启用单击功能。
  • ‘sandbox’:使用沙盒化 iframe 渲染,阻止 JavaScript 运行。

你可以通过 mermaid.initialize 方法设置 securityLevel:

mermaid.initialize({securityLevel: 'loose',
});

高级渲染控制

除了默认的自动渲染,你还可以使用 mermaid.run 方法进行更复杂的渲染控制:

mermaid.initialize({ startOnLoad: false });await mermaid.run({querySelector: '.someOtherClass', // 渲染特定类名的元素
});await mermaid.run({nodes: [document.getElementById('someId'), document.getElementById('anotherId')], // 渲染特定节点
});await mermaid.run({suppressErrors: true, // 抑制错误
});

API 使用

Mermaid 提供了丰富的 API,例如:

  • render:使用图形定义作为字符串来渲染图形。
  • detectType:确定给定文本中存在的图表类型。
  • parse:在不呈现图形的情况下验证图形定义。

五、总结

通过本文,你已经了解了如何在 Vue 3 项目中集成 Mermaid,并利用其强大的图表生成功能。Mermaid 的简洁语法和丰富功能使其成为 web 开发中不可或缺的可视化工具。无论是简单的流程图还是复杂的序列图,Mermaid 都能轻松应对,为你的项目增添专业性和可视化魅力。

相关链接:
https://mermaid.js.org/config/usage.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/33829.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++算法学习2:二分算法精讲

一、实数二分法回顾 1.1问题背景 在1~2的范围内找到一个x&#xff0c;使得式子5x2 -9x 1 的绝对值<10-9&#xff08;即无限接近0&#xff09; 要求&#xff1a;x精确到小数点后9位。 换句话说也就是求&#xff1a;就是求方程 5x2- 9x 1 0 在1~2内的近似解 1.2怎么找到…

手写一个简易版的tomcat

Tomcat 是一个广泛使用的开源 Servlet 容器&#xff0c;用于运行 Java Web 应用程序。深入理解 Tomcat 的工作原理对于 Java 开发者来说是非常有价值的。本文将带领大家手动实现一个简易版的 Tomcat&#xff0c;通过这个过程&#xff0c;我们可以更清晰地了解 Tomcat 是如何处理…

object.assign和扩展运算法是深拷贝还是浅拷贝,两者区别

object.assign和扩展运算法是深拷贝还是浅拷贝&#xff0c;两者区别 1. 浅拷贝的本质2. Object.assign 和扩展运算符的区别‌3. 具体场景对比‌合并多个对象‌‌复制数组‌‌处理默认值‌ ‌4. 如何实现深拷贝&#xff1f;JSON.parse(JSON.stringify(obj))‌‌递归深拷贝函数第…

X-CLIP和X-FLORENCE论文解读

1.研究背景 尽管已有研究探索了如何将语言-图像模型迁移到其他下游任务&#xff08;如点云理解和密集预测&#xff09;&#xff0c;但视频识别领域的迁移和适应性研究还不够充分。例如&#xff0c;ActionCLIP提出了一种“预训练、提示和微调”的框架用于动作识别&#xff0c;但…

微信小程序刷题逻辑实现:技术揭秘与实践分享

页面展示&#xff1a; 概述 在当今数字化学习的浪潮中&#xff0c;微信小程序以其便捷性和实用性&#xff0c;成为了众多学习者刷题备考的得力工具。今天&#xff0c;我们就来深入剖析一个微信小程序刷题功能的实现逻辑&#xff0c;从代码层面揭开其神秘面纱。 小程序界面布局…

Android UI 组件系列(二):Button 进阶用法

引言 在上一篇博客中&#xff0c;我们介绍了 Button 的基本用法和常见属性&#xff0c;掌握了 Button 的基础知识。然而&#xff0c;在实际开发中&#xff0c;Button 远不止于简单的点击功能&#xff0c;它还可以支持不同的变体、丰富的自定义样式&#xff0c;以及更灵活的状态…

【云馨AI-大模型】RAGFlow功能预览:Dify接入外部知识库RAGFlow指南

介绍 Dify介绍 开源的 LLM 应用开发平台。提供从 Agent 构建到 AI workflow 编排、RAG 检索、模型管理等能力&#xff0c;轻松构建和运营生成式 AI 原生应用。比 LangChain 更易用。官网&#xff1a;https://dify.ai/zh RAGFlow介绍 RAGFlow 是一款基于深度文档理解构建的…

Redis超高并发分key实现

Redis扛并发的能力是非常强的&#xff0c;所以高并发场景下经常会使用Redis&#xff0c;但是Redis单分片的写入瓶颈在2w左右&#xff0c;读瓶颈在10w左右&#xff0c;如果在超高并发下即使是集群部署Redis&#xff0c;单分片的Redis也是有可能扛不住的&#xff0c;如下图所示&a…

缓存使用的具体场景有哪些?缓存的一致性问题如何解决?缓存使用常见问题有哪些?

缓存使用场景、一致性及常见问题解析 一、缓存的核心使用场景 1. 高频读、低频写场景 典型场景&#xff1a;商品详情页、新闻资讯、用户基本信息。特点&#xff1a;数据更新频率低&#xff0c;但访问量极高。策略&#xff1a; Cache-Aside&#xff08;旁路缓存&#xff09;&a…

HTML5(Web前端开发笔记第一期)

p.s.这是萌新自己自学总结的笔记&#xff0c;如果想学习得更透彻的话还是请去看大佬的讲解 目录 三件套标签标题标签段落标签文本格式化标签图像标签超链接标签锚点链接默认链接地址 音频标签视频标签 HTML基本骨架综合案例->个人简介列表表格表单input标签单选框radio上传…

ubuntu22.04 关于挂在设备为nfts文件格式无法创建软连接的问题

最近遇到情况&#xff0c;解压工程报错&#xff0c;无法创建软连接 但是盘内还有130G空间&#xff0c;明显不是空间问题&#xff0c;查找之后发现是移动硬盘的文件格式是NTFS&#xff0c;在ubuntu上不好兼容&#xff0c;于是报错。 开贴记录解决方案。 1.确定文件格式 使用命…

深度解读DeepSeek部署使用安全(48页PPT)(文末有下载方式)

深度解读DeepSeek&#xff1a;部署、使用与安全 详细资料请看本解读文章的最后内容。 引言 DeepSeek作为一款先进的人工智能模型&#xff0c;其部署、使用与安全性是用户最为关注的三大核心问题。本文将从本地化部署、使用方法与技巧、以及安全性三个方面&#xff0c;对Deep…

RK3568 Android13 源码编译

提示&#xff1a;RK3568 Android13 源码编译 脚本&#xff0c;源码编译管理方式优化 文章目录 获取源码设置屏幕配置确认屏幕修改源码的设备树 修改线程数整体编译Android固件配置JDK java 环境 source javaenv.sh使能编译 build/envsetup.sh lunch topeet_rk3568-userdebug整体…

【CentOS】搭建Radius服务器

目录 背景简介&#xff1a;Radius是什么&#xff1f;Radius服务器验证原理搭建Radius服务器环境信息yum在线安装配置FreeRADIUS相关文件clients.conf文件users文件重启服务 验证 参考链接 背景 在项目中需要用到Radius服务器作为数据库代理用户的外部验证服务器&#xff0c;做…

ToB公司找客户专用|大数据获客系统

对于ToB公司而言&#xff0c;找到并吸引合适的潜在客户并非易事。传统的获客手段如参加行业展会、电话推销以及直接拜访等&#xff0c;虽然在过去取得了一定成效&#xff0c;但如今却暴露出诸多问题。首先&#xff0c;这些方法往往成本高昂&#xff0c;无论是时间还是金钱上的投…

Linux 文件权限类

目录 文件属性 从左到右的10个字符表示 rwx作用文件和目录的不同解释 图标&#xff1a; 案例实操 chmod 改变权限 基本语法 经验技巧 案例实操 拓展&#xff1a;可以通过一个命令查看用户列表 chown改变所有者 基本语法 选项说明 案例实操 chgrp 改变所属组 基…

DeepSeek技术解析:MoE架构实现与代码实战

以下是一篇结合DeepSeek技术解析与代码示例的技术文章&#xff0c;重点展示其核心算法实现与落地应用&#xff1a; DeepSeek技术解析&#xff1a;MoE架构实现与代码实战 作为中国AI领域的创新代表&#xff0c;DeepSeek在混合专家模型&#xff08;Mixture of Experts, MoE&…

vue3:八、登录界面实现-页面初始搭建、基础实现

一、初始工作 1、创建登录文件 在src/views中创建文件LoginView.vue文件 2、创建路由 在router/index.js中增加登录的信息 代码 import { createRouter, createWebHistory } from vue-router import HomeView from ../views/HomeView.vue const router createRouter({hist…

dify+mysql的诗词助手

目录 数据库表结构&#xff1a; 数据库查询的http服务搭建&#xff1a; 流程引擎搭建&#xff1a; 开始&#xff0c; HTTP查询数据库&#xff0c; LLM数据分析&#xff0c; 直接回复&#xff0c; 效果测试&#xff1a; 下载链接&#xff1a; 数据库表结构&#xff1a;…

jenkins 配置邮件问题整理

版本&#xff1a;Jenkins 2.492.1 插件&#xff1a; A.jenkins自带的&#xff0c; B.安装功能强大的插件 配置流程&#xff1a; 1. jenkins->系统配置->Jenkins Location 此处的”系统管理员邮件地址“&#xff0c;是配置之后发件人的email。 2.配置系统自带的邮件A…