修复Mermaid状态图渲染失败的经验分享（错误提示如“No such shape: roundedWithTitle”）

🎉 修复Mermaid状态图渲染失败的经验分享 🎉

在使用Mermaid绘制状态图时，我曾遇到渲染失败的问题，错误提示如“No such shape: roundedWithTitle”。经过一番摸索，我发现问题出在状态定义的语法上。这篇博客将分享我的经验和解决方案，帮助大家避免类似问题！😊

---

📊 问题与解决方案总结表

问题描述	原因	解决方案
状态图渲染失败，报错不明确	状态块内使用了不支持的属性定义	将属性信息嵌入状态名称
例如：“No such shape”错误	Mermaid不支持在状态块内直接定义属性	使用描述性标签定义状态

---

🛠️ 解决方案详解

最初，我尝试用以下代码定义状态图，但渲染失败：

state 空页 {
    isEmpty: true
    totalElements: 0
    totalPages: 0
}

原因是Mermaid状态图不支持在状态块内直接定义属性。经过调整，我将属性嵌入状态名称，并使用描述性标签解决了问题。以下是修复后的示例：

通过这种方式，状态图不仅能正确渲染，还清晰地展示了状态转换逻辑。

---

🌟 Mermaid图表示例

1. 流程图（Flowchart）

以下是一个流程图示例，使用classDef定义颜色样式，所有文本用双引号包裹：

2. 时序图（Sequence Diagram）

时序图展示用户与服务器的交互，关键部分用rect rgba高亮，文本无需引号，支持<br>换行：

3. 状态图（State Diagram）

状态图展示任务处理的状态转换，使用描述性标签定义状态：

4. 类图（Class Diagram）

类图展示“动物”和“狗”之间的继承关系及其属性、方法：

---

🧠 思维导图总结

---

📚 英文缩写说明

• Mermaid：Mermaid Charting Tool（Mermaid图表工具）
• Flowchart：Flowchart（流程图）
• Sequence Diagram：Sequence Diagram（时序图）
• State Diagram：State Diagram（状态图）
• Class Diagram：Class Diagram（类图）

---

这篇博客总结了我修复Mermaid状态图渲染失败的经验，包含问题分析、解决方案和多种图表示例。希望能帮助大家更高效地使用Mermaid绘制图表！有疑问欢迎留言交流～ 😄