![]() If you'd like to learn more and see a few features I didn't cover, I recommend you check out Mermaid.js' sequence diagram documentation.Īnd finally, I'm not done exploring what modern software engineers can do with Mermaid.js so stay tuned for more content! Mermaid. Ultimately, I think Mermaid.js Sequence Diagrams are a good strategic tool for diagramming complex interactions or communicating complex concepts in a visual way in your documentation. Personally, I find Mermaid.js diagrams so convenient to use that I now find myself making sequence diagrams where I normally wouldn't have before due to the time and frustration required to build one. While sequence diagrams aren't necessarily beginner friendly, working with Mermaid.js sequence diagrams is exponentially less painful than trying to control a diagramming tool to generate and maintain these diagrams. Ultimately, I don't think I like this shorthand and instead prefer to use the activate / deactivate syntax for more readable sequence diagrams, but the option is there for you if you want it. do something and step 1 are clearly of different levels, better put them into separate use cases. Use Alternate and Exceptional flows to document such behavior. Let's start with a simple sequence diagram representing a message from the client to the server and the server's response back.Įnter fullscreen mode Exit fullscreen mode In tools like Visual Paradigm you can model flow of events with the if/else and loop conditions, and specify the steps as user input and system response. If you're curious about this, however, I do have an article and video on understanding JWT authentication. However, the focus of the article's text will be on the diagrams themselves, not the process of JWT authentication. Over the course of this article, we'll create and expand a sequence diagram to explain JSON Web Token (JWT) authentication. ![]() If you're curious about sequence diagrams in general, a good starting point might be Visual Paradigm's Guide to Sequence Diagrams. ![]() This can help explain complex logic and interactions with a technical diagram and identify areas of confusion or misunderstanding. Sequence diagrams represent systems and individuals as vertical columns and messages between these parts as horizontal lines that move across the various lanes to show how data flows between different pieces of the system. Mermaid.js is available in a variety of tools, but I most frequently use it in GitHub markdown files and in Polyglot Notebooks.įor those of you who haven't been exposed, sequence diagrams describe a series of messages in a sequence between different objects. You can use the If else condition, also called alternatives in UML terms. It also means that the diagram source is easily version-controlled and anyone on your team can modify it without special tooling or licenses. 1.Is there a standard way to show a conditional sequence Yes. This means your time is focused on actually writing the interaction logic instead of generating a visual. With Mermaid.js you can write a few lines of text and use its JavaScript library to generate a professional sequence diagram like the one below: Mermaid.js is the solution I needed 20 years ago. I distinctly remember working on sequence diagrams in my undergraduate computer science education and having so many issues trying to get the various boxes and arrows to look standard, rearrange shapes as I needed to expand the diagram, and generally focusing on anything but the logic the diagrams intended to create. Previously I've shown how Mermaid.js allows you to create entity relationship diagrams and class diagrams, but in this article we'll cover a far more complex diagram: the sequence diagram. In the user authentication process we describe, the messages show how a user enters information into the browser to gain access to the webpage and how the web browser will then cross-check credential to the designated application.I've been really enjoying seeing how Mermaid.js lets you generate technical diagrams from simple markdown. What information is passed from one object to another? The other set of components you must identify are the messages the objects will send. The objects, sometimes called actors, are the principal players that perform tasks and send messages.įor example, in a login sequence, two of the objects would be the potential visitor or user and the login page a visitor uses to interact with the platform they’re attempting to log into. The first necessary set of components are the objects. To accomplish these goals, you must first identify the components of your system that should be diagrammed. Map out a real or hypothetical scenario that has many different components. See how objects and components interact with each other in sequence to complete a process. ![]() Model how a complex procedure or system operates. You can accomplish several critical tasks with a sequence diagram. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |