How we use diagrams to increase software reliability

Alexander Leon
2 min readDec 17, 2023

Over at prodfox.com, In our quest for superior software reliability, we’ve turned to an innovative approach: using Mermaid.js to create visual diagrams that map user interactions with our system. This technique goes beyond traditional unit testing by providing a comprehensive view of the software’s behavior in real-world scenarios.

Visualizing User Interactions for Deeper Insights

Incomplete snippet showcasing the user flows and expected behavior

Mermaid.js allows us to visually document the entire flow of user interactions, highlighting potential error states and ensuring our software adheres to the intended design. This big-picture view is critical, as it reveals issues that unit tests, focused on individual components, might miss.

A More Effective Approach to Bug Detection

By comparing these diagrams against actual system performance, we’ve significantly reduced bugs. This visual method is more efficient in identifying discrepancies, offering a clearer understanding of where and why problems occur.

Improving Team Collaboration

These diagrams also enhance team communication, providing a common, easy-to-understand language for developers, testers, and stakeholders. This shared understanding improves collaboration and speeds up problem-solving.

Conclusion

Our diagram-driven approach, centered around Mermaid.js, has led to more reliable software and a better understanding of user interaction patterns. It’s a key part of our ongoing commitment to innovative and effective software development.

Moving forward we are keen to add more color coding to differentiate the system from the UI from the user interaction.

Thanks for reading! Learn more about prodfox.com, digital signing and editing app

--

--

Alexander Leon

I help developers with easy-to-understand technical articles encompassing System Design, Algorithms, Cutting-Edge tech, and misc.