Misc. rendering errors for stateDiagram-2: TB bias, self-referring links, etc.

[sjn]

Description

I'm working on (and have published) a couple of stateDiagrams that seem to be broken with the v11.1.0 renderer.

Found:

You can find them "live" here: https://github.com/CPAN-Security/security.metacpan.org/blob/supplychain-sbom/docs/supplychain-sbom.md (using v11.1.0 as of 2022-09-06)

Expected:

This diagram differs in many ways from the "live" one, which uses the v10.0.9 renderer: https://security.metacpan.org/docs/supplychain-sbom.html#open-source-supply-chain-full-diagram

Regressions:

Apologies for using my own terms here; I hope you can still use this to figure out what I mean

• The TB (top-bottom) bias has been removed, making state blocks render more often "besides" each other, instead of below
• Self-referring links from/to state blocks (groups) look "boxy" compared to self-referring links to regular states
• Self-referring links from/to state blocks/groups don't always take the "shortest route" to itself.
• State description text wrap based on the size of the available area, instead of the previous behavior, where the area expanded based on the text length
• State description doesn't respect newlines any more
• State description text is centered instead of left-adjusted as previously
• The self-referring arrows don't follow a TB directional bias – which means "arrow tends to point towards the top area of the target, and come from the bottom area of the source". Such an arrow would exit below a box, swing around the side of the same box, go upwards and swing back inwards towards the top of this box, pointing at the upper border of it. This is the opposite direction of what is happening in both 10.* and 11.*

Steps to reproduce

Please see the guthub source of the pages linked above: https://github.com/CPAN-Security/security.metacpan.org/blob/supplychain-sbom/docs/supplychain-sbom.md?plain=1#L203-L378

Screenshots

Expected:

Found:

Code Sample

No response

Setup

• Mermaid version: Whatever github is using (I'm told it's 11.1.0)
• Browser and Version: Firefox 127.0 for Ubuntu Linux

Suggested Solutions

No response

Additional Context

No response

[sjn]

BTW, when I say the self-referring links look "boxy", I'm comparing it to these:

They look a LOT nicer, and the only gripe I have with them is that in a top-bottom direction biased diagram, I expect the "exits" to be at the bottom of the node, and the "entrances" be on the top – meaning that the directionality of the arrow has a bias/preference for going from the bottom of the originating box to the top of the target box – including if the arrows are targeted at the originating box (meaning, they are self-referring).

I hope that makes sense? :-)

(I've updated the OP with this)

[knsv]

@sjn Thanks for reporting. We are publishing a hotfix as soon as possible. I have checked that your diagram will render after the hotfix. I agree that the self-loops look a bit boxy, and we will try to fix them in a future release.

Relates #5820, #5822

[sjn]

Is there a chance that any of the other rendering buts will be addressed soon? I'm noticing that more people are upgrading, which makes this a bit more difficult for me who would like to be able to present clear flowcharts (without strange rendering oddities).

Is there anything I can do to assist?

[waimea-cpy]

Just to chip in with some other examples...

I've had to revert to using v11.0.2 again, since the self-referencing loops are just too janky.

I'm trying to create Finite State Automata diagrams. This graph...

flowchart LR

S0[ ]
S1((S1))
S2(((S2)))
S3(((S3)))

S0 --> S1
S1 --A--> S2
S1 --B--> S3
S2 --A--> S1
S2 --B--> S3
S3 --A--> S1
S3 --B--> S3
S3 --C--> S3

class S0 start

... looks kind of ok using v11.0.2 (the overlapping loops aren't ideal, but at least they are readable):

... but with v11.1 onwards, the self-referencing links are rendered with a sharp point, but more importantly, one covers the other: