Sequence diagrams can be great visual representations of how systems interact, messages flow, and processes function.

Thanks to the js-sequence-diagrams Javascript tool, I’ve put together a one-page site that lets you create those diagrams, view and download them, and send them as an encoded link.

• Go to sequence-diagrams.netlify.app to use the site
• There’s an example diagram, with helpful hints
• You’ll get parser error messages if you go wrong
• You can download a scalable SVG file for further use
• You can send a single link that contains within itself the complete source and SVG diagram, with no further dependencies needed for rendering

An example

Here’s the example with the definition that generated it, as presented by default when you land on the site.

Title: - SUGGESTED SEQUENCING, WITH AUTHORISATION METHODS -

participant Client\nSites as C
participant Identity\nService as I
participant API\nGateway as G
participant Business\nServices as S
participant Data\nServices as D
participant Postgres\nDatabase as DB

Note over C,G : HTTPS
C -> I : User, Password
I --> C : JWT
C -> G : Auth header (Bearer JWT)

Note over G,D : HTTP
G -> S : Headers
S -> D : Headers

Note over D,DB : TCP/IP
D -> DB : Connection\nString

Note right of DB: Stored procs\n and views
DB --> D :
D --> S :
S --> G :
G --> C :