Use case visualization with Mermaid.js

[dalssoft]

It would be interesting to understand a use case not only in code but also having a more "visual" approach and have this information as part of Shelf experience.

For that we could extract metadata from Herbs usecase and export to MermaidJS:

graph TD
    A([Update User Account])
    B(Validate given User Account information)
    C(Is User expired?)
    D{If User is expired}
    E(Then Activate User)
    F(Else Do nothing)
    G(Save User Account)
    A --> B
    B --> C
    C --> D
    D --> E
    D --> F
    E --> G
    F --> G

Generated graph (by github / mermaid):

graph TD
    A([Update User Account])
    B(Validate given User Account information)
    C(Is User expired?)
    D{If User is expired}
    E(Then Activate User)
    F(Else Do nothing)
    G(Save User Account)
    A --> B
    B --> C
    C --> D
    D --> E
    D --> F
    E --> G
    F --> G

Loading

[maikmb]

I will work on this issue.

[maikvortx]

Guys, where do you think this diagram should be on the shelf? I think to put it on the bottom of usecase details.

[dalssoft]

My suggestion is to have a switch buttons to view steps as text or as workflow, something like this:

[maikmb]

Hello! What do you think about this example?

[dalssoft]

Wow! great job @maikmb!

(1) is it possible to change the color of the graph? this blue/purple doesn't match the current visual identity.

(2) have you tested with complex UCs (many IFs and/or multi-level steps)?

[jhomarolo]

Well done @maikmb!

For me, we just need to change the colors, nothing more.

[maikmb]

Hey guys!

This is an example with Herbs primary color and complex UCs like many Ifs or multi-level-steps. Any more suggestions?

[jhomarolo]

Awesome!

[jhomarolo]

Please open the PR

[dalssoft]

Wow! its getting very cool!!

One thing that I didn't understand was this part:

Could you post here the code for this use case?

[maikvortx]

Please open the PR

Hi @jhomarolo, I will implement unit tests to open PR. I need one more day to implement it.

[maikmb]

Could you post here the code for this use case?

Hi @dalssoft ! This part refers to Multi-Level Steps.

Step example:

    'Send real time events': step({

      'Update mobile push notifications': step(async (ctx) => {
        return Ok()
      }),

      'Update payment cart': step(async (ctx) => {
        return Ok()
      }),     

    }),

[maikmb]

Hey guys, here's the full example with complex Multi-Level Steps.

Flow Chart

Usecase

const updateItem = (injection) =>
  usecase('Update Item', {
    request: {
      id: Number,
      description: String,
      isDone: Boolean,
      position: Number
    },

    response: Item,

    'Validate request': step(async (ctx) => {
      return Ok()
    }),

    'Check if is necessary to update': ifElse({
      'If position has changed ': step((ctx) => {
        return Ok(true)
      }),

      'Save itens': step(async (ctx) => {
        return Ok()
      }),

      'Updated item': step(async (ctx) => {
        return Ok()
      }),
    }),

    'Notify update item': step(async (ctx) => {
      return Ok()
    }),

    'Calculate stock': step(async (ctx) => {
      return Ok()
    }),

    'Send real time events': step({

      'Update mobile push notifications': step(async (ctx) => {
        return Ok()
      }),

      'Update payment cart': step(async (ctx) => {
        return Ok()
      }),     

    }),

    'Check if has product': ifElse({
      'If has product ': step((ctx) => {
        return Ok(true)
      }),

      'Update product item': step(async (ctx) => {
       return Ok()
      }),

      'Create product item': step(async (ctx) => {
        return Ok() 
      }),
     
    }), 

    'Update cart dashboard': step(async (ctx) => {
      return Ok()
    }),
    
    'Save product': step({

      'Update database': step(async (ctx) => {
        return Ok()
      }),

      'Update cache database': step(async (ctx) => {
        return Ok()
      }),     

    }),

  })

[dalssoft]

Is there a PR for this issue? I couldn't find.

[maikvortx]

Hi @dalssoft,

I will open a PR for this feature. I created a new glue, herbs2mermaid, and configure it for my project to test with shelf.

[jhomarolo]

@maikmb when you finish, please put the pr link here

[dalssoft]

since we have /~https://github.com/herbsjs/herbs2mermaid now, can we move on with this feature?