Press "Enter" to skip to content

Diagramming a Finite State Machine with Mermaid.JS

Matt Eland defeats the boss:

A year or two ago I built a small game prototype that featured a boss fight with a crab monster that was powered by a finite state machine. This monster waited for the player to enter its arena, then descended from the ceiling, roared a challenge, and began fighting the player.

The monster was only damageable after it finished descending. Taking enough damage would make the monster react in pain before it could attack again. Hurting the monster enough caused it to die.

Read on to see how you can model this information in a finite state machine and, from there, how to visualize it with the Mermaid library. I have used Mermaid in the past and can certainly recommend it if you need to generate diagrams programmatically.