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

```d2 ** { 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?