State Diagram - Proof of Concept

[jlnrrg]

This is not an issue, but a proof of concept, that it is quite easy to create a state diagram with d2lang. ¹

Meta

Version: 0.6.1

Source

I tried to replicate this diagram from SparkXSystem.

Result

Name	Dagre	ELK	TALA²
Diagram
Issues	- only downwards flow	- only downwards flow- diamond is not sized correctly	- diamond is not resized - start/end labels are put outside of the circle

Attachments

Code

** {
    style.border-radius: 16
}

** {
    &label: end
    label: ⬤
    shape: circle
    height: 10
    width: 10
}

** {
    &label: start
    label: ⬤
    style.fill: black
    shape: circle
    height: 10
    width: 10
}

** {
    &shape: diamond
    label: ""
    height: 30
    width: 30
}


start -> Check PIN

Check PIN {
    direction: right

    start -> Enter PIN
    choice.shape: diamond

    Enter PIN -> choice: "/check PIN"
    choice -> Enter PIN: "[pin invalid]"
    choice -> end: "[pin OK]"
}


Check PIN -> Search Network: "[pin OK]"
Search Network -> Ready: network found

Check PIN -> Off: power off
Search Network -> Off: power off
Ready -> Off: power off

Footnotes

¹ From my perspective this could be a great addition to the documentary. So people needing a diagram like this, can consider using d2lang.

² As I don't have a license for TALA as of now, I just used the unlicensed one to show the result. If this is an issue, please let me know and I will modify this issue to not contain the image.

[alixander]

Thanks for this detailed writeup! We're working on a dedicated examples gallery, and this will be a great addition.

You can specify label positions with label.near

https://play.d2lang.com/?script=nJK9TvswFMV3P8WRh_9Qqf1TVWK4AwtiQEgtghF1MM6NaiXYlQlUCPE2jDwVT4Ku80EcZWKKP8753XNvvFgQ3hWQkKts0oT1ufpQqpf8Sy0S2BcK6DbfX5_ilj4I1kVbswLaURHWZwpIddJ6BvbcmNhMcWmzkrERLPuG47L9DEHlLxIea2Orv5XvLIUzT2Hcj9Yj_2bk3yR_iovlBS4PbCvcXm-VGpYteniGhCgYlUJ3tivpItkAewjO8mqSROFXJI5WRdD_bV9HD-YMSdAPR-fh_KupXbHPZeyLXrC72WtpZggu9_dsoj1gy80pxCqT5lcivmNTvBF8d1KGF0me8XZlSTiGE0eEspxhTAQJOXP-EwAA__8%3D&layout=tala&

As for the diamond resizing, that is indeed a bug!

https://github.com/terrastruct/d2/issues/1677

[PolarGoose]

@jlnrrg, Great proof of concept!

I have some questions:

1. Even though the https://github.com/terrastruct/d2/issues/1677 has been closed, the D2Playground still doesn't resize the diamond correctly: D2Playground state machine
2. Is it currently possible to make the following shape to represent a state?