Investigate Mermaid as alternative to generating and exporting diagrams manually

[brampitoyo]

Mermaid is “a simple markdown-like script language for generating charts from text via javascript.”

I initially wanted to use it to avoid generating PNG manually. I also want to do it to allow everybody to push changes to the flow. Want to propose an alteration to a certain process? Just change the syntax a bit.

Using this:

graph LR
  start(START: Click "buy") --> signIn(Sign in)
  signIn --> if1{if}
    if1 --> |haven't added credit card| add(Add credit card form)
      add --> validate(Validate credit card information)
      validate --> if2{if}
        if2 --> |validation succeeds| buy(Click "Buy" or "Subscribe")
        if2 --> |validation fails | add
    if1 --> |want to remove credit card| edit(Click "Edit")
      edit --> remove(Remove credit card)
      remove --> if1
    if1 --> |have added credit card| select(Select validated card to use)
      select --> buy
  buy --> if3{if}
    if3 --> |not enough funds in account| select
    if3 --> |enough funds in account| accept(Payment accepted)
  accept --> stop(END: Send receipt to email address)

I was able to generate an output that looks like this:

Compare it to the diagram I’ve designed with Lucidchart and exported manually:

Mermaid works great for generating linear diagrams. It even has a mode to create sequences. But my service diagrams have a lot of looped states, and the layout generator can’t seem to handle them very well. In this case, nothing beats the readability of manually positioned nodes.

Conclusion

• I’ll continue manually exporting diagrams from Lucidchart to PNG, since it generates good looking and comprehensible results
• For sequences and more linear diagrams, consider using Mermaid

[kumar303]

wow, this looks pretty sweet