Skip to content

docs(state_machine): link and embed the HFSM playground #777

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
finger563 merged 1 commit into from
Sep 5, 2026
+39 −2
Merged

docs(state_machine): link and embed the HFSM playground #777

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 39 additions & 2 deletions doc/en/core/state_machine.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,49 @@ generated from webgme-hfsm) can depend on.
Code examples for the state_machine API are provided in the `state_machine`
example folder.

The example runs the generated code for the following example hsfm (which is
provided and for which the code was generated from webgme-hfsm):
The example runs the generated code for the following example hsfm, which is
provided as a model (``components/state_machine/example/main/Complex.json``)
and generated to C++ as part of the example's build:

.. image:: images/complex-hfsm.png
:alt: "Complex" example HFSM showing the many of the UML formalisms supported.

.. ------------------------------ Playground -----------------------------------

Modeling and generating a state machine
---------------------------------------

State machines are modeled and generated with `webgme-hfsm
<https://github.com/finger563/webgme-hfsm>`__. The **HFSM Playground** runs the
whole toolchain in the browser -- edit the machine, simulate it, and read or
download the generated C++ -- with nothing to install and no server:

`Open the HFSM Playground in a new tab <https://finger563.github.io/webgme-hfsm/>`_,
or go straight to `this example's machine
<https://finger563.github.io/webgme-hfsm/?example=Complex&view=diagram>`_.

The playground below is live, not a picture: drag the states, press
**HFSM-Restart** and send events to watch the machine run, or switch to
**Code** to read the C++ it generates.

.. raw:: html

<iframe src="https://finger563.github.io/webgme-hfsm/?example=Complex&amp;view=diagram&amp;embed=1"
title="The Complex example HFSM in the HFSM Playground"
loading="lazy"
style="width:100%;height:640px;border:1px solid var(--color-background-border,#ccc);border-radius:8px;margin-top:0.5em"></iframe>
Comment on lines +39 to +42

The same generator runs on the command line, which is how the example builds
its C++ from the model:

.. code-block:: sh

npx -p webgme-hfsm hfsm-gen my_machine.json -o generated --no-support

``--no-support`` leaves out the shared runtime (``state_base.hpp``, the
history states, ``magic_enum.hpp``) because this component already provides
it. See the example's README for how that is wired into CMake.

.. ------------------------------- Example -------------------------------------

.. toctree::
Expand Down
Loading