Constructs
`alt` : e.g. `Red`, `Green`, `Yellow`, `Guest`, `LoggedIn`, `About`, `Welcome`
`branch` : e.g. `@user`, `@page`
`or` : `|` or `---` e.g. `Red` | `Green` | `Yellow`
`branch-expand` : `:` e.g. `@user: Guest`, `@page: About`
`sub-expand` : `:>` e.g. `Red` :> `Walking` | `Waiting`
`optional-sub` : `:>` e.g. EditEvents :>?
| SelectedEvent <id>
| CreatedEvent <id>
`atomic-marker` : `.` e.g. `Green.`, `Yellow`. // optional
`composite-marker` : `...` e.g. `Red...` // optional
`agnostic-view` : // the omission of atomic/composite marker
`system-types` : `<...>`, such as <int>, <string>, <date>
-- Alternatives (or-states) or Branches (and-states) is per default shown collapsed. The next step, the refinement/branch value, can be shown using the expand-constructs :> or :. Atomic states, marked per a trailing dot . cannot be expanded.
Sample STN Notation for some Traditional Toy State Machine Examples
TrafficLight from xstate.js.org
// agnostiv view (we don't express whether or not there are refined states)
TrafficLight :> Green | Yellow | Red
// Collapsed explicit view (denotes atomic/compsed nature of states)
TrafficLight :>
| Green.
| Yellow.
| Red... // can be expanded
TrafficLight :>
| Green.
| Yellow.
| Red :> // expanded view of Red
| Walking.
| Waiting.
| Stopped.
| Blinking.
Counter toy app from 7GUIs
Counter :> <int>
TempConv toy app from 7GUIs
// agnostic view
TempConv :> F2C | C2F
// expanded view
TempConv :>
| F2C >: <string Fahrenheit>
| C2F >: <string Celcius>
// this is all the essential state needed to restore the app to its state
// the source number as well as the converted number are derived from the input string
Sample small website GrowersAssociationSite (GA_Site)
Source: This is part of a (toy) site I'm working on as part of my web design educaton.
// collapsed view
GA_Site
@lang
@user
@page
// expanded view
GA_Site
@lang : sv | en | ja | eo
@user : Guest | LoggedIn <string UserName>
@page : About
| Join
| Calendar :>
| BrowseEvents
| EditEvents :>?
| SelectedEvent <id>
| CreatedEvent <id>
| UpdatedEvent <id>
| DeletedEvent [ <id>, <string date>, <string descr> ]
| UndidDeletion <id>
Top comments (0)