Tell us what works and what could be better. We read every submission.
@ajayullal·2 public vizzes
This example shows a state machine for an SSL quote creation workflow, modeled with XState and visualized by XState Viz. It maps user interactions—like clicking a create button, searching or selecting accounts, and progressing through opportunity and contract stages—to nested and parallel states. The machine defines actions such as fetching account lists and opportunities, while transitions manage UI elements like buttons, tables, and accordions. The source code is written in plain JavaScript, using the `Machine` constructor from XState, and the visualization is generated automatically by the XState Viz tool.
This visualization shows a state machine for creating an SSL quote, modeled with XState’s `Machine` API. It maps user interactions—such as clicking a create-quote button or searching an account—to transitions between states like Home, Opportunities, and Contract, including nested sub-states for account listing and selection. The code uses `entry` actions to fetch accounts and opportunities, and defines explicit events like `Select Account` to enable or disable UI buttons. The rendered diagram, generated by XState Viz, displays the state hierarchy and transition paths directly from the machine definition.