Add state transition diagrams for NTN & LNTN

[cmjc]

Description

NTN has states too, and they correspond exactly to LNTN states b/c they share the same state transitions. How about displaying this logic visually with a pair of synchronised state machine diagrams:

dot code for reference:

digraph finite_state_machine {
    graph [nodesep=1];
    fontname="Courier-Bold"
    {
    rank=same;
    node [shape = doublecircle, fixedsize=true, width=1.25, height=1.25, xlabel = "NTN"]; unbonded;
    node [shape = circle, fixedsize=true, width=1.25, height=1.25, xlabel=""];
    unbonded -> bonded [label = "bond"];
    bonded -> unbonding [label = "unbond"];
    unbonding -> unbonded;
    }

    {
    style = filled;
    rank=same;
    node [shape = doublecircle, fixedsize=true, width=1.25, height=1.25, label="unminted/\nburned", xlabel = "LNTN"] unminted; 
    node [shape = circle, fixedsize=true, width=1.25, height=1.25, label="locked", xlabel=""] locked; 
    node [shape = circle, fixedsize=true, width=1.25, height=1.25, label="unlocked"] unlocked; 
    unminted -> unlocked [label = "bond"];
    unlocked -> locked [label = "unbond"];
    locked -> unminted;
    }

    unbonded -> unminted [style="invis"];
    bonded -> unlocked [style="invis"];
    unbonding -> locked [style="invis"];

}   

Rationale

Visualisation will improve readability and clarity of the docs. Adding diagrams to the baseline docs is a known To Do not yet actioned.

Tasks

• [ ] Choose digramming language
• [ ] Enable diagramming in website
• [ ] Add state transition diagrams

[cmjc]

Choose diagramming language

Options seems to be:

• GraphViz has a nicer look and feel than PlantUML, imo.
• in Hugo - https://gohugo.io/content-management/diagrams/ - Mermaid or GOAT ASCII diagrams.
• in Hugo - develop Shortcode - https://gohugo.io/content-management/shortcodes/
• in Docsy - https://www.docsy.dev/docs/adding-content/diagrams-and-formulae/ - Mermaid or PlantUML
• in Docsy - Auto activation of mermaid diagrams (via use of hugo render hook) - see PR for specifics - https://github.com/google/docsy/commit/90843e360b921ea8417995e0261a355f2f3aed7a

Hugo References:

• https://gohugo.io/content-management/diagrams/
• https://gohugo.io/content-management/shortcodes/

Docsy References:

• https://www.docsy.dev/docs/adding-content/diagrams-and-formulae/

GraphViz References:

• GitLab: https://gitlab.com/graphviz/graphviz.gitlab.io/
• GitHub mirror: https://github.com/mhansen/graphviz-docs
• Docs site: https://graphviz.org/ , https://graphviz.readthedocs.io/en/stable/
• Article on graphviz.org website migration from Jekyll to Hugo Docsy: https://www.markhansen.co.nz/jekyll-to-hugo/

[cmjc]

Enable digramming in website

GraphViz:

• OK, so generating the diagrams and then embedding the image is what the GraphViz site does itself, so this seems a viable first approach.
• Could investigate a Hugo shortcode development

Mermaid:

• in Docsy - enabling Mermaid in config.toml when Hugo version is <=0.92 (Automatically enabled in Hugo v0.93 on) - https://www.docsy.dev/docs/adding-content/diagrams-and-formulae/#diagrams-with-mermaid

PlantUML:

• in Docsy - enabling PlantUML in config.toml (doesn't seem to be auto enabled) - https://www.docsy.dev/docs/adding-content/diagrams-and-formulae/#uml-diagrams-with-plantuml