Mermaid Diagrams with Extra Lines Sometimes Broken

[barrycurr]

When designing diagrams I leave extra lines in so that it easier for me to see what happens. For example:

flowchart
  A([Test 1]) --> D{Request}
  B([Test 2]) --> D
  C([Test 3]) --> D

  D -->|Do Something| E[/Use Something/]
  D -->|Do Another Thing| F[/Request Something/]

  E --> G{Check}
  F --> G

  G -->|Valid| H{Does Some<Br>Other Thing<br>Have To Happen?}
  G -->|Invalid| X1

  H -->|Yes| I[/Do The Other Thing/]
  H -->|No| J

  I -->|Valid| J{What Happens Next?}
  I -->|Invalid| X2

  J -->|Option 1| K([Send To Option 1])
  J -->|Option 2| L{Check with<br>Option 2<br>if possible}

  L -->|Valid| M([Send To Option 2])
  L -->|Invalid| X3

  X1([Deny Access])
  X2([Deny Access])
  X3([Deny Access])

  classDef green fill:#59E817,stroke:#333,stroke-width:2px;
  classDef orange fill:#FDD017,stroke:#333,stroke-width:2px;
  classDef yellow fill:#FFF380,stroke:#333,stroke-width:2px;
  classDef red fill:#F75D59,stroke:#333,stroke-width:2px;

  class X1 red
  class X2 red
  class X3 red

  class D yellow
  class G yellow
  class H yellow
  class J yellow
  class L yellow

  class K green
  class M green

Using the live editor this works fine: https://mermaid-js.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZmxvd2NoYXJ0XG4gIEEoW1Rlc3QgMV0pIC0tPiBEe1JlcXVlc3R9XG4gIEIoW1Rlc3QgMl0pIC0tPiBEXG4gIEMoW1Rlc3QgM10pIC0tPiBEXG5cbiAgRCAtLT58RG8gU29tZXRoaW5nfCBFWy9Vc2UgU29tZXRoaW5nL11cbiAgRCAtLT58RG8gQW5vdGhlciBUaGluZ3wgRlsvUmVxdWVzdCBTb21ldGhpbmcvXVxuICBcbiAgRSAtLT4gR3tDaGVja31cbiAgRiAtLT4gR1xuICBcbiAgRyAtLT58VmFsaWR8IEh7RG9lcyBTb21lPEJyPk90aGVyIFRoaW5nPGJyPkhhdmUgVG8gSGFwcGVuP31cbiAgRyAtLT58SW52YWxpZHwgWDFcbiAgXG4gIEggLS0-fFllc3wgSVsvRG8gVGhlIE90aGVyIFRoaW5nL11cbiAgSCAtLT58Tm98IEpcblxuICBJIC0tPnxWYWxpZHwgSntXaGF0IEhhcHBlbnMgTmV4dD99XG4gIEkgLS0-fEludmFsaWR8IFgyXG5cbiAgSiAtLT58T3B0aW9uIDF8IEsoW1NlbmQgVG8gT3B0aW9uIDFdKVxuICBKIC0tPnxPcHRpb24gMnwgTHtDaGVjayB3aXRoPGJyPk9wdGlvbiAyPGJyPmlmIHBvc3NpYmxlfVxuXG4gIEwgLS0-fFZhbGlkfCBNKFtTZW5kIFRvIE9wdGlvbiAyXSlcbiAgTCAtLT58SW52YWxpZHwgWDNcblxuICBYMShbRGVueSBBY2Nlc3NdKVxuICBYMihbRGVueSBBY2Nlc3NdKVxuICBYMyhbRGVueSBBY2Nlc3NdKVxuXG4gIGNsYXNzRGVmIGdyZWVuIGZpbGw6IzU5RTgxNyxzdHJva2U6IzMzMyxzdHJva2Utd2lkdGg6MnB4O1xuICBjbGFzc0RlZiBvcmFuZ2UgZmlsbDojRkREMDE3LHN0cm9rZTojMzMzLHN0cm9rZS13aWR0aDoycHg7XG4gIGNsYXNzRGVmIHllbGxvdyBmaWxsOiNGRkYzODAsc3Ryb2tlOiMzMzMsc3Ryb2tlLXdpZHRoOjJweDtcbiAgY2xhc3NEZWYgcmVkIGZpbGw6I0Y3NUQ1OSxzdHJva2U6IzMzMyxzdHJva2Utd2lkdGg6MnB4O1xuXG4gIGNsYXNzIFgxIHJlZFxuICBjbGFzcyBYMiByZWRcbiAgY2xhc3MgWDMgcmVkXG5cbiAgY2xhc3MgRCB5ZWxsb3dcbiAgY2xhc3MgRyB5ZWxsb3dcbiAgY2xhc3MgSCB5ZWxsb3dcbiAgY2xhc3MgSiB5ZWxsb3dcbiAgY2xhc3MgTCB5ZWxsb3dcblxuICBjbGFzcyBLIGdyZWVuXG4gIGNsYXNzIE0gZ3JlZW4iLCJtZXJtYWlkIjp7fSwidXBkYXRlRWRpdG9yIjpmYWxzZX0

When using the plugin it appears the extra lines are removed which then ends up combing lines together. In the above example the plugin returns the following (invalid) image: https://mermaid.ink/svg/eyJjb2RlIjoiZmxvd2NoYXJ0XG5BKFtUZXN0IDFdKSAtLT4gRHtSZXF1ZXN0fVxuQihbVGVzdCAyXSkgLS0-IERcbkMoW1Rlc3QgM10pIC0tPiBERCAtLT58RG8gU29tZXRoaW5nfCBFWy9Vc2UgU29tZXRoaW5nL11cbkQgLS0-fERvIEFub3RoZXIgVGhpbmd8IEZbL1JlcXVlc3QgU29tZXRoaW5nL11cbkUgLS0-IEd7Q2hlY2t9XG5GIC0tPiBHXG5HIC0tPnxWYWxpZHwgSHtEb2VzIFNvbWU8QnI-T3RoZXIgVGhpbmc8YnI-SGF2ZSBUbyBIYXBwZW4_fVxuRyAtLT58SW52YWxpZHwgWDFcbkggLS0-fFllc3wgSVsvRG8gVGhlIE90aGVyIFRoaW5nL11cbkggLS0-fE5vfCBKSSAtLT58VmFsaWR8IEp7V2hhdCBIYXBwZW5zIE5leHQ_fVxuSSAtLT58SW52YWxpZHwgWDJKIC0tPnxPcHRpb24gMXwgSyhbU2VuZCBUbyBPcHRpb24gMV0pXG5KIC0tPnxPcHRpb24gMnwgTHtDaGVjayB3aXRoPGJyPk9wdGlvbiAyPGJyPmlmIHBvc3NpYmxlfUwgLS0-fFZhbGlkfCBNKFtTZW5kIFRvIE9wdGlvbiAyXSlcbkwgLS0-fEludmFsaWR8IFgzWDEoW0RlbnkgQWNjZXNzXSlcblgyKFtEZW55IEFjY2Vzc10pXG5YMyhbRGVueSBBY2Nlc3NdKWNsYXNzRGVmIGdyZWVuIGZpbGw6IzU5RTgxNyxzdHJva2U6IzMzMyxzdHJva2Utd2lkdGg6MnB4O1xuY2xhc3NEZWYgb3JhbmdlIGZpbGw6I0ZERDAxNyxzdHJva2U6IzMzMyxzdHJva2Utd2lkdGg6MnB4O1xuY2xhc3NEZWYgeWVsbG93IGZpbGw6I0ZGRjM4MCxzdHJva2U6IzMzMyxzdHJva2Utd2lkdGg6MnB4O1xuY2xhc3NEZWYgcmVkIGZpbGw6I0Y3NUQ1OSxzdHJva2U6IzMzMyxzdHJva2Utd2lkdGg6MnB4O2NsYXNzIFgxIHJlZFxuY2xhc3MgWDIgcmVkXG5jbGFzcyBYMyByZWRjbGFzcyBEIHllbGxvd1xuY2xhc3MgRyB5ZWxsb3dcbmNsYXNzIEggeWVsbG93XG5jbGFzcyBKIHllbGxvd1xuY2xhc3MgTCB5ZWxsb3djbGFzcyBLIGdyZWVuXG5jbGFzcyBNIGdyZWVuIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0

After running through a base64 decode and stripping just the mermaid code from the json you get the following (I have replaced \n with new lines):

flowchart
A([Test 1]) --> D{Request}
B([Test 2]) --> D
C([Test 3]) --> DD -->|Do Something| E[/Use Something/]
D -->|Do Another Thing| F[/Request Something/]
E --> G{Check}
F --> G
G -->|Valid| H{Does Some<Br>Other Thing<br>Have To Happen?}
G -->|Invalid| X1
H -->|Yes| I[/Do The Other Thing/]
H -->|No| JI -->|Valid| J{What Happens Next?}
I -->|Invalid| X2J -->|Option 1| K([Send To Option 1])
J -->|Option 2| L{Check with<br>Option 2<br>if possible}L -->|Valid| M([Send To Option 2])
L -->|Invalid| X3X1([Deny Access])
X2([Deny Access])
X3([Deny Access])classDef green fill:#59E817,stroke:#333,stroke-width:2px;
classDef orange fill:#FDD017,stroke:#333,stroke-width:2px;
classDef yellow fill:#FFF380,stroke:#333,stroke-width:2px;
classDef red fill:#F75D59,stroke:#333,stroke-width:2px;class X1 red
class X2 red
class X3 redclass D yellow
class G yellow
class H yellow
class J yellow
class L yellowclass K green
class M green

As you can see for example there are several lines that have been combined with other lines (line 4,5,13,14,16 etc as examples)

This can easily be fixed by having no blank lines or (in my case) adding %%- in place of the blank lines.

I apologise as I would look to change the code myself but I have no Ruby experience.
At the very least the issue is here for if anyone else is having issues with the following error: Jekyll Spaceship: [MermaidProcessor] invalid encoded code

[barrycurr]

With the above example here is the code with %%- in place of blank lines:

flowchart
  A([Test 1]) --> D{Request}
  B([Test 2]) --> D
  C([Test 3]) --> D
  %%-
  D -->|Do Something| E[/Use Something/]
  D -->|Do Another Thing| F[/Request Something/]
  %%-
  E --> G{Check}
  F --> G
  %%-
  G -->|Valid| H{Does Some<Br>Other Thing<br>Have To Happen?}
  G -->|Invalid| X1
  %%-
  H -->|Yes| I[/Do The Other Thing/]
  H -->|No| J
  %%-
  I -->|Valid| J{What Happens Next?}
  I -->|Invalid| X2
  %%-
  J -->|Option 1| K([Send To Option 1])
  J -->|Option 2| L{Check with<br>Option 2<br>if possible}
  %%-
  L -->|Valid| M([Send To Option 2])
  L -->|Invalid| X3
  %%-
  X1([Deny Access])
  X2([Deny Access])
  X3([Deny Access])
  %%-
  classDef green fill:#59E817,stroke:#333,stroke-width:2px;
  classDef orange fill:#FDD017,stroke:#333,stroke-width:2px;
  classDef yellow fill:#FFF380,stroke:#333,stroke-width:2px;
  classDef red fill:#F75D59,stroke:#333,stroke-width:2px;
  %%-
  class X1 red
  class X2 red
  class X3 red
  %%-
  class D yellow
  class G yellow
  class H yellow
  class J yellow
  class L yellow
  %%-
  class K green
  class M green

Here is the resulting working image generated by the plugin: https://mermaid.ink/svg/eyJjb2RlIjoiZmxvd2NoYXJ0XG5BKFtUZXN0IDFdKSAtLT4gRHtSZXF1ZXN0fVxuQihbVGVzdCAyXSkgLS0-IERcbkMoW1Rlc3QgM10pIC0tPiBEXG4lJS1cbkQgLS0-fERvIFNvbWV0aGluZ3wgRVsvVXNlIFNvbWV0aGluZy9dXG5EIC0tPnxEbyBBbm90aGVyIFRoaW5nfCBGWy9SZXF1ZXN0IFNvbWV0aGluZy9dXG4lJS1cbkUgLS0-IEd7Q2hlY2t9XG5GIC0tPiBHXG4lJS1cbkcgLS0-fFZhbGlkfCBIe0RvZXMgU29tZTxCcj5PdGhlciBUaGluZzxicj5IYXZlIFRvIEhhcHBlbj99XG5HIC0tPnxJbnZhbGlkfCBYMVxuJSUtXG5IIC0tPnxZZXN8IElbL0RvIFRoZSBPdGhlciBUaGluZy9dXG5IIC0tPnxOb3wgSlxuJSUtXG5JIC0tPnxWYWxpZHwgSntXaGF0IEhhcHBlbnMgTmV4dD99XG5JIC0tPnxJbnZhbGlkfCBYMlxuJSUtXG5KIC0tPnxPcHRpb24gMXwgSyhbU2VuZCBUbyBPcHRpb24gMV0pXG5KIC0tPnxPcHRpb24gMnwgTHtDaGVjayB3aXRoPGJyPk9wdGlvbiAyPGJyPmlmIHBvc3NpYmxlfVxuJSUtXG5MIC0tPnxWYWxpZHwgTShbU2VuZCBUbyBPcHRpb24gMl0pXG5MIC0tPnxJbnZhbGlkfCBYM1xuJSUtXG5YMShbRGVueSBBY2Nlc3NdKVxuWDIoW0RlbnkgQWNjZXNzXSlcblgzKFtEZW55IEFjY2Vzc10pXG4lJS1cbmNsYXNzRGVmIGdyZWVuIGZpbGw6IzU5RTgxNyxzdHJva2U6IzMzMyxzdHJva2Utd2lkdGg6MnB4O1xuY2xhc3NEZWYgb3JhbmdlIGZpbGw6I0ZERDAxNyxzdHJva2U6IzMzMyxzdHJva2Utd2lkdGg6MnB4O1xuY2xhc3NEZWYgeWVsbG93IGZpbGw6I0ZGRjM4MCxzdHJva2U6IzMzMyxzdHJva2Utd2lkdGg6MnB4O1xuY2xhc3NEZWYgcmVkIGZpbGw6I0Y3NUQ1OSxzdHJva2U6IzMzMyxzdHJva2Utd2lkdGg6MnB4O1xuJSUtXG5jbGFzcyBYMSByZWRcbmNsYXNzIFgyIHJlZFxuY2xhc3MgWDMgcmVkXG4lJS1cbmNsYXNzIEQgeWVsbG93XG5jbGFzcyBHIHllbGxvd1xuY2xhc3MgSCB5ZWxsb3dcbmNsYXNzIEogeWVsbG93XG5jbGFzcyBMIHllbGxvd1xuJSUtXG5jbGFzcyBLIGdyZWVuXG5jbGFzcyBNIGdyZWVuIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0

[jeffreytse]

Hi @barrycurr

:tada: Thanks for your reporting and this issue hans been addressed and settled down. Welcome to star it for further updates and features in the future.

Thanks and regards.