开发者问题收集

Mermaid CLI - 如何转义字符？

2015-01-24
42455
diagramming mermaid

我正在使用 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&]

但是我在分号上收到相同的错误。有什么想法可以让我摆脱这些字符，使其正常工作？谢谢！

3个回答

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

graph TD

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

    question1-- Yes -->action1

将生成此图表：

在此处输入图像描述

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

Aziz Alto
2015-12-08

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

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;"]

生成 Mermaid 流程图

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

免责声明：我没有在 Mermaid CLI 中测试它。在 markdown-viewer 和 美人鱼实时编辑器 。

fiktor
2022-02-06

这是早期 Mermaid 版本的问题。我尝试使用 Mermaid 0.4.0 来运行您的示例代码，结果显示正常。我建议升级。

Knut Sveidqvist
2015-03-15