🐉 在 Mermaid 流程图里"驯服""的魔法指南
在使用 Mermaid 画流程图时,是不是经常遇到想秀一波 " 却被它"反杀"的情况?🎯 今天就来教大家如何在这头代码野兽的嘴里,抢回我们的双引号实体编码!
🌀 Mermaid 的"贪吃蛇"解析机制
Mermaid 这个小机灵鬼🧚♂️,看到 " 就以为是 HTML 的双引号,直接给你转成 " 吞下肚!但我们偏要让它原样吐出 ",怎么办?
🔮 解决方案大揭秘
✨ 方法一:二次编码召唤术
用 & 这个"替身"来假扮 &,这样 Mermaid 就会看到 ",然后------ 叭叭! 变出 "!
是 否 用户输入文本 含👾特殊字符? 替换 " 为" 直接包裹引号 生成HTML代码 🎨 渲染对话气泡
🌟 方法二:Unicode 幻影移形
用 Unicode 的右双引号 "(U+201D)来"狸猫换太子",视觉效果几乎一样哦~
是 否 用户输入文本 含🔥特殊字符? 替换 " 为" 直接包裹引号 生成HTML代码 🎨 渲染对话气泡
💡 最佳实践:注释魔法阵
用 classDef 画个🟡金色气泡,把转义逻辑写在注释里,流程图瞬间高大上!
是 否 用户输入文本 含✨特殊字符? 执行引号转义 直接包裹引号 生成HTML代码 🎨 渲染对话气泡
📚 扩展知识:HTML 实体编码秘籍
| 实体编码 | 对应字符 | 秘密身份 |
|---|---|---|
< |
< |
小于号刺客 |
> |
> |
大于号守卫 |
|
空格 | 隐形占位符 |
© |
© | 版权守护者 |
下次遇到 " 被吞,记得用这些🔑钥匙打开 Mermaid 的"真相之门"哦!🚀
