在 Mermaid 流程图里“驯服”";的魔法指南!!!

在 Mermaid 流程图里“驯服”"的魔法指南

在使用 Mermaid 画流程图时,是不是经常遇到想秀一波 " 却被它“反杀”的情况? 今天就来教大家如何在这头代码野兽的嘴里,抢回我们的双引号实体编码!

Mermaid 的“贪吃蛇”解析机制

Mermaid 这个小机灵鬼♂️,看到 " 就以为是 HTML 的双引号,直接给你转成 " 吞下肚!但我们偏要让它原样吐出 ",怎么办?

解决方案大揭秘

✨ 方法一:二次编码召唤术

& 这个“替身”来假扮 &,这样 Mermaid 就会看到 ",然后—— 叭叭! 变出 "

用户输入文本
含特殊字符?
替换 " 为"
直接包裹引号
生成HTML代码
渲染对话气泡

方法二:Unicode 幻影移形

用 Unicode 的右双引号 (U+201D)来“狸猫换太子”,视觉效果几乎一样哦~

用户输入文本
含特殊字符?
替换 " 为"
直接包裹引号
生成HTML代码
渲染对话气泡

最佳实践:注释魔法阵

classDef 画个金色气泡,把转义逻辑写在注释里,流程图瞬间高大上!

用户输入文本
含✨特殊字符?
执行引号转义
直接包裹引号
生成HTML代码
渲染对话气泡

扩展知识:HTML 实体编码秘籍

实体编码 对应字符 秘密身份
< < 小于号刺客
> > 大于号守卫
  空格 隐形占位符
© © 版权守护者

下次遇到 " 被吞,记得用这些钥匙打开 Mermaid 的“真相之门”哦!

在 Mermaid 流程图里“驯服”";的魔法指南!!!_第1张图片

你可能感兴趣的:(Mermaid,流程图,Mermaid)