当前位置: 首页 > news >正文

从报错到成功:Mermaid 流程图语法避坑指南✨

🚀 从报错到成功:Mermaid 流程图语法避坑指南 🚀

🚨 问题背景

在开发文档或技术博客中,我们经常使用 Mermaid 流程图 来可视化代码逻辑。但最近我在尝试绘制一个 Java Stream 转换流程图时,遭遇了以下报错:
🔥 Error: Parse error on line 2... Expecting 'SQE', got 'PS' 🔥
经过多次调试,最终解决了 尖括号转义特殊符号处理 等关键问题。以下是完整的踩坑记录和解决方案!


🔍 错误复现

⚠️ 初始错误代码

flowchart TDA[Start: List<InviteCode> <br> inviteCodes] --> B[Stream<InviteCode> <br> inviteCodes.stream()]B --> C[For each InviteCode in Stream]...

❌ 错误现象

Mermaid 解析器报错:Expecting 'SQE', got 'PS',指向箭头连接符后的节点定义,流程图直接 渲染失败!💥


🛠️ 分步解决方案

🔧 阶段一:尖括号转义问题

🎯 错误原因

Mermaid 会将 <> 识别为 HTML 标签,导致语法树解析混乱。例如 List<InviteCode> 会被误认为 未闭合的标签

✅ 修复方法

使用 HTML 实体转义符号:

- List<InviteCode>  // 🚫 错误写法
+ List&lt;InviteCode&gt; // ✅ 正确写法
📝 修改后代码
flowchart TDA[Start: List&lt;InviteCode&gt; <br> inviteCodes] --> B[Stream&lt;InviteCode&gt; <br> inviteCodes.stream()]...

🔧 阶段二:特殊符号包裹问题

🎯 新报错

即使转义了尖括号,仍然报错:Expecting 'SQE', got 'PS' 😱

💡 错误根源

Mermaid 对节点文本中的 空格括号换行符 <br> 敏感,未包裹的文本会被分割成多个语法元素!

✅ 终极修复

用双引号包裹含特殊符号的文本:

- A[Start: List&lt;InviteCode&gt; <br> inviteCodes]  // 🚫 未包裹
+ A["Start: List&lt;InviteCode&gt; <br> inviteCodes"] // ✅ 双引号包裹
🌟 最终正确代码
Start: List<InviteCode>
inviteCodes
Stream<InviteCode>
inviteCodes.stream()
For each InviteCode in Stream
Extract Key:
InviteCode::getId
(e.g., id=20)
Extract Value:
ic -> ic
(e.g., InviteCode object)
Key-Value Pair:
(20, InviteCode(id=20, ...))
Collect to Map<Integer, InviteCode>
Collectors.toMap()
End: Map<Integer, InviteCode>
inviteCodeMap

📜 核心原则总结

  1. 转义所有尖括号 🔠
    <&lt;
    >&gt;
    • 📌 通用规则:所有泛型声明都需要转义!

  2. 包裹含特殊符号的文本 📦
    • 如果文本包含 [], (), <br>, / 或空格,必须用双引号包裹:["Text with symbols"]
    • ❗ 重要提示:箭头后的节点定义必须立刻接双引号,例如 --> C["描述文本"]

  3. 换行符保留规则
    <br> 可以正常使用,但必须位于双引号包裹的文本块内

  4. 箭头语法的纯净性 ➡️
    • 确保连接符 --> 后面紧跟节点定义,不要掺杂未包裹的文本


🛠️ 验证工具推荐

Mermaid Live Editor 🔗 https://mermaid.live
实时渲染调试,可快速定位语法错误位置,开发者的救命神器! 🚑


🎉 最终效果

在这里插入图片描述


💡 经验延伸

• 当 Mermaid 报 Expecting 'XXX', got 'YYY' 时,通常意味着:
• 🚩 符号未转义
• 🚩 文本块未正确包裹
• 🚩 存在非法嵌套结构
• 🔍 优先检查箭头连接符(-->)附近的语法
• 👉 复杂文本建议先在 Mermaid Live Editor 中逐段验证


希望这篇博客能帮助您避开 Mermaid 的常见语法陷阱。如果遇到其他问题,欢迎在评论区交流!🎯
Happy Coding! 👨💻👩💻


✨ 下期预告:如何用 Mermaid 绘制时序图?订阅专栏不错过更新!🔔

相关文章:

从报错到成功:Mermaid 流程图语法避坑指南✨

&#x1f680; 从报错到成功&#xff1a;Mermaid 流程图语法避坑指南 &#x1f680; &#x1f6a8; 问题背景 在开发文档或技术博客中&#xff0c;我们经常使用 Mermaid 流程图 来可视化代码逻辑。但最近我在尝试绘制一个 Java Stream 转换流程图时&#xff0c;遭遇了以下报错…...

TDengine 中的 show 命令

简介 SHOW 命令可以用来获取简要的系统信息。若想获取系统中详细的各种元数据、系统信息和状态&#xff0c;请使用 select 语句查询 INFORMATION_SCHEMA 数据库中的表, 详见 元数据查询 SHOW APPS SHOW APPS;显示接入集群的应用&#xff08;客户端&#xff09;信息。 SHOW …...

博弈论中的均衡精炼:完美贝叶斯均衡、序贯均衡与颤抖手均衡详解

博弈论中的均衡精炼&#xff1a;完美贝叶斯均衡、序贯均衡与颤抖手均衡详解 1. 引言&#xff1a;为什么需要均衡精炼&#xff1f; 在博弈论中&#xff0c;纳什均衡是分析策略互动的核心工具&#xff0c;但其存在一个显著缺陷&#xff1a;无法排除不合理的均衡。例如&#xff0…...

github代理 | 快速clone项目

代理网址&#xff1a; https://ghproxy.com/ https://ghproxy.com/代理网址&#xff1a; https://ghproxy.com/ 比如需要克隆的项目git地址为&#xff1a;https://github.com/AUTOMATIC1111/stable-diffusion-webui.git git clone https://ghproxy.com/https://github.com/AUTO…...

C语言基础与进阶学习指南(附运行效果图及术语解析)

C语言基础与进阶学习指南&#xff08;附运行效果图及术语解析&#xff09; 目录 C语言标准与编译流程CPU与内存基础C语言基础语法数据类型详解变量与内存管理运算符与表达式输入输出函数函数与内存管理指针与内存操作结构体与高级应用 1. C语言标准与编译流程 1.1 C语言标准演…...

【Scrapy】Scrapy教程8——处理子链接

通过前面几篇文章,已经了解了如何去爬取网页内容并存储到数据库,但是目前只是存储了一个页面的内容,现在想要获取每篇文章链接内的文章内容,我们来看看怎么获取。 生成新请求 首先我们肯定要先拿到链接,所以第一步都获取文章标题和链接肯定少不了,然后再爬取获取到到子…...

Python推导式深入解析

引言 Python 以其简洁、高效的语法而备受开发者喜爱&#xff0c;其中推导式&#xff08;Comprehensions&#xff09;更是 Python 语法的一大特色。推导式提供了一种简洁明了的方式来创建列表、集合和字典等数据结构&#xff0c;让代码更加紧凑和易读。本文将深入探讨 Python 推…...

在 macOS 上配置 SSH 连接 GitHub

在 macOS 上使用 SSH 连接 GitHub&#xff0c;可以免去每次使用 Git 时输入密码的麻烦&#xff0c;提高开发效率。本文将介绍如何在 macOS 上生成 SSH 密钥并配置 GitHub 进行身份认证。 1. 检查是否已有 SSH 密钥 在终端运行以下命令&#xff0c;检查是否已有 SSH 密钥&#…...

常考计算机操作系统面试习题(二)(中)

目录 24. 操作系统的主要功能有哪些&#xff1f; 25. 文件的属性主要有哪些&#xff1f; 26. 对文件的基本操作主要有哪些&#xff1f; 27. 目录的基本操作有哪些&#xff1f; 28. 目录的逻辑结构有哪些种&#xff1f; 29. 简述银行家算法的Available、Max、Allocation、…...

手机录视频风噪太大?华为Pura X“AI降风噪“太硬核了

你是否也在用手机录像时&#xff0c;比如大海海浪、阅览群山、空旷的原野的时候&#xff0c;呼啸的风总是能沦为刺耳的噪音&#xff0c;让精心构思的镜头&#xff0c;最后因为呼啸的风声最终成为“灾难现场”。传统的解决方式往往陷入两难&#xff1a;物理防风罩影响收音指向性…...

React 事件处理

1. React 事件处理的基本概念 React 事件处理的特点&#xff1a; 驼峰命名法&#xff1a;事件名采用驼峰命名法&#xff0c;如 onClick、onChange。JSX 语法&#xff1a;事件处理函数通过 JSX 传递给元素&#xff0c;如 <button onClick{handleClick}>。合成事件&#…...

搭建React简单项目

一、项目构建 目录结构&#xff1a; 安装脚手架 npm install -g create-react-app // or yarn add -g create-react-app 一、项目版本 1、react&#xff1a;"^18.3.1"&#xff1b; 2、react-router-dom&#xff1a;"^6.23.1"&#xff1b; 3、项目创…...

ROCK 280A-M 工业级电调:高性能无人机动力心脏,重塑严苛场景飞行边界

—— 工业级动力控制系统解决方案 —— 【产品概述】 针对工业级无人机高负载、复杂工况需求&#xff0c;南昌长空科技的ROCK 280A-M 电调以航空级标准打造动力控制中枢。采用工业级控制算法与智能自适应系统&#xff0c;为多旋翼 / 固定翼无人机提供稳定动力支撑&#xff0c;突…...

带你从入门到精通——自然语言处理(十. BERT)

建议先阅读我之前的博客&#xff0c;掌握一定的自然语言处理前置知识后再阅读本文&#xff0c;链接如下&#xff1a; 带你从入门到精通——自然语言处理&#xff08;一. 文本的基本预处理方法和张量表示&#xff09;-CSDN博客 带你从入门到精通——自然语言处理&#xff08;二…...

八股JAVA并发

多线程 线程的创建方式有哪些? 1.继承Thread类 2.实现Runnable接口 3.Callable接口FutureTask 4.线程池 1.继承Thread类 这是最直接的一种方式&#xff0c;用户自定义类继承java.lang.Thread类&#xff0c;重写其run()方法&#xff0c;run()方法中定义了线程执行的具体任务。…...

#include <hello.h> 与 #include “hello.h“的区别

#include <hello.h> 和 #include "hello.h" 在C/C中用于包含头文件&#xff0c;但它们在搜索头文件时的行为有所不同&#xff0c;这可能导致前者找不到头文件的情况。 ### 区别 1. **搜索路径不同** - #include "hello.h"&#xff1a;编译器首先…...

PyPDF2简单介绍

PyPDF2 是一个开源的纯 Python 库&#xff0c;用于读取、操作和创建 PDF 文件。它最初是 PyPDF 的改进版&#xff0c;功能更丰富。 安装&#xff1a; bash pip install PyPDF2核心功能 1.合并 PDF 文件 python from PyPDF2 import PdfMergermerger PdfMerger() merger.appe…...

记录flutter编译项目遇到的问题

目录 1.更换flutter版本 2.解压到指定地址 3.在Android Studio配置 问题: Flutter assets will be downloaded from https://storage.flutter-io.cn. Make sure you trust this source! Resolving dependencies... The current Dart SDK version is 3.3.0. Because coach d…...

小米AX6000上安装tailscale

在之前的文章中&#xff0c;已经介绍了如何解锁ax6000的ssh&#xff0c;以及必坑指南。 今天突发奇想&#xff0c;为了不让我的nas天天开着tailscale&#xff0c;所以我想让我的tailscale运行在路由器&#xff0c;这样完美实现穿透。 首先&#xff0c;通过ssh登录ax6000&#x…...

git使用经验(一)

git使用经验&#xff08;一&#xff09; 我之前已经下载了别人的代码&#xff0c;我想在此基础上进行修改&#xff0c;并移动到自己的私有仓库&#xff0c;方便上传到自己的私有仓库自己进行版本控制 git clone下来别人的代码&#xff0c;删除有关git的隐藏文件 进入到自己的…...

C语言【文件操作】详解中

引言 介绍和文件操作中文件的顺序读写相关的函数 看这篇博文前&#xff0c;希望您先仔细看一下这篇博文&#xff0c;理解一下文件指针和流的概念&#xff1a;C语言【文件操作】详解上-CSDN博客文章浏览阅读606次&#xff0c;点赞26次&#xff0c;收藏4次。先整体认识一下文件是…...

基于SpringBoot的在线学习平台

项目介绍 平台采用B/S结构&#xff0c;后端采用主流的SpringBoot语言进行开发&#xff0c;前端采用主流的Vue.js进行开发。是一个综合的在线学习平台&#xff0c;该平台有管理员、教师、学生三类角色&#xff0c;各项功能根据不同角色分别设定。 整个平台包括前台和后台两个部分…...

鸿蒙生态开发

鸿蒙生态开发概述 鸿蒙生态是华为基于开源鸿蒙&#xff08;OpenHarmony&#xff09;构建的分布式操作系统生态&#xff0c;旨在通过开放共享的模式连接智能终端设备、操作系统和应用服务&#xff0c;覆盖消费电子、工业物联网、智能家居等多个领域。以下从定义与架构、核心技术…...

qt实现一个简单http服务器和客户端

一、功能简介 服务器&#xff1a; 登录功能、下载文件功能 客户端&#xff1a; 登录功能、下载文件功能、上传成绩功能 二、服务器代码 //HttpServer.h #ifndef HTTPSERVER_H #define HTTPSERVER_H#include <QMainWindow> #include <QTcpSocket> #include <QTc…...

深入理解Linux网络随笔(五):深度理解本机网络I/O

深入理解Linux网络随笔&#xff08;五&#xff09;&#xff1a;深度理解本机网络I/O 文章目录 深入理解Linux网络随笔&#xff08;五&#xff09;&#xff1a;深度理解本机网络I/O本机发送过程本机接收过程总结 分析本机网络I/O部分源码需要知道本机I/O是什么&#xff1f;扮演什…...

Debian12生产环境配置笔记

在 Debian 12 上进行生产环境配置的详细步骤&#xff0c;涵盖软件更新、基础软件安装、Docker 及 Redis 部署&#xff0c;以及 Nginx 配置多个虚拟主机等内容。所有命令均以 root 用户身份执行&#xff0c;无需添加 sudo 1. 更新软件 首先&#xff0c;确保系统上的所有软件包…...

工业物联网的范式革命:从“云边“ 到“边边” 协的技术跃迁

基于DIOS操作系统的去中心化重构 一、云边协同模式的局限性&#xff1a;技术瓶颈与成本困局 当前工业物联网主流的云边协同架构&#xff08;Cloud-Edge Collaboration&#xff09;已暴露出显著短板&#xff0c;其核心问题源于对中心云的过度依赖&#xff1a; ​带宽资源挤占与…...

python学习笔记--实现简单的爬虫(二)

任务&#xff1a;爬取B站上最爱欢迎的编程课程 网址&#xff1a;编程-哔哩哔哩_bilibili 打开网页的代码模块&#xff0c;如下图&#xff1a; 标题均位于class_"bili-video-card__info--tit"的h3标签中&#xff0c;下面通过代码来实现&#xff0c;需要说明的是URL中…...

【蓝桥杯速成】| 8.回溯算法

因为在进行背包问题的练习时&#xff0c;发现很多题目需要回溯&#xff0c;但本人作为小白当然是啥也不知道 那么就先来补充一下回溯算法的知识点&#xff0c;再进行练习 理论基础 回溯算法本质上是一种递归函数&#xff0c;是纯暴力搜索方法&#xff0c; 适合组合问题、排列…...

聚水潭商品信息集成MySQL的高效解决方案

聚水潭商品信息集成到MySQL的技术案例分享 在数据驱动的业务环境中&#xff0c;如何高效、准确地将聚水潭系统中的商品信息集成到MySQL数据库&#xff0c;是许多企业面临的重要挑战。本文将详细介绍一个实际运行的方案——“聚水潭-商品信息查询-->BI崛起-商品信息表_copy”…...

【数学建模】多目标规划模型:原理、方法与应用

多目标规划模型&#xff1a;原理、方法与应用 文章目录 多目标规划模型&#xff1a;原理、方法与应用引言1. 多目标规划的基本概念1.1 数学模型1.2 Pareto最优解/有效解1.3 满意解方法 2. 多目标规划的主要求解方法2.1 加权求和法2.2 ε-约束法2.3 理想点法2.4 优先级法&#x…...

基于Spring Boot的党员学习交流平台的设计与实现(LW+源码+讲解)

专注于大学生项目实战开发,讲解,毕业答疑辅导&#xff0c;欢迎高校老师/同行前辈交流合作✌。 技术范围&#xff1a;SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容&#xff1a;…...

Flink CDC 与 SeaTunnel CDC 简单对比

Flink CDC 与 SeaTunnel CDC 简单对比 CDC 技术概述 变更数据捕获&#xff08;Change Data Capture&#xff0c;简称 CDC&#xff09;是一种用于捕获数据库中数据变更的技术&#xff0c;能够实时识别、捕获并输出数据库中的插入、更新和删除操作。CDC 技术在现代数据架构中扮…...

ARM 汇编基础

ARM 汇编是嵌入式开发、操作系统底层编程和性能优化的核心技能之一。以下是一份系统的 ARM 汇编指令教学指南&#xff0c;涵盖基础语法、核心指令、编程模式和实用示例。 ​1. ARM 汇编基础 ​ 1.1 寄存器 ARM 架构&#xff08;32位&#xff09;包含 ​16 个通用寄存器​&…...

【嵌入式狂刷100题】- 1基础知识部分

准备新开专栏【嵌入式狂刷100题】&#x1f636;‍&#x1f32b;️&#x1f636;‍&#x1f32b;️&#x1f927;加油!!!&#xff0c;内容包括 基础知识部分操作系统部分处理器架构部分外设驱动部分通信协议部分存储器管理部分硬件设计部分多媒体部分调试故障排除部分编码开发部…...

【模板】计算几何入门

来源 计算几何基本模板&#xff08;二维&#xff09; 目录 基本设置点 向量 Point&#xff08;Vector&#xff09;点积&#xff08;数量积、内积&#xff09;向量积&#xff0c;叉积两点间距离向量的模单位向量两向量的夹角判断点在直线的哪边逆转角 线 直线表达式Line判断…...

PostgreSQL 数据库中导入大量数据

在 PostgreSQL 数据库中导入大量数据,可根据数据来源和格式选择不同的方法。以下为你详细介绍几种常见的方式: 1. 使用 COPY 命令(适用于本地数据文件) COPY 命令是 PostgreSQL 内置的高效数据导入工具,适合处理本地的数据文件。 步骤 准备数据文件 确保你的数据文件格…...

DeepSeek和Kimi在Neo4j中的表现

以下是2个最近爆火的人工智能工具&#xff0c; DeepSeek:DeepSeek Kimi: Kimi - 会推理解析&#xff0c;能深度思考的AI助手 1、提示词&#xff1a; 你能帮我生成一个知识图谱吗&#xff0c;等一下我会给你一篇文章&#xff0c;帮我从内容中提取关键要素&#xff0c;然后以N…...

xQueueSendToBack的中文释义和裸机调用

如果不在 FreeRTOS 环境下运行&#xff0c;而是裸机环境中实现类似的功能&#xff0c;需要移除 xQueueSendToBack 的依赖&#xff0c;并直接调用 CAN 发送函数。以下是修改后的代码和实现思路&#xff1a; 1. FreeRTOS 中的 xQueueSendToBack 功能 作用&#xff1a;将消息发送…...

2025年- G24-Lc98-217.包含重复(使用hashSet解决)-java版

1.题目描述 2.思路 思路一&#xff1a; 我的想法是直接用集合来判断&#xff0c;如果集合的元素不能添加说明之前已经存在这个元素&#xff0c;也就是发现了重复元素&#xff0c;所以返回false。 补充一&#xff1a; Map、ArrayList的定义和声明 3.代码实现 class Soluti…...

【树莓派驱动验证步骤】

终端操作和输出&#xff1a; 清理项目 adaraspberrypi:~/mt3502 $ make clean make -C /lib/modules/6.6.51rpt-rpi-v8/build M/home/ada/mt3502 clean make[1]: 进入目录“/usr/src/linux-headers-6.6.51rpt-rpi-v8”CLEAN /home/ada/mt3502/Module.symvers make[1]: 离开…...

百度SEO和必应SEO优化方法

如需SEO服务&#xff0c;可以搜索&#xff1a;深圳市信科网络科技有限公司。 一、搜索引擎生态格局&#xff1a;流量入口的重新洗牌 2025 年&#xff0c;中国 PC 端搜索引擎市场正经历戏剧性变革。StatCounter 数据显示&#xff0c;必应凭借 Edge 浏览器的预装优势与 ChatGPT …...

2025年3月AI搜索发展动态与趋势分析:从技术革新到生态重构

025年3月AI搜索发展动态与趋势分析&#xff1a;从技术革新到生态重构 一、行业动态&#xff1a;巨头布局与技术升级 谷歌推出“AI模式”&#xff0c;重新定义搜索体验 谷歌上线全新“AI模式”&#xff0c;集成多模态交互与实时数据能力&#xff0c;用户可通过文本、图片或语音…...

封闭图形个数

0封闭图形个数 - 蓝桥云课 小蓝对蓝桥王国的数字大小规则十分感兴趣。现在&#xff0c;他将给定你n个数a1, a2, ..., an&#xff0c;请你按照蓝桥王国的数字大小规则&#xff0c;将这n数从小到大排序&#xff0c;并输出排序后结果。 输入格式 第一行包含一个整数n&#xff0…...

VSCode 抽风之 两个conda环境同时在被激活

出现了神奇的(toolsZCH)(base) 提示符&#xff0c;如下图所示&#xff1a; 原因大概是&#xff1a;conda 环境的双重激活&#xff1a;可能是 conda 环境没有被正确清理或初始化&#xff0c;导致 base 和 toolsZCH 同时被激活。 解决办法就是 &#xff1a;conda deactivate 两次…...

Django 生产环境静态文件处理

python manage.py collectstatic 是 Django 提供的一个非常重要的管理命令&#xff0c;用于将项目中的静态文件收集到一个指定的目录中。这在部署 Django 项目时尤其重要&#xff0c;因为静态文件需要被 Web 服务器&#xff08;如 Nginx 或 Apache&#xff09;提供服务&#xf…...

语法: result=frexp(value, exp);

FREXP()是C语言里的内部函数&#xff0c;根据需要了解。 语法: resultfrexp(value, &exp); 参数: value是一个浮点数; exp是一个有符号的整型数; 返回值: 返回值result是一个浮点数&#xff0c;其有效范围是 0.5&#xff08;含&#xff09;到 1.0&#xff08;不含&…...

ArcGIS Pro 制作风台路径图:从数据到可视化

一、引言 台风&#xff0c;作为自然界极具破坏力的气象现象之一&#xff0c;其路径的精准预测与直观呈现对于防灾减灾工作至关重要。 在数字化时代&#xff0c;借助专业的地理信息系统&#xff08;GIS&#xff09;软件&#xff0c;如 ArcGIS Pro&#xff0c;我们能够高效地将…...

#pandas #python#数据标注 pd.crosstab()

题目&#xff1a; device_status.txt 存储了工业互联网平台上收集的设备运行状态数据&#xff0c;数 据中有以下内容&#xff1a; device_id&#xff1a;设备编号&#xff0c;字符串类型&#xff0c;长度为 8 status_time&#xff1a;状态时间&#xff0c;日期时间类型&…...

self Attention为何除以根号dk?(全新角度)

全网最独特解析&#xff1a;self Attention为何除根号dk&#xff1f; 一、假设条件&#xff1a;查询向量和键向量服从正态分布 假设查询向量 q i q_i qi​和键向量 k j k_j kj​的每个分量均为独立同分布的随机变量&#xff0c;且服从标准正态分布&#xff0c;即&#xff1a;…...