Does not support ! pegjs operator

[Pyrolistical]

On your example site if you load the JavaScript grammar we have

ExpressionStatement
  = !("{" / FunctionToken) expression:Expression EOS {
      return {
        type:       "ExpressionStatement",
        expression: expression
      };
    }

and the diagram looks like

As far as I understand, that is an invalid railroad diagram.

[dundalek]

Yeah, that's a negative lookahead. I represent it as a branch with two slashes before it (as you can see on the diagram). The idea is to indicate it is there, but you cannot go through it so it is not part of the parsed result.

Do you have a better way to represent it in mind?

[Pyrolistical]

Without words, I think this is more clear

[dundalek]

Hmm, I guess I slightly prefer the first arrangement, since it indicates that parser checks the lookahead first and then continues with the rest. But I like the idea of the cross symbol, I might try to use that since it is distinguishable from the start/end symbols.

[dundalek]

@Pyrolistical What do you think of this?

[Pyrolistical]

I don't see the value of having the X in the front nor having it connect back to the beginning of Expression. Yes this is describing more closely to what the parser is doing, but this is a railroad diagram. I feel my version is more in the spirit of a railroad diagram. Every line you follow is a valid syntax, except we are adding a concept of an invalid path with the X

[jakwings]

How about this?

(fig.1 all sub items in the lookahead branch keep using dashed border lines)

(fig.2 only markers)

[jakwings]

Or like this:

(fig.3 use ( and ) to mark the start and end)

[jakwings]

And this:

(fig.4 mark the area with dashed lines)

[dundalek]

Thanks for the suggestions @iology. I like the dashed variant in fig.1. However, it still feels a bit inconclusive for me to implement it.

[jakwings]

I like fig.4 the most, but I may need to modify the railroad-diagram package. (looking into it)

fig.1 and fig.2 do not work quite nice when there is no branching and when there are nested lookaheads. fig.3 is a bit verbose and we have to find the corresponding start&end markers.