Mermaid CLI - how do you escape characters?

Question

I'm using the Mermaid CLI to generate a flowchart (http://knsv.github.io/mermaid/flowchart.html). It works great, but I can't figure out how to get special characters (percent signs, parenthesis, etc) working as text within a node.

For illustration purposes here is a sample flowchart definition for Mermaid (filename is example.mermaid):

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

When I run mermaid on that file, I get this error (it blows up on the percent sign):

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

I tried escaping the percent sign, like this:

action1[Fill tank to 100&amp;]

But then I get the same error on the semicolon. Any thoughts on how I can escape those characters to make it work? Thanks!

score 26 · Accepted Answer · edited Apr 19 '17 at 15:07

26

Use quotation marks "" to enclose your text and escape special characters, e.g. in your example:

graph TD

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

    question1-- Yes -->action1

will produce this diagram:

This is now documented in the official documentation.

edited Apr 19 '17 at 15:07

JohnLBevan

18,988
5
75
151

answered Dec 08 '15 at 22:49

Aziz Alto

14,579
4
64
50

This does not seem to work for sequence diagrams? (at least not for ':') – Steven Jeuris Nov 01 '17 at 16:08
Sequence diagrams have different syntax https://mermaidjs.github.io/sequenceDiagram.html – Aziz Alto Nov 01 '17 at 16:38
But what if I wanted to add quotation marks *inside* the quotation marks? Do I *then* have to use escape codes, or is there a better way? – Mayonnaise2124 May 10 '20 at 23:56
I haven't tried that. But usually can use a single quote inside the double-quote quotation, escape may work too. – Aziz Alto May 11 '20 at 00:33
Is this supposed to work with characters like ``? I can't get it to work? – Alexis.Rolland Jun 16 '20 at 05:00

score 0 · Answer 2 · answered Mar 15 '15 at 15:22

0

That was an issue with early mermaid versions. I tried your example code with mermaid 0.4.0 where it renders fine. I would recommend upgrading.

answered Mar 15 '15 at 15:22

Knut Sveidqvist

21
1

Mermaid CLI - how do you escape characters?

2 Answers2