Add support for mermaidjs state diagrams

[tsurdilo]

What would you like to be added:
Simple support to spit out mermaid state diagram markup. Does not have to be anything fancy.
https://mermaid-js.github.io/mermaid/#/stateDiagram

you can get idea from https://github.com/serverlessworkflow/sdk-java/tree/main/diagram which does similar thing just spits out plantuml markup

Why is this needed:
currently we have support in java sdk for https://plantuml.com/ and it works but requires us to deploy
https://github.com/serverlessworkflow/workflow-diagram-service
on some cloud env, but we can't afford it as a project.
This would allow us to use it in our vscode plugin as well

[antmendoza]

Hi,
I am working on this task,

I have implemented already something and tested with this three examples and this is the output

Application request

stateDiagram-v2
CheckApplication : CheckApplication
CheckApplication : type = switch

StartApplication : StartApplication
StartApplication : type = operation

RejectApplication : RejectApplication
RejectApplication : type = operation

[*] --> CheckApplication
CheckApplication --> StartApplication : ${ .applicants | .age >= 18 }
CheckApplication --> RejectApplication : ${ .applicants | .age < 18 }
StartApplication --> [*]
RejectApplication --> [*]

Provision Orders

stateDiagram-v2
ProvisionOrder : ProvisionOrder
ProvisionOrder : type = operation

MissingId : MissingId
MissingId : type = operation

MissingItem : MissingItem
MissingItem : type = operation

MissingQuantity : MissingQuantity
MissingQuantity : type = operation

ApplyOrder : ApplyOrder
ApplyOrder : type = operation

[*] --> ProvisionOrder
ProvisionOrder --> MissingId : Missing order id
ProvisionOrder --> MissingItem : Missing order item
ProvisionOrder --> MissingQuantity : Missing order quantity
ProvisionOrder --> ApplyOrder
MissingId --> [*]
MissingItem --> [*]
MissingQuantity --> [*]
ApplyOrder --> [*]

Car Vitals Check

stateDiagram-v2
WhenCarIsOn : WhenCarIsOn
WhenCarIsOn : type = event

DoCarVitalChecks : DoCarVitalChecks
DoCarVitalChecks : type = operation

CheckContinueVitalChecks : CheckContinueVitalChecks
CheckContinueVitalChecks : type = switch

[*] --> WhenCarIsOn
WhenCarIsOn --> DoCarVitalChecks
DoCarVitalChecks --> CheckContinueVitalChecks
CheckContinueVitalChecks --> [*]

In addition to changing the "type" description ("type = Event state" instead of "type = event" and so on..)

can you think of any other changes, or any example that I can try in order to test the output ?

[tsurdilo]

@antmendoza holy crap ty!!!!!!! This is amazing. If you want to try some other samples you can try and compare the ones on
serverlessworkflow.io/editor:

Do you think we should make this part of the typescript sdk or is there some way to externalize this into a nodejs app that uses the typescript sdk?

Awesome work man

[antmendoza]

thank you @tsurdilo

Do you think we should make this part of the typescript sdk or is there some way to externalize this into a nodejs app that uses the typescript sdk?

I think that ideally this should be a different project, but on the other hand the implementation is only few files, so I don't know if really makes sense to maintain a different project for now.

[antmendoza]

"only few files" for now, let's see if I can make this work and we can decide later.

[tsurdilo]

i think as long if its somehow possible to use it on our /editor page thats not a nodejs project (just html and js) it does not matter in the end. wdyt?

[tsurdilo]

i also think we should use mermaidjs output in java sdk too so they are consistent. will look at your impl to copy :)

[antmendoza]

what I have implemented here is a class that receives a workflow parameter and generate the mermaid source code. (not the svg)
it returns something like

stateDiagram-v2
CheckApplication : CheckApplication
CheckApplication : type = switch

StartApplication : StartApplication
StartApplication : type = operation

RejectApplication : RejectApplication
RejectApplication : type = operation

[*] --> CheckApplication
CheckApplication --> StartApplication : ${ .applicants | .age >= 18 }
CheckApplication --> RejectApplication : ${ .applicants | .age < 18 }
StartApplication --> [*]
RejectApplication --> [*]

mermaidjs relies on the browser to render the image, so the actual implementation is enough for the online editor (I have already tested it), but, do we want to expose in our sdk a class called mermaidCodeGenerator or something similar?

I have been testing the implementation to generate an image directly in the sdk, to make the API more generic, but with this implementation I've realised that the sdk is not working in the browser.

to generate the image in the sdk I've had to use a headless browser (or mermaid-cli that at the end is using a headless browser ), and by doing that, for some reason, the final bundle is incompatible with the browser. I need to investigate.

So if you think that generating the mermaid source code is enough for now, and we need this for the editor, I can finish the actual implementation and later continue working on this and we will see how we proceed.

[tsurdilo]

Yeah just the source for now is good.