state diagram: cannot put comments in composite states

[weedySeaDragon]

Describe the bug Cannot put a comment within a composite state. It's not recognized as a comment.

To Reproduce

stateDiagram-v2
    [*] --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]
    %% comment here is fine but not within the composite state Moving below   
    state Moving {
       %% this comment is not recognized as a comment
        slow  --> fast
    }        

Here is a link to the live editor.

Expected behavior Any statement starting with %% within a composite state should be recognized (parsed) as a comment.

[avijit1258]

looking into this one.

[weedySeaDragon]

@avijit1258 FYI: I've been working with state diagrams and parsing (working on classDefs). Let me know if you have any questions.

[avijit1258]

I am looking into the jison grammer for state diagrams. I am not familiar with jison grammar at all. I am looking into some resources found online. Wondering if you have any resource suggestion or hints to make my journey smooth with Jison.

Is there any way to deploy a local version of the https://mermaid.live/ site? My intention is to check the effects of my change. I don't find anything in the contribution guidelines how to test locally except way to generate e2e test. thanks for your help.

[weedySeaDragon]

jison grammar and parsing Lexing (breaking up things into tokens) is generally the top part of the file. It uses regular expressions (with a very few changes). The result are then fed into the parser -- which uses them to evaluate the entire strings with the grammar rules -- the lower half of the .jison file.

(Not sure if you already know that ^, so there it is.)

Hope you've found the general jison doc: https://gerhobbelt.github.io/jison/docs/ jison is based on bison so you can search for that, too.

Here are 2 statements that deal with comments:

\%\%(?!\{)[^\n]*                                                /* skip comments */
[^\}]\%\%[^\n]*                                                 /* skip comments */{ /*console.log('Crap after close');*/ }

They use regular expressions to match them, and then they do nothing with them. (No value is returned == no token is set; no method is called.).

There are other statements that deal with comments. It looks to me like comments are only skipped in certain states. ("states" = jison definition per the jison documentation). I'd definitely look at that.

There are commented out console.log files; you can definitely uncomment those.

TL;DR Something that is glossed over in the jison doc is that you can access methods in the stateDb.js module. It's referenced as yy. ..... -- you can see methods being called in the .jison file. As information is processed, it is recorded/stored using methods in stateDb

You can write (temporary) methods in stateDB.js to help you debug & learn, too.

Ex: In the commented-out console.log statement below...

<INITIAL,struct>"state"\s+            { /*console.log('Starting STATE zxzx'+yy.getDirection());*/this.pushState('STATE'); }

you can see that yy.getDirection() is called to output what is the current direction for the diagram.

Testing, local version
You should write spec tests that will test your changes (and also serve as examples of how it should and shouldn't work). You can look at srs/diagrams/state/parser/state-style.spec.js for examples. You can run a local version of the server by running the dev script in the top level package.json scripts section. (Ex: npnm dev) Then you can try web pages with diagrams in them (like the demos pages) by using http://localhost:9000/ [your test .html file] to hit the server

---

HTH. Let me know how I can help more. :-)

[avijit1258]

@weedySeaDragon that was so helpful to get started locally. I think some part of the previous comment can go to the contribution.md file which will definetely help new folks. I can help on that once I have done this one. Although \%\%(?!\{)[^\n]* regex is grabbing all the comments with %% including inside state when I put it in online regex checker, our JISON lexer is not able to grab comments inside the composite state. I tried putting the rules above others to make sure there is no precdence issue. That also did not work. I will look into more details this weekend.

[weedySeaDragon]

Glad it helped! Yes - let's get it into the documentation if you think it'll be helpful.

Glancing at the .jison file again.... This line is suspicious to me:

<INITIAL,ID,STATE,struct,LINE,open_directive,type_directive,arg_directive,close_directive>\#[^\n]*  /* skip comments */

That has a comment starting with a # (and skipping everything from that to the end.

That line can be applied if the lexer is in a struct state (among others). I wonder if that is somehow taking precedence over \%%[^\n]* or \%\%(?!\{)[^\n]* or \%\%(?!\{)[^\n]* And do the % really need a \ before them? If so, then maybe there is one missing in \%%[^\n]*

I think the jison documentation talks a bit about states. Don't know if something interesting is in there.

You can debug by putting debugging breaks in the code (depends on what tools you're using; I use a full IDE (JetBrains WebStorm). YMMV). (Good old "manual" debugging with lots of console.log() statements is always helpful!) If you're not already, look at what yytext is at different times. (That's the text that was most recently matched.) That + some console.log statements should tell you what pattern (regular expression) it is matching.

I don't know if other diagrams also have similar syntax (using { and }). You might take a look at the .jison files for class diagrams or flowcharts to see if they're able to do it successfully.

[avijit1258]

@weedySeaDragon I have found the issue. The PR is up. Thank you so much for your help. Super excited to be more involved.