feature state diagram: add state diagram to markdown preview

[nammn]

Description

Bumped Mermaid version to support state diagrams.
Did sanity check whether mermaid is still working.

sequence diagram like before:

new added state diagram:

---

old description

This PR uses the library: https://www.npmjs.com/package/state-machine-cat version 5.3.6 Do we want to add this dependency?

By adding this dependency we gain the ability to create state graphs by adding it as a state block in the markdown editor.

```state
initial => todo;
todo => doing;
doing => done;
done => final;
```

leads to this:

Without this we have the rely on the dependencies we are using right now, Mermaid and Plantuml.
Why they are not sufficient for this use-case can be found here further: #2933

Screengrab GIF

https://gfycat.com/marvelousexcitablekoala

speed up by 4x

Issue fixed

fixes #2933

Type of changes

• ⚪ Bug fix (Change that fixed an issue)
• ⚪ Breaking change (Change that can cause existing functionality to change)
• ⚪ Improvement (Change that improves the code. Maybe performance or development improvement)
• ❌ Feature (Change that adds new functionality)
• ❌ Documentation change (Change that modifies documentation. Maybe typo fixes)
  -> I should update the example to contain a state diagram

Checklist:

• ❌ My code follows the project code style
• ❌ I have written test for my code and it has been tested
• ❌ All existing tests have been passed
• ❌ I have attached a screenshot/video to visualize my change if possible

---

IssueHunt Summary

Referenced issues

This pull request has been submitted to:

• #2933: Add State Diagram Support
• #2044: Can I create a tree diagrams like the picture below in boostnote

---

IssueHunt has been backed by the following sponsors. Become a sponsor

[nammn]

I just saw that the screengrab is cutting after 5 seconds. I will re-upload a new one tomorrow.

[nammn]

@Flexo013 I added a link to a gif as the video was a bit longer than wanted.
You can speed up around 4-8x, it should only take ~2 seconds then :)

[Flexo013]

Nice! Could you add a simple image showing something that wasn't possible before this PR?

Also could you add a bit more in the description about what we gain by adding this dependency?

[nammn]

Ohh mermaid added support for state diagrams around 25 days ago in their 8.4.0 release.
I did not expect this. IMO they don't look good, but having fewer dependencies are always good. And they are used and supported well.

I could either:

• bump mermaid and, if needed, adapt the mermaid code to support them https://mermaidjs.github.io/#/ under 8.4

• keep this cat state

What do you think? @Flexo013

[Flexo013]

My gut feeling says that we should stick to mermaid, because fewer dependencies. Mermaid's version should be bumped regardless, so if that yields a working (and comparable) result to what we have in this PR, then I say we don't start using cat state.

[nammn]

Sure, I agree.
Let me take a look at this, probably either late today or tmw :)

[nammn]

@Flexo013 I reverted the code and "only" bumped mermaid version and its dependencies. Also did a sanity check whether things are still working. They do + we support state diagrams as well now :-)

[ZeroX-DG]

LGTM 🎉