diagramming - 美人鱼CLI-如何逃脱字符?

标签 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


当我在该文件上运行美人鱼时,出现此错误(它在百分号上爆炸):

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&]


但是然后我在分号上得到了相同的错误。关于如何逃脱这些角色以使其起作用的任何想法?谢谢!

最佳答案

使用引号""括住您的文本并转义特殊字符,例如在您的示例中:

graph TD

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

    question1-- Yes -->action1


将产生此图:

enter image description here

现在记录在official documentation中。

关于diagramming - 美人鱼CLI-如何逃脱字符?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28121525/

相关文章:

uml - 文本 -> 图表工具

css - 美人鱼改变节点/选项的位置无论如何修复节点的位置

r - 使用 DiagrammeR 将一行节点放置在另一行下方

javascript - 如何让GitHub Pages Markdown支持美人鱼图?

markdown - 美人鱼 - 如何在 Markdown 中连接子图?

javascript - d3 是构建自由格式图表编辑器的不错选择吗?

visual-studio-2010 - SQL Server CE 4的数据库图表工具

windows - 绘制自动机和语法树的工具

open-source - 有没有 yUML 的替代品

r - 美人鱼图 : Adjust white space around graph