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

最新推荐文章于 2025-03-27 16:55:31 发布
最新推荐文章于 2025-03-27 16:55:31 发布
阅读量4.7k 收藏 8
点赞数 4
分类专栏： HTML 实用技巧 文章标签： html 流程图 javascript mermaid
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Tisfy/article/details/131464925
版权
本文介绍了如何使用Mermaid.js库在HTML页面上显示Mermaid流程图，无需额外的JS代码。只需引用CDN资源或本地文件，将class为mermaid的标签添加到HTML中，Mermaid会自动将内容转换为流程图。同时提供了大陆可访问的Mermaid.jsCDN替代方案。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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页面中class为mermaid的标签渲染为mermaid流程图。

<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获取。

使用效果：
中文
Haha

大陆可用的使用方法

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

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

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

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

概念到 Mermaid 图表生成器
鸭梨的博客
03-09 910
"你是一个帮助用户生成 Mermaid 图表定义的助手。请确保输出符合 Mermaid 语法。分析要全面,细致，请确保输出符合 Mermaid 语法，不要包含任何分号或多余字符。// 清理输出内容，确保是纯 Mermaid 语法。// 将 Mermaid 代码插入到页面中。// 显式地调用 Mermaid 渲染函数。// 替换为你的API Key。'生成图表失败，请稍后重试。API 请求失败，状态码为。一个简单可本地运行的页面。'生成图表时出错：'
开发人员必备工具！mermaid的详细教学
zhangqinhang1的博客
10-16 7571
Mermaid 是一个基于 JavaScript 的图表绘制库，它可以用于创建流程图、状态图、时序图以及甘特图等各种类型的图表。它以 HTML 形式渲染图表，而不是生成静态图片，这使得它更加灵活和安全。项目地址Mermaid 官方项目地址项目应用：Mermaid 用于在 web 环境中创建各种类型的图表。它可以用于文档、技术博客、项目文档等等，特别适合于与 Markdown 结合使用。Mermaid 可以帮助用户以直观的方式展示各种流程、状态、时序等信息，从而提高文档的可读性和可理解性。
Mermaid官方简介（DeepSeek生成式）
chajinglong的专栏
02-20 4470
让复杂逻辑跃然"码"上——Mermaid 2025全新进化登场！‌ 你是否厌倦了在拖拽式图表工具中反复调整线条、对齐框线、导出失真？ ✨ ‌一行代码生成专业图表，纯文本秒变可视化神器‌——这就是全球300万开发者选择的Mermaid！ ▌‌为什么选择Mermaid？‌ ✅ 用写代码的方式画图：流程图/时序图/类图等15+图表类型，Markdown式语法5分钟上手 ✅ 无缝嵌入文档体系：Git版本可控、跨平台渲染、实时协作编辑 ✅ 2025全新AI辅助模式：智能语法补全 + 交互式预览，开发文档效率提升70
html的网页流程图
08-30
网页的流程图；有的时候；在web页面上药显示一些动态的流程图，这就是一个实例；兼容性没问题
简单HTML流程图
12-09
简单HTML流程图
mermaid图表支持html标签,在Markdown中用mermaid语法绘制图表
weixin_36026440的博客
06-04 694
流程图 该流程图就是用下方的代码再markdown中实现的```mermaidgraph RL;A-->B;A-->C;B-->D;C-->D;```关键词解读关键词功能graph定义流程图TD流程图方向。mermai的方位还有T、D、L、 R，分别代表上、下、左、右。两个方位组合成一个流动方向。本案例是从上到下，即TD-->有向箭头节点还可以用 ::: 调用修饰函数...
蛙蛙推荐：在网页上显示流程图
蛙蛙池塘
09-17 1326
蛙蛙推荐：在网页上显示流程图摘要：在做工作流应用的时候，一般都有工作流跟踪的功能，就是说让用户知道自己处理的这步在整个流程中的位置，以及整个流程的走向。如果是winform，可以用一些控件来显示定义好的流程图让用户看，而在web上就不太展示了，这里不用svg,vml也不用flash和servlight就能给用户展现流程图。在本文中你将学到1、怎样用xmlhttp来获远程的xml文
mermaid图表支持html标签,分享一个把 HTML 转换成印象笔记格式的库，支持代码高亮和把 ECharts、mermaid 转成印象笔记支持的图片，另外：MWeb 半价促销一周。...
weixin_33251169的博客
06-04 454
这个库是由 cyhhao 特意为 MWeb 做的，但是我觉得对于有分享到印象笔记功能需求的朋友非常有用，所以分享出来。这个库的原理和用法在作者的 github 中有详细说明了，我这里主要说说在套进 MWeb 过程中遇到的小问题的解决方案。第一个问题是 SVG 问题，Mermaid 是用 SVG 而不是 Canvas 画图的，不能直接像 Canvas 这样转。解决这个问题花了不少时间，但是其实很简单...
Mermaid 使用教程之流程图 - 从入门到精通
接受带人学编程，有意私信
01-07 6069
​Mermaid 流程图由节点（几何形状）和边（箭头或线）组成。Mermaid代码定义了如何创建节点和边，并适应不同的箭头类型、多方向箭头，以及与子图的链接。
Typora上使用Mermaid语法展示流程图、时序图、甘特图
08-26
Typora上使用Mermaid语法展示流程图、时序图、甘特图
Mermaid流程图
江月的博客
01-18 2424
Mermaid是一个基于JavaScript的绘图工具，使用类似于Markdown的语法，允许用户通过代码创建各种图表，包括流程图、状态图、时序图和甘特图等。它可以将代码块转化为HTML代码，并支持多种图表的方向。Mermaid极大地简化了复杂图的绘制和维护，对于熟悉Markdown语法的用户来说，可以快速上手。Mermaid 是一个用于生成流程图的 JavaScript 库，使用 Markdown 语法进行描述。通过 Mermaid，用户可以在文本编辑器中编写流程图代码，然后将其渲染为可视化的流程图。
vscode-markdown-mermaid:将人鱼图和流程图支持添加到VS Code的内置markdown预览中
04-28
将人鱼图和流程图支持添加到VS Code的内置markdown预览中 用法 使用mermaid围栏代码块在markdown中创建图： ```mermaid graph TD; A-->B; A-->C; B-->D; C-->D; ``` 您也可以使用:::块： ::: ...
流程图的新语法-mermaid的快速使用--推荐
wtt234的专栏
04-12 1048
在文字编辑页面输入“三个点+mermaid”回车键入代码，要注意的是其中三个点，按键位置在Tab上面，在英文状态下输入，结尾也要有三个点。a.typora设置，选择上“图表 （序列、刘晨图和...）”把代码黏贴到这个地方就是可以看出流程图了。b.typora中输入代码的方式。
mermaid图表支持html标签,扩展markdown增加mermaid支持画图
weixin_33171058的博客
06-04 384
>我看网上没有什么资料，只有说怎么去用它，没有说怎么才能用它。那就自己慢慢研究在让markdown支持，要自己实现这个必须要看源码，看懂它渲染的逻辑，然后修改源码，其实也挺好的，看懂源码后面自己还想要扩展什么功能也方便！####要想让自己的markdown支持mermaid先要看看mermaid的资料官网：https://mermaidjs.github.io/#/>吐槽一下资料是真的...
Mermaid 教程
Persus & Xie
01-11 2096
Mermaid 是一个用于生成流程图、时序图、甘特图等图表的 JavaScript 库。它使用类似于 Markdown 的文本语法，使得创建图表变得简单直观。以下是一个简单的 Mermaid 教程，介绍如何使用 Mermaid 创建流程图、时序图和甘特图。
html布局之发展流程图
qq_56058244的博客
01-10 1581
表示发展流程的圆圈和线条怎么布？ 3.总结 bootstrap布局还是很灵活，用content的边界线布局这条蓝线有点障眼法的感觉，尤其在屏幕适配的部分显得很呆板，需要非常细的调整（现在我也想不出更好的的qwq），尤其在奇数个圆圈的时候还要考虑怎么分配这12个区块（我这里是2+3+2+3）。 本人刚刚入门，还望大家多多指教！（觉得有帮助，点个赞哈哈哈哈）
Mermaid说明
pumpkin84514的博客
09-12 6228
在 Mermaid 中，注释使用%%符号添加。这些注释在生成的图形中不会显示，它们仅用于在 Mermaid 源代码中添加额外的说明或文档。可以根据具体的图类型在适当的位置添加注释，以提高代码的可读性和可维护性。
在 Markdown 中使用 Mermaid 显示图表，例如流程图、甘特图、正态分布图和桑基图。应用场景：书写需求文档 (使用流程图、原型图、数据流图辅助说明复杂逻辑)
专注于计算机研发知识和资讯分享
03-20 624
比如流程图用graph TD，序列图用sequenceDiagram，甘特图用gantt。每个例子需要展示代码块的结构，注意使用三个反引号包裹，并标明mermaid语言，这样才能正确渲染。本地编辑器：VS Code 需安装插件 Markdown Preview Mermaid Support。可以直接在 Markdown 中通过特定语法绘制流程图、时序图、甘特图等。例如：功能需求需附业务流程图和界面原型图，标明字段校验规则和交互逻辑。k3/RFID电子标签/传感器/人工录入。应用场景：书写需求文档。
htmlmermaid
最新发布
qq_41527385的博客
03-27 362
引入mermaid.js库。
v-md-preview如何导入Mermaid.js以显示流程图
09-14
v-md-preview是一个Vue组件，用于在Markdown文件中预览内容。而Mermaid.js是一个基于JavaScript的图表绘制工具，可以用来生成流程图、序列图、甘特图等。要在v-md-preview中导入并使用Mermaid.js以显示流程图，你可以按照以下步骤操作： 1. 安装Mermaid.js：首先，你需要在你的项目中安装Mermaid.js。可以通过npm或yarn来安装： ```bash npm install mermaid # 或者 yarn add mermaid ``` 2. 导入Mermaid.js：在你的Vue组件中导入Mermaid.js。通常你可以直接在需要渲染Mermaid图表的组件中导入： ```javascript import mermaid from 'mermaid'; ``` 3. 初始化Mermaid：在你的Vue组件的`mounted`钩子中初始化Mermaid： ```javascript export default { mounted() { mermaid.initialize({ startOnLoad: true }); } } ``` 4. 使用Mermaid语法：在Markdown内容中，你可以使用Mermaid的语法来创建图表。例如： ```markdown 这是一个流程图的例子： ```mermaid graph TD; A-->B; A-->C; B-->D; C-->D; ``` ``` 请注意，为了正确解析Markdown中的Mermaid语法，你可能需要确保v-md-preview对Mermaid语法的支持。 5. 配置v-md-preview：确保v-md-preview配置正确，支持Mermaid.js的渲染。这可能需要查看v-md-preview的文档或源代码来确定是否有相关配置。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Tisfy

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值