Grouping the steps into sections

So far, you have seen that different steps are shown in the order they are inserted, but they are rendered in a similar manner—that is, with the same color. Sometimes, it may make more sense to group some of the related steps together into sections. Each section would act as a parent of the different steps under it and represent a specific phase in the user journey. It could also be used to tag the different steps to a specific category type.

In Mermaid, you define a section by using the section keyword. The syntax of adding a section is quite simple, as we can see here:

section SECTION_NAME

Here, you start on a new line with the section keyword, followed by a SECTION_NAME string. The section name should be an alphanumeric string value, and everything after the section keyword is treated as SECTION_NAME, which will be displayed as the title of the section.

To link a step under a specific section, simply define that step after the...