mermaid icon indicating copy to clipboard operation
mermaid copied to clipboard

`copy` function uses `Graph.prototype.edges` where it requires `Graph.prototype.nodeEdges`

Open johnbender opened this issue 1 year ago • 2 comments

Description For state diagrams with edges pointing to clusters the output will be a parser error.

To Reproduce

Attempt to render the following state diagram:

stateDiagram-v2
    state Top {
        state Child1 {
          A --> B
        }
        state Child2 {
          C --> GrandChild
          state GrandChild {
            GreatGrandChild1 --> GreatGrandChild2
            state GreatGrandChild1 {
              E --> F
            }
            state GreatGrandChild2 {
              G --> H
            }
          }
        }
    }

You can see the issue in the live editor here

Steps to reproduce the behavior:

  1. Go to the link above
  2. See the "parser" error

Expected behavior

It should render the following diagram:

image

Instead it gives a parser error.

Code Sample The problem seems to be that when the graph is being rendered, the addClustersAndEdges calls extractor which in turn copies the contents of cluster nodes using copy. That function seemingly intends to copy edges on a per node basis here:

https://github.com/mermaid-js/mermaid/blob/develop/src/dagre-wrapper/mermaid-graphlib.js#L97

But the correct method to call seems to be Graph.prototype.nodeEdges ?

Desktop (please complete the following information):

  • OS: Windows
  • Browser: Firefox
  • Version 91.12.0

Additional context Add any other context about the problem here.

johnbender avatar Aug 07 '22 18:08 johnbender

Thanks for your analysis. It will make it easier to fix this.

knsv avatar Aug 14 '22 07:08 knsv

Would love to try and solve this

mishugana avatar Oct 15 '22 17:10 mishugana

I came across this open issue while looking into #4644, which also uses the copy function found here. Changing Graph.prototype.edges to Graph.prototype.nodeEdges (see here as suggested above does allow the diagram to render.)

I don't know if that's all there is to this solution, but that change does make a positive difference, as far as I can tell.

I can't tell if I'm not running the tests right or they're not completing properly. When I run pnpm test my console ends with (and no other errors before it):

=============

WARNING: You are currently running a version of TypeScript which is not officially supported by @typescript-eslint/typescript-estree.

You may find that it works just fine, or you may not.

SUPPORTED TYPESCRIPT VERSIONS: >=3.3.1 <5.1.0

YOUR TYPESCRIPT VERSION: 5.1.3

Please only submit bug reports when using the officially supported version.

=============
Checking formatting...
[warn] demos\flowchart-test.html
[warn] packages\mermaid-zenuml\README.md
[warn] Code style issues found in 2 files. Forgot to run Prettier?
 ELIFECYCLE  Command failed with exit code 1.
 ELIFECYCLE  Test failed. See above for more details.

   When I run pnpm e2e some tests definitely appear to be failing, but I have no frame of reference to know if any of this is normal.

randolchance avatar Aug 04 '23 14:08 randolchance