Mermaid.js diagrams

[PaulRBerg]

• [x] Access Control
• [x] Lockup Linear
• [x] Lockup Dynamic (emphasis on segments)
• [x] Hooks
• [x] Reference Overview (show how all contracts interact with one another)
• [x] Status Transitions

[PaulRBerg]

@maxdesalle - this GitHub issue is connected to my recent Slack message.

Produce two Mermaid.js diagrams that show how streams are stored in the Lockup Linear and Lockup Dynamic contracts.

We are taking for granted that these contracts are singletons, but someone unfamiliar with Sablier might not find it so obvious that all LL/ LD streams are stored in a single, monolith contract.

Something like:

• Show Lockup Linear/ Dnyamic in a big node
• Stack multiple streams (5-10) in a vertical list of nodes (comparatively smaller to the contract node)
• Connect the streams to the contract node using arrows
• Add annotations that reference some key properties, e.g. deposit amount, start time, end time, etc.
• Drawing some inspiration from Uniswap V4's diagrams would be helpful (structural, not aesthetic inspiration)

[maxdesalle]

Would something like this fit @PaulRBerg? Didn't exactly follow your guidelines. Basically tried to show the "deconstruction" of the a stream from the contract to its key properties. Let me know what you think about it!

[PaulRBerg]

That's a good start, @maxdesalle!

Feedback:

• It would be nice if we could place the word "contract" underneath "Lockup Linear", not next to it
• "End time" instead of "stop time"
• "Deposit amount" instead of "Deposit time"
• Differentiate the node shapes
  • For streams: cylindrical shape
  • For properties (e.g. "start time"): assymetric shape or stadium shape

[maxdesalle]

Is this better @PaulRBerg? If this fits, I will create another version with additional details for Lockup Dynamic.

[PaulRBerg]

Looks great, @maxdesalle!