sequence diagram online
Sequence diagrams show the order of messages exchanged between participants over time, widely used to document API calls and integrations between services. This preset already loads an example of a client querying an API that queries a database.
Just reference a new name in a message; Mermaid creates the column automatically, even without declaring participant Cache beforehand.
The -) arrow represents an asynchronous message with no expected matching response, unlike ->> and -->>.
Mermaid is an open-source JavaScript library that turns plain text, written in its own Markdown-like syntax, into diagrams rendered as SVG. Instead of manually drawing boxes and arrows in a graphics tool, you describe the diagram's structure in a few lines of text and the library computes the layout and draws the result.
It is not required: if a name only appears in a message, Mermaid creates the participant automatically the first time it is referenced. Declaring with participant is mainly used to control the column order.
->> draws a solid line, typically used for a call or request; -->> draws a dashed line, typically used for a response or reply. The visual distinction helps read the back-and-forth flow of an API call.
Yes, Mermaid supports blocks like loop ... end and alt ... else ... end to represent repetition and alternative paths, drawing a box around the involved messages.
Loading the rendering engine...
Your Mermaid code and the rendered diagram stay in your browser, processed by the mermaid.js library. Nothing is sent to any server.