HTML - 在网页上显示mermaid流程图(使用纯js在网页上显示mermaid流程图)

news/2024/5/19 1:08:12 标签: html, 流程图, javascript, mermaid

mermaidjsmermaid_1">HTML - 在网页上显示mermaid流程图(使用纯js在网页上显示mermaid流程图

本文讲解如何使用纯JS在HTML中渲染mermaid流程图

前言

首次使用纯JS渲染mermaid公式是在编译原理课的程序设计正则表达式转DFA的可视化上。(Re2DFA)

由于美化博客时想要能支持mermaid,故特地再次使用了mermaidjs,并记录了使用方法,以供下次使用。

官方使用方法(大陆无法访问)

mermaid的官网是mermaid.js.org,其Github项目地址为mermaid-js/mermaid

其使用方法很简单,不需要预备的js代码,只需要单独地调用一个mermaid-js库即可。

调用完成后,mermaid-js将会默认将HTML页面中classmermaid的标签渲染为mermaid流程图

html"><span class='mermaid'>
graph LR
Box1["Hi"] --> BoxHaha["Haha"]
</span>
<script src="https://cdn.jsdelivr.net/npm/mermaid@10.2.3/dist/mermaid.min.js"></script>

怎么获取最新版的mermaidjs地址呢?最新版的mermaidjs地址可以在https://www.jsdelivr.com/package/npm/mermaid获取。

使用效果:

mermaid"> mermaid-svg-sZRF3fzkCIf2KfM5" width="174.02499389648438" xmlns="http://www.w3.org/2000/svg" height="62" viewbox="0 0 174.02499389648438 62" class="mermaid-svg">
中文
Haha

大陆可用的使用方法

由于某些滥用的原因,jsdelivr在大陆无法访问。

因此必须借助其他js源,或者将mermaid所需代码等下载至本地。

笔者为此提供了一个大陆的可用服务,使用笔者提供的https://letmefly.xyz/Links/mermaid.min.js能够正常使用mermaid

原创不易,转载请附上原文链接哦~
Tisfy:https://letmefly.blog.csdn.net/article/details/131464925


http://www.niftyadmin.cn/n/699179.html

相关文章

C++ Primer Plus笔记: 2023.06.29

1.对指针解除引用意味着获得指针指向的值。 2.C允许将指针和整数相加。加1的结果等于原来的地址加上指向的对象占有的总字节数。还可以将一个指针减去另一个指针&#xff0c;获得两个指针的差。后一种运算将得到一个整数&#xff0c;仅当两个指针指向同一个数组&#xff08;也…

功能键F4在Microsoft Excel中有什么用

的确,许多 Excel 用户发现使用键盘快捷键对他们来说更有效。事实上,键盘快捷键可能是使用鼠标的最佳选择,因为使用 Excel 时使用触摸屏可能不是视力障碍者的最佳选择。 使用功能键,如 Excel 中的 F4 以及 F2 可能是非常必要的。在这篇文章中,我们将研究功能键 F4 及其在 …

Linux Shell高级话题

预计更新 1: 基础知识 简介和安装 基本命令 变量和环境变量 2: 流程控制 条件语句 循环语句 函数 3: 文件处理 文件读写 文件权限和所有权 文件搜索和替换 4: 网络和进程 网络通信 进程管理 信号处理 5: 文本处理 正则表达式 文本分析和处理 生成报告和日志 6: 用户界面 命…

npm 包 - serve 使用

前端打包后&#xff0c;或者本地的html文件。有时需要将打包好的项目跑一下看看效果&#xff0c;这时就可以使用 serve 工具&#xff0c;在本地启动一个静态文件服务器。本文主要简单记录下 npm 包 serve 的基本使用命令。 一、全局安装 serve npm install serve -g二、运行 s…

go 语言string

go 语言string Go语言中的字符串&#xff08;string&#xff09;是一种不可变的字节序列。它是以UTF-8编码的Unicode字符集的一个集合。在Go中&#xff0c;字符串是原生类型&#xff0c;使用双引号或反引号括起来表示。 以下是关于Go语言字符串的一些重要特性&#xff1a; 字…

scrapy的反反爬

爬虫的反反爬策略 反反爬的总体思想○ 将爬虫伪装成自然人的浏览行为 自然人浏览的特点○ 访问频率不会太过于高○ 使用浏览器进行访问○ 网站设置登录要求后仍然能够正常访问○ 可以完成验证操作 scrapy的反反爬功能的实现○ 爬虫配置文件setting.py○ 爬虫框架的中间件使…

Android 性能优化——APP启动优化(一)

一、APP启动流程 首先在《Android系统和APP启动流程》中我们介绍了 APP 的启动流程,但都是 FW 层的流程,这里我们主要分析一下在 APP 中的启动流程。要了解 APP 层的启动流程,首先要了解 APP 启动的分类。 1、启动分类 冷启动 应用从头开始启动,即应用的首次启动…

Pytorch--模型微调finetune--迁移学习 (待继续学习)

https://www.bilibili.com/video/BV1Z84y1T7Zh/?spm_id_from333.788&vd_source3fd64243313f29b58861eb492f248b34 主要方法 torchvision 微调timm 微调半精度训练 背景&#xff08;问题来源&#xff09; 解决方案 大模型无法避免过拟合&#xff0c;