0

I'm making a flow diagram of some data and code for a project I'm working on, using the Wiki functionality of the Azure Devops environment (Project -> Overview -> Wiki). The wiki editor has a button to create a simple mermaid diagram. I am using that functionality to create a diagram of our project. When I execute the example code for a database style node:

::: mermaid
graph LR
    id1[(Database)]
:::

Azure devops returns the following error:

Parse error on line 2:
graph LR    id1[(Database)]
----------------^
Expecting 'SPACE', 'GRAPH', 'DIR', 'TAGEND', 'TAGSTART', 'UP', 'DOWN', 'subgraph', 'end', 'STR', 'MINUS', '--', '==', 'STYLE', 'LINKSTYLE', 'CLASSDEF', 'CLASS', 'CLICK', 'DEFAULT', 'PCT', 'NUM', 'COMMA', 'ALPHA', 'COLON', 'BRKT', 'DOT', 'PUNCTUATION', 'UNICODE_TEXT', 'PLUS', 'EQUALS', 'MULT', got 'PS'

I've googled this error, and here it is suggested that the problem is due to an old version of Mermaid. Does anyone know workarounds or old documentation?

Peter Smit
  • 1,594
  • 1
  • 13
  • 27
  • Did you run your project successfully in local agent? I suggest you could change your `package.json` file, change `"mermaid": "8.4.4"` to `"mermaid": "8.4.6"`(update it) and then build it again. Also with a good sample of your project, we can troubleshoot your issue quickly. –  Jun 10 '20 at 10:33
  • @penaunt It's not part of our codebase, I'm using the mermaid functionality in the Wiki functionality of Azure Devops. I'll add that to the question. – Peter Smit Jun 11 '20 at 14:56
  • @Peter Smit Not get your latest information, is the workaround helpful for you? Or if you have any concern, feel free to share it here. – Hugh Lin Jun 19 '20 at 10:29

2 Answers2

1

You need to add double quotes to (Database):

::: mermaid
graph LR
    id1["(Database)"]
:::
Hugh Lin
  • 17,829
  • 2
  • 21
  • 25
  • While the sytax error is gone, this does not solve the problem: I want to use the database shape that is mentioned in the mermaid documentation. This fix makes a normal square box with the text wrapped in parenthesis. – Peter Smit Jun 19 '20 at 13:47
  • Which document did you follow? Did you try [this document's content](https://github.com/mermaid-js/mermaid)? or you could share your document and we can help you handle it. – Hugh Lin Jun 23 '20 at 10:15
  • Here's an example that works in the live editor but not in Azure DevOps: ::: mermaid graph LR d1[(ORE)] --> p1[[Hydrate]] ::: – Will Murphy Aug 17 '20 at 17:15
0

To follow up on the other response, if you put the double quotes INSIDE the parenthesis, it should work. However, it will also depend upon which version of mermaid Azure Devops is using. I have not been able to find a good resource for that yet

::: mermaid
graph LR
    id1["(Database)"]
:::
Justin Greywolf
  • 650
  • 7
  • 17