Visual representation of mutations.

[cmnrd]

Currently, reactions and mutations are rendered using the same shape and style. The following program

target Cpp

main reactor {
    reaction react(startup)
    mutation mutate(shutdown)
}

produces this diagram:

I think the two concepts should also be distinguished visually. I would like to get some more opinions and proposal on how mutations could be visualized.

Here are some proposals based on yesterday's discussion:

Making mutations darker:

Using an hourglass shape:

Using a one-sided arrow:

Using a rhomboid:

I added the rhomboid as an additional option, which I think looks nice and is clearly distinguishable from reactions. What do you think?

[soerendomroes]

I think that a different color does not help and that it makes it harder to draw mutations in other tools. Therefore, I think that a different shape is necessary.

From the shapes you suggested I like the hourglass shape most. I do not like the rhomboid since the font and the shape have a weird visual interaction and imply a different reading direction. The one sided-arrow does look more like a label to me but that may be the case because of the spacing.

[lhstrh]

It's really helpful to see these options juxtaposed. To me, it's a tie between the hourglass and the rhombus. The advantage of the latter is that it still has a forward directionality to it like the chevron does...

[lhstrh]

I actually didn't get that point about the interaction... Help me out?

[soerendomroes]

The rhombus makes me look to the top right in the direction of the left and right border, while the font suggests a left-to-right reading direction. But maybe this is the case because the spacing between the rhombus and the text is smaller. Moreover, outgoing edges could also change this.

[cmnrd]

Ok, then I guess I missed your point. I thought you mean, that the eye kind of expects the text to be slanted similarly to the rhomboid. The spacing would need to be optimized of course. Perhaps the interaction with the text is also not too important, as we show numbers most of the time.

[lhstrh]

I think that what @cmnrd shows up here looks good. I don't really perceive any problem with the rhombus shape.

[axmmisaka]

Just to chime in, I like the idea of using a parallelogram for a very specific reason - the typescript runtime have direct support with Mermaid.js, which we might find handy to represent small working examples. While the reaction symbol is not representable and we need to find workarounds, future decisions could potentially take its limited shape support into account.

flowchart LR
    id1>This looks? like a reaction]
    id2[/this looks like a mutation/]
    id3{I shutdown}
    id4((I startup))

    id4-->id1
    id3-->id2

Loading