search

mermaid-js / mermaid

Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
https://mermaid.js.org
MIT License
72.56k stars 6.62k forks source link

Spaces in subgraph titles no longer render in Mermaid 8.2.3 #895

Closed stanhu closed 5 years ago

stanhu commented 5 years ago

Describe the bug

Using a title with spaces results in the error:

Parse error on line 11:
...;  subgraph Mobile Units    vetronics
---------------------^
Expecting 'SEMI', 'NEWLINE', 'EOF', 'DIR', 'DOWN', 'SQS', 'MINUS', 'NUM', 'COMMA', 'ALPHA', 'COLON', 'BRKT', 'DOT', 'PUNCTUATION', 'UNICODE_TEXT', 'PLUS', 'EQUALS', 'MULT', got 'SPACE'

To Reproduce

Use the sample graph: https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ3JhcGggQlQ7XG5cbiAgdmV0cm9uaWNzIC0tLSB1aHVyYTtcbiAgb2J1IC0tLSB1aHVyYTtcbiAgZG9uZ2xlIC0tLSB1aHVyYTtcbiAga2Fma2EgLS0tIHVodXJhO1xuICB4bXBwIC0tLSB1aHVyYTtcbiAga2Fma2EgLS0tIHRvbGw7XG4gIGthZmthIC0tLSB0ZWxlO1xuXG4gIHN1YmdyYXBoIE1vYmlsZSBVbml0c1xuICAgIHZldHJvbmljc1tWZXRyb25pY3NdO1xuICAgIG9idVtUb2xsIE9CVV07XG4gICAgZG9uZ2xlW0RvbmdsZV07XG4gIGVuZFxuXG4gIHN1YmdyYXBoIFwiVWh1cmEgQ2x1c3RlclwiXG4gICAgdWh1cmFbVWh1cmFdO1xuICAgIGNvbnN1bFtDb25zdWxdO1xuICAgIGNpZnNbU2hhcmVkIEZpbGVzeXN0ZW1dO1xuICAgIGNvbnN1bCAtLS0gdWh1cmE7XG4gICAgdWh1cmEgLS0tIGNpZnM7XG4gIGVuZFxuXG4gIHN1YmdyYXBoIEludGVyZmFjZVxuICAgIGthZmthW0thZmthXTtcbiAgICB4bXBwW1hNUFBdO1xuICBlbmRcblxuICBzdWJncmFwaCBDbGllbnRzXG4gICAgdG9sbFtUb2xsIFBsYXRmb3JtXTtcbiAgICB0ZWxlW1RlbGVtYXRpY3NdO1xuICBlbmQiLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ/error/UGFyc2UgZXJyb3Igb24gbGluZSAxMToKLi4uOyAgc3ViZ3JhcGggTW9iaWxlIFVuaXRzICAgIHZldHJvbmljcwotLS0tLS0tLS0tLS0tLS0tLS0tLS1eCkV4cGVjdGluZyAnU0VNSScsICdORVdMSU5FJywgJ0VPRicsICdESVInLCAnRE9XTicsICdTUVMnLCAnTUlOVVMnLCAnTlVNJywgJ0NPTU1BJywgJ0FMUEhBJywgJ0NPTE9OJywgJ0JSS1QnLCAnRE9UJywgJ1BVTkNUVUFUSU9OJywgJ1VOSUNPREVfVEVYVCcsICdQTFVTJywgJ0VRVUFMUycsICdNVUxUJywgZ290ICdTUEFDRSc

graph BT;

  vetronics --- uhura;
  obu --- uhura;
  dongle --- uhura;
  kafka --- uhura;
  xmpp --- uhura;
  kafka --- toll;
  kafka --- tele;

  subgraph Mobile Units
    vetronics[Vetronics];
    obu[Toll OBU];
    dongle[Dongle];
  end

  subgraph "Uhura Cluster"
    uhura[Uhura];
    consul[Consul];
    cifs[Shared Filesystem];
    consul --- uhura;
    uhura --- cifs;
  end

  subgraph Interface
    kafka[Kafka];
    xmpp[XMPP];
  end

  subgraph Clients
    toll[Toll Platform];
    tele[Telematics];
  end

Expected behavior

Subgraphs render.

Screenshots

Desktop (please complete the following information):

Additional context

stanhu commented 5 years ago

This problem was not in 8.0.0, but seems to have been introduced in 8.1.0 via https://github.com/knsv/mermaid/pull/845.

sagea commented 5 years ago

@stanhu Wrap the title with double quotes and it will work

https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ3JhcGggQlQ7XG5cbiAgdmV0cm9uaWNzIC0tLSB1aHVyYTtcbiAgb2J1IC0tLSB1aHVyYTtcbiAgZG9uZ2xlIC0tLSB1aHVyYTtcbiAga2Fma2EgLS0tIHVodXJhO1xuICB4bXBwIC0tLSB1aHVyYTtcbiAga2Fma2EgLS0tIHRvbGw7XG4gIGthZmthIC0tLSB0ZWxlO1xuXG4gIHN1YmdyYXBoIFwiTW9iaWxlIFVuaXRzXCJcbiAgICB2ZXRyb25pY3NbVmV0cm9uaWNzXTtcbiAgICBvYnVbVG9sbCBPQlVdO1xuICAgIGRvbmdsZVtEb25nbGVdO1xuICBlbmRcblxuICBzdWJncmFwaCBcIlVodXJhIENsdXN0ZXJcIlxuICAgIHVodXJhW1VodXJhXTtcbiAgICBjb25zdWxbQ29uc3VsXTtcbiAgICBjaWZzW1NoYXJlZCBGaWxlc3lzdGVtXTtcbiAgICBjb25zdWwgLS0tIHVodXJhO1xuICAgIHVodXJhIC0tLSBjaWZzO1xuICBlbmRcblxuICBzdWJncmFwaCBJbnRlcmZhY2VcbiAgICBrYWZrYVtLYWZrYV07XG4gICAgeG1wcFtYTVBQXTtcbiAgZW5kXG5cbiAgc3ViZ3JhcGggQ2xpZW50c1xuICAgIHRvbGxbVG9sbCBQbGF0Zm9ybV07XG4gICAgdGVsZVtUZWxlbWF0aWNzXTtcbiAgZW5kIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0

spbert29 commented 5 years ago

You need to write "Mobile Unit" with Quotes

stanhu commented 5 years ago

Right, this surprised a number of our users. I asked whether we can preserve backwards compatibility: https://github.com/knsv/mermaid/pull/845#issuecomment-516577160

knsv commented 5 years ago

Let move this here. I encourage backwards compatability and think this needs some investigating. I will reopen this issue for this discussion.

sagea commented 5 years ago

Thinking aloud:

So after doing a bit of research. In this case we should consider the text a title under the assumption we don't see the id[*] syntax.

Known details

  1. This was broken in 8.x but worked fine in the last 7.x version.
  2. Prior to the 8.0.0 release, brackets in the title threw an error when not surrounded by quotes. This means that none of our users had titles that looked like this a["foo"] prior to 7.x

Assumptions:

  1. Id's should be able to start with numbers. (This is currently broken: https://github.com/knsv/mermaid/issues/900)
  2. We aren't going to account for escaping characters because that feature isn't there today.
  3. We aren't going to account for trailing or extra spaces because that hasn't changed.

So these are the possible formats...

%% No style id and considered text
subgraph "a b"
subgraph old style that is broken
subgraph a-b-c

%% with style id
subgraph uid1[text of doom]
subgraph uid2["text of doom"]
subgraph uid3[abcdef]

These are the different types of things that can technically exist. (not jijson)

knsv commented 5 years ago

It should be possible to handle the "old style that is broken" as long as it does not contain a bracket.

knsv commented 5 years ago

Fixed as of v 8.2.4

nynevi commented 1 year ago

for those that stumble upon the same problem while linking subgraphs in a flowchart as such:

A --> Sub Graph Name (spaces in the name)

subgraph Sub Graph Name
or
subgraph "Sub Graph Name"

I've found the examples given here in this issue helpful https://github.com/mermaid-js/mermaid/issues/895#issuecomment-517966169 so I ended up with:

A --> graphId

subgraph graphId[Sub Graph Name]