An example of how to add UML-style triggers, guards, actions to state diagrams

[emmby]

:bookmark_tabs: Summary

Adds an example showing how to add text to a node below the title, specifically so that it can be used for UML-style triggers/guards/actions.

It would be nice to be able to say something like "You may use the XXX feature to add additional text to the state, for example for adding triggers, actions, and guards." But I wasn't sure what the XXX feature is called. What do you call it when you add additional lines to a mermaid box diagram using the colon? Subtitle? Label? Multiple lines?

:clipboard: Tasks

Make sure you

• [x] :book: have read the contribution guidelines
• [x] :computer: have added necessary unit/e2e tests.
• [x] :notebook: have added documentation. Make sure MERMAID_RELEASE_VERSION is used for all new features.
• [x] :bookmark: targeted develop branch

[netlify[bot]]

✅ Deploy Preview for mermaid-js ready!

Name	Link
🔨 Latest commit	07011df21d49d366af53625073fa9a8ec6746eed
🔍 Latest deploy log	https://app.netlify.com/sites/mermaid-js/deploys/66423ee4aa3a120008912a2c
😎 Deploy Preview	https://deploy-preview-5512--mermaid-js.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[codecov[bot]]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 5.73%. Comparing base (4f64242) to head (07011df). Report is 4 commits behind head on develop.

Additional details and impacted files

[](https://app.codecov.io/gh/mermaid-js/mermaid/pull/5512?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js) ```diff @@ Coverage Diff @@ ## develop #5512 +/- ## ======================================= Coverage 5.72% 5.73% ======================================= Files 278 278 Lines 42046 41978 -68 Branches 490 490 ======================================= Hits 2409 2409 + Misses 39637 39569 -68 ``` | [Flag](https://app.codecov.io/gh/mermaid-js/mermaid/pull/5512/flags?src=pr&el=flags&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js) | Coverage Δ | | |---|---|---| | [unit](https://app.codecov.io/gh/mermaid-js/mermaid/pull/5512/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js) | `5.73% <ø> (+<0.01%)` | :arrow_up: | Flags with carried forward coverage won't be shown. [Click here](https://docs.codecov.io/docs/carryforward-flags?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js#carryforward-flags-in-the-pull-request-comment) to find out more. [see 1 file with indirect coverage changes](https://app.codecov.io/gh/mermaid-js/mermaid/pull/5512/indirect-changes?src=pr&el=tree-more&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js)

[emmby]

Friendly ping. Any objections to merging this in as-is?

[emmby]

@sidharthv96 Friendly ping. Any thoughts about merging this in as-is?

[sidharthv96]

Hi @emmby, I'm not really familiar with guards and triggers in state digrams. So this is what I found when I looked it up.

In the image above, the triggers/guards/actions are on the line, not the node.

Which is not the case of the example.
Maybe it should be updated to use Transitions syntax?

Something like