I’ve added around 300kb to the effective size (compressed!) of the app.js file that helps present this website. The increase is overwhelmingly just the size of the excellent mermaid charting tool. If there is a plan here, it is to make it easy for me to generate diagrams from text definitions embedded in the posts on the site.

So let’s celebrate the ballooning javascript payload with a lovely example state diagram:

---
title: a choreography
---
stateDiagram-v2
  [*] --> still
  still --> [*]

  still --> moving
  moving --> still
  moving --> crash
  crash --> [*]

The diagram (that you hopefully see) above was generated dynamically from the following instructions:

---
title: a choreography
---
stateDiagram-v2
  [*] --> still
  still --> [*]

  still --> moving
  moving --> still
  moving --> crash
  crash --> [*]

I like mermaid’s markdown-inspired syntax – stoked to play around a bit more.

It’d be more optimal if the site compiled the SVGs from the text definitions during the build process. That would cut down on the JS overhead; I don’t think we actually need to be generating these diagrams dynamically… Although thinking through what we could do with the dynamic compilation is kind of fun.