State Diagram - Proof of Concept #1674
Description
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 offFootnotes
¹ 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.