美人鱼命令行界面 - 如何转义字符？

Question

我正在使用 Mermaid CLI 生成流程图(http://knsv.github.io/mermaid/flowchart.html)，它运行良好，但我无法弄清楚如何将特殊字符（百分号、括号等）作为节点内的文本显示。以下是一个Mermaid示例流程图定义，文件名为example.mermaid：

graph TD
question1{Gas tank less than 1/8?}
action1[Fill tank to 100%]
question1-- Yes -->action1

当我在那个文件上运行mermaid时，我会收到这个错误（它会在百分号处崩溃）：

My-MacBook-Pro:mermaid mark$ mermaid example.mermaid 
Error: Parse error on line 3:
...on1[Fill tank to 100%]question1-- Yes -
-----------------------^
Expecting 'QUOTE', 'TAG_END', 'TAG_START', 'MULT', 'EQUALS', 'PLUS', 'DOT', 'BRKT', 'COLON', 'ALPHA', 'COMMA', 'NUM', 'CLICK', 'CLASS', 'CLASSDEF', 'LINKSTYLE', 'STYLE', 'PIPE', 'THICK_ARROW_OPEN', 'THICK_ARROW_CROSS', 'THICK_ARROW_CIRCLE', 'THICK_ARROW_POINT', 'DOTTED_ARROW_OPEN', 'DOTTED_ARROW_CROSS', 'DOTTED_ARROW_CIRCLE', 'DOTTED_ARROW_POINT', 'ARROW_OPEN', 'ARROW_CROSS', 'ARROW_CIRCLE', 'ARROW_POINT', '==', '-.', '--', 'MINUS', 'DIAMOND_STOP', 'DIAMOND_START', 'PE', 'PS', 'SQE', 'SQS', 'end', 'subgraph', 'NEWLINE', 'TAGSTART', 'TAGEND', 'DIR', 'SPACE', 'GRAPH', 'EOF', 'SEMI', got 'PCT'

  ../dist/mermaid.full.js:14712 in parseError
  ../dist/mermaid.full.js:14782 in parse
  ../dist/mermaid.full.js:13260
  ../dist/mermaid.full.js:16846
  ../dist/mermaid.full.js:16889
  phantomjs://webpage.evaluate():23 in executeInPage
  phantomjs://webpage.evaluate():29
  phantomjs://webpage.evaluate():29
PHANTOM ERROR: TypeError: 'null' is not an object (evaluating 'element.setAttribute')
TRACE:
 -> /usr/local/lib/node_modules/mermaid/lib/phantomscript.js: 149 (in function resolveSVGElement)
 -> /usr/local/lib/node_modules/mermaid/lib/phantomscript.js: 69

我尝试转义百分号，像这样：

action1[Fill tank to 100&]

但是我在分号处遇到了同样的错误。有什么想法可以转义这些字符使其正常工作吗？谢谢！

- Mark Madej

Answer 1

使用引号""将您的文本括起来并转义特殊字符，例如在您的示例中：

graph TD

    question1{"Gas tank less than 1/8?"}
    action1["Fill tank to 100%"]

    question1-- Yes -->action1

将会生成这张图表：

现在已经在官方文档中记录了这个。

- Aziz Alto

---

这似乎不适用于序列图？（至少对于“：”不适用） - Steven Jeuris

序列图具有不同的语法 https://mermaidjs.github.io/sequenceDiagram.html - Aziz Alto

但如果我想在引号内部添加引号呢？那我需要使用转义码，还是有更好的方法？ - UnderscoreA

当前序列图语法的链接为：https://github.com/mermaidjs/mermaidjs.github.io/blob/master/sequenceDiagram.md。 - Technophile

对于序列图，如果你有#，请将其替换为#35;。entity-codes-to-escape-characters - undefined

Answer 2

以下是转义/引用特殊字符的更多示例。 代码

flowchart LR
  A["For most symbols double quotes are enough: ```~`!@#$%^*()[]{}|\/:;'?<>,.+=-_"]
  B["[&quot;&amp;quot;&amp;lt;&lt;br&gt;&amp;gt;&amp;amp;&amp;frac12;#35;189;&quot;]"]
  B --> C["&quot;&lt;<br>&gt;&amp;&frac12;#189;"]

生成

使用此方法，大多数Unicode字符（包括非ASCII字符）都可以使用Unicode实体或Markdown #code;语法进行包含（上图中的字符½通过两种方式进行了说明）。另请参见官方文档。

免责声明：我没有在Mermaid CLI中测试过。已在markdown-viewer和Mermaid live editor中测试过。

- fiktor

Answer 3

这是早期mermaid版本的问题。我尝试了您的示例代码，使用mermaid 0.4.0可以正常渲染。建议升级。

- Knut Sveidqvist

Answer 4

sequenceDiagram语法不同。 请参考官方文档： https://mermaid.js.org/syntax/sequenceDiagram.html#entity-codes-to-escape-characters

Entity codes to escape characters It is possible to escape characters using the syntax exemplified here.

Code: mermaid sequenceDiagram
    A->>B: I #9829; you!
    B->>A: I #9829; you #infin; times more! A B I ♥ you! I ♥ you ∞ times more! A B Numbers given are base 10, so # can be encoded as
#35;. It is also supported to use HTML character names.

Because semicolons can be used instead of line breaks to define the markup, you need to use #59; to include a semicolon in message text.

- Haili Sun