Visual programming and executable models

Farzad Yousefzadeh

Farzad Yousefzadeh

Lead Engineer @Stately

Humans learn like a scripting interpreter with much limited capacity.

Use pictures for a more effective medium of communication



Weighted Flowcharts

Sequence diagrams

Class Blueprints

Flowcharts are GRAPHS

Vertices and Edges

Your entire software can be a collection of graphs

Examples executable diagrams

State orchestration


Canvas item actor: selection, highlighting, per item commands

Canvas actor: permissions (read-only), modes (embed)

Keyboard actor: delete item, select all items, copy pasting items

URL actor: update query params, navigate, feed initial data to the canvas

Ad-hoc UI actors: Toast actor, Popover actor


Focus actor: register focusable items and focus them on demand by message passing


Component tree vs Actor tree

Diagrams to the next level

πŸ‘‰πŸ» Generate event sequences

πŸ‘‰πŸ» Collaborative

πŸ‘‰πŸ» Smart reshaping by analytics


πŸ‘‰πŸ» See breadth of features better

πŸ‘‰πŸ» Event based architecture

πŸ‘‰πŸ» Discover edge cases upfront

πŸ‘‰πŸ» Focus on behavior than implementation

πŸ‘‰πŸ» Visual model: onboarding, learning code,
Β  Β  Β documentation, et al

πŸ‘‰πŸ» Test generation and property based testing


πŸ‘‰πŸ» Model a new feature

πŸ‘‰πŸ» Refactor an existing feature

πŸ‘‰πŸ» Learn a feature by modeling it
Β  Β  Β at a higher level

πŸ‘‰πŸ» Test a feature by modeling it
Β  Β  Β  for the test scenarios

πŸ‘‰πŸ» Eliminate accidental complexity


Visual programming and executable models v2

By Farzad Yousefzadeh

Visual programming and executable models v2

Let's look at the traditional way of making software, the importance of diagramming and ideas to take diagrams to the next level where they can be used as the single source of truth for the software behavior generating rest of the software such as tests, documentation and the runtime.

  • 270