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

news2025/3/15 6:00:42

在现代 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 TD
    A[开始] --> 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.coloradmin.cn/o/2315275.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

茂捷M1001电感式编码器芯片TSSOP28管脚,国产电感式编码器IC

简述&#xff1a; M1001 电感式编码器芯片是一款专为高精度位置检测而设计的芯片产品&#xff0c;采用先进的电感技术&#xff0c;能够精确测量旋转物体的位置和角度。芯片具有 SIN/COS、模拟、PWM、SENT、SPI、I2C等多种角度输出功能&#xff0c;具有高分辨率、宽工作温度范围…

LeetCode-跳跃游戏 II

方法一&#xff1a;反向查找出发位置 我们的目标是到达数组的最后一个位置&#xff0c;因此我们可以考虑最后一步跳跃前所在的位置&#xff0c;该位置通过跳跃能够到达最后一个位置。 如果有多个位置通过跳跃都能够到达最后一个位置&#xff0c;那么我们应该如何进行选择呢&a…

数据结构——双向链表dlist

前言&#xff1a;大家好&#x1f60d;&#xff0c;本文主要介绍了数据结构——双向链表dlist 一 双向链表定义 1. 双向链表的节点结构 二 双向链表操作 2.1 定义 2.2 初始化 2.3 插入 2.3.1 头插 2.3.2 尾插 2.3.3 按位置插 2.4 删除 2.4.1 头删 2.4.2 尾删 2.4.3 按…

IDEA 一键完成:打包 + 推送 + 部署docker镜像

1、本方案要解决场景&#xff1f; 想直接通过本地 IDEA 将最新的代码部署到远程服务器上。 2、本方案适用于什么样的项目&#xff1f; 项目是一个 Spring Boot 的 Java 项目。项目用 maven 进行管理。项目的运行基于 docker 容器&#xff08;即项目将被打成 docker image&am…

图像分类数据集

《动手学深度学习》-3.5-学习笔记 # 通过ToTensor实例将图像数据从PIL类型变换成32位浮点数格式&#xff0c; # 并除以255使得所有像素的数值均在0&#xff5e;1之间 trans transforms.ToTensor()#用于将图像数据从 PIL 图像格式&#xff08;Python Imaging Library&#xff…

设计模式之美

UML建模 统一建模语言&#xff08;UML&#xff09;是用来设计软件的可视化建模语言。它的语言特点是简单 统一 图形化 能表达软件设计中的动态与静态信息。 UML的分类 动态结构图&#xff1a; 类图 对象图 组件图 部署图 动态行为图&#xff1a; 状态图 活动图 时序图 协作…

2025-03-15 学习记录--C/C++-PTA 练习3-4 统计字符

合抱之木&#xff0c;生于毫末&#xff1b;九层之台&#xff0c;起于累土&#xff1b;千里之行&#xff0c;始于足下。&#x1f4aa;&#x1f3fb; 一、题目描述 ⭐️ 练习3-4 统计字符 本题要求编写程序&#xff0c;输入10个字符&#xff0c;统计其中英文字母、空格或回车、…

802.11标准

系列文章目录 文章目录 系列文章目录一、相关知识二、使用步骤1.802.11修正比较2.802.11ac 三、杂记 一、相关知识 跳频扩频&#xff1a;射频信号可分为窄带信号和扩频信号。如果射频信号的带宽大于承载数据所需的带宽&#xff0c;该信号就属于扩频信号。跳频扩频(FHSS)是一种…

母婴商城系统Springboot设计与实现

项目概述 《母婴商城系统Springboot》是一款基于Springboot框架开发的母婴类电商平台&#xff0c;旨在为母婴产品提供高效、便捷的在线购物体验。该系统功能全面&#xff0c;涵盖用户管理、商品分类、商品信息、商品资讯等核心模块&#xff0c;适合母婴电商企业或个人开发者快…

C#通过API接口返回流式响应内容---分块编码方式

1、背景 上一篇文章《C#通过API接口返回流式响应内容—SSE方式》阐述了通过SSE&#xff08;Server Send Event&#xff09;方式&#xff0c;由服务器端推送数据到浏览器。本篇是通过分块编码的方式实现 2、效果 3、具体代码 3.1 API端实现 [HttpGet] public async Task Chu…

游戏引擎学习第158天

回顾和今天的计划 我们在这里会实时编码一个完整的游戏&#xff0c;没有使用引擎或库&#xff0c;一切都由我们自己做所有的编程工作&#xff0c;游戏中的每一部分&#xff0c;无论需要做什么&#xff0c;我们都亲自实现&#xff0c;并展示如何完成这些任务。今天&#xff0c;…

[新能源]新能源汽车快充与慢充说明

接口示意图 慢充接口为交流充电口&#xff08;七孔&#xff09;&#xff0c;快充接口为直流充电口&#xff08;九孔&#xff09;。 引脚说明 上图给的是充电口的引脚图&#xff0c;充电枪的为镜像的。 慢充接口引脚说明 快充接口引脚说明 充电流程 慢充示意图 慢充&…

在IDEA中连接达梦数据库:详细配置指南

达梦数据库&#xff08;DM Database&#xff09;作为国产关系型数据库的代表&#xff0c;广泛应用于企业级系统开发。本文将详细介绍如何在IntelliJ IDEA中配置并连接达梦数据库&#xff0c;助力开发者高效完成数据库开发工作。 准备工作 1. 下载达梦JDBC驱动 访问达梦官方资…

基于yolov8+streamlit实现目标检测系统带漂亮登录界面

【项目介绍】 基于YOLOv8和Streamlit实现的目标检测系统&#xff0c;结合了YOLOv8先进的目标检测能力与Streamlit快速构建交互式Web应用的优势&#xff0c;为用户提供了一个功能强大且操作简便的目标检测平台。该系统不仅具备高精度的目标检测功能&#xff0c;还拥有一个漂亮且…

软件性能测试与功能测试联系和区别

随着软件开发技术的迅猛发展&#xff0c;软件性能测试和功能测试成为了确保软件质量的两个重要环节。那么只有一字之差的性能测试和功能测试分别是什么?又有哪些联系和区别呢? 一、软件性能测试是什么?   软件性能测试是为了评估软件系统在特定条件下的表现&#xff0c;包…

Axure设计之堆叠柱状图教程(中继器)

堆叠柱状图是一种常用的数据可视化工具&#xff0c;它通过在同一柱状图内堆叠不同类别的数据&#xff0c;以展示每个类别在总体中的贡献或占比。堆叠柱状图不仅可以帮助我们观察数据的总量&#xff0c;还能清晰地揭示各部分之间的关系和变化趋势。以下是一个使用Axure制作动态效…

本地部署Hive集群

规划 服务机器Hive本体部署在Node1元数据服务所需的关系型数据库(MYSQL)部署在Node1 安装MYSQL数据库 # 更新密钥 rpm --import https://repo.mysql.com/RPM-GPG-KEY-mysql-2022# 安装Mysql yum库 rpm -Uvh http://repo.mysql.com//mysql57-community-release-el7-7.noarch.…

零成本本地化搭建开源AI神器LocalAI支持CPU推理运行部署方案

文章目录 前言1. Docker部署2. 简单使用演示3. 安装cpolar内网穿透4. 配置公网地址5. 配置固定公网地址 前言 嘿&#xff0c;小伙伴们&#xff01;今天给大家带来一个超酷的黑科技——LocalAI。没错&#xff0c;你没听错&#xff0c;就是那个能在你的个人电脑上运行大型语言模…

git使用命令总结

文章目录 Git 复制创建提交步骤Git 全局设置:创建 git 仓库:已有仓库? 遇到问题解决办法&#xff1a;问题一先git pull一下&#xff0c;具体流程为以下几步&#xff1a; 详细步骤 Git 复制 git clone -b RobotModelSetting/develop https://gitlab.123/PROJECT/123.git创建提…

内容中台的核心架构是什么?

模块化架构设计解析 内容中台的模块化架构通过分层解耦实现灵活扩展&#xff0c;其核心由基础资源层、能力服务层与业务应用层构成。基础层以统一数据治理体系为支撑&#xff0c;通过标准化接口实现结构化与非结构化数据的统一存储&#xff0c;例如Baklib采用分布式存储架构保…