azriel91

then after discovering it, I was too invested in my own project to switch -- the complexity in positioning nodes, routing edges to not draw over labels, taking into account nesting and rank dir gave me an appreciation for how hard these can be, and I kinda wanted my own version (plus other features)

https://azriel.im/disposition/

Things I missed in original graphviz dot:

1. predictable / stable layout

2. dark and light mode css (tailwind)

3. interactive through pure css

4. markdown descriptions

Took ages understanding how to route edges to not overlap labels.

- Side: https://peace.mk/ - Create my own automation framework, because I want to make it clear what infrastructure-as-code is going to do before/during/after you run it

- side-side: https://azriel.im/disposition - a diagram generator like graphviz, but supports markdown, to visualise what infrastructure exists / will exist / will be deleted / is in progress when automation is running

- side-side-side: https://azriel.im/dioxus_codemirror - needed a code editor that supports LSP so manually creating diagrams is learnable

I'm back up the stack to the diagram generator, and hopefully soon back to the automation framework

https://azriel.im/disposition/

The text editor has an LSP built in to guide you to what can be entered, but see the examples.

I wanted a way to have visual documentation that can show/hide detail, and be pure svg so that it can be pasted into sites without becoming pixelated.

Also supports animations to show interactions between hosts, which always gets messy when drawing a static diagram.

Site: https://azriel.im/disposition

Repo: https://github.com/azriel91/disposition

It's written in Rust, has stable node positions, is stylable (and has default styling, dark mode styles), among other things.

The hardest part is calculating coordinates for edges:

- ranking nodes / positioning them when edges connect nodes of different nesting levels

- ensure edges don't overlap with nodes to not obscure content

- ensure edges don't overlap with each other

It's about 60% of what my version of "complete" looks like. Remaining parts:

- edge labels (might need a rewrite of how edge paths are calculated.

- images in nodes

- generating diagrams for different screen sizes

- LSP support (?)

https://azriel.im/disposition

Solves some problems that were hard to work around with GraphViz, e.g. default and customisable styling, light and dark mode, stable / predictable layout.

Now I still make them occasionally, though I haven't updated the blog for a while.

I find that tangible art could sometimes say "thank you" more than the utterance of the words themselves.

Also makes for a great wedding gift:

https://cards.azriel.im/2018/09/kevin-fiona.html

https://peace.mk/blog/checkpoint/

(old blog post, but I'm slow in making progress)

Made a little web app that helped me communicate: https://azriel.im/tears/

(I could just point to the number when I couldn't talk/listen)

https://github.com/Pernosco/gha-runner

but I'm not sure how complete it is, and probably doesn't satisfy the author's use cases

I use this as my main shell on Windows, and as a supplementary on Mac and Linux.