TLDR; I needed to create a sequence diagram for an SSO workflow for katanemo.com and used ChatGPT with some other tools to generate it. If you don’t want to use drag and drop to generate sequence diagrams and need a more keyboard-friendly process to create diagrams then ask ChatGPT to generate code for sequencediagram.org and then use that code to generate actual diagrams on sequencediagram.org
Many developers prefer writing instructions to generate diagrams instead of using drag-and-drop functionality which is the primary way to create diagrams in the majority of modern tools. Luckily, I discovered sequencediagram.org a few years ago which is a more keyboard-friendly tool.
I have been using it to generate sequence diagrams. I was writing a doc for BYOI on Katanemo and needed to create a sequence diagram and I thought to see if ChatGPT or Bard can help me with that.
I wrote steps in the English language and asked both ChatGPT and Bard if they could create a sequence diagram, but their response was underwhelming. Then I tried to use ChatGPT to generate code for sequencediagram.org, and it was super impressive.
Example
I wrote the steps in simple English for the BYOI process and asked ChatGPT to create the code for sequencediagram.org.
Hello! Can you help me to create code for sequencediagram.org for BYOI to Katanemo? Below are the steps in english language.
1. User clicks on "Login with Enterprise SSO."
2. Katanemo displays a screen asking the user to enter their email.
3a. If the domain corresponding to the provided email is verified, Katanemo asks the user to enter a connection ID.
3b. If the domain corresponding to the provided email is not verified, Katanemo shows two options to the user: the default connection or a list of connections to choose from.
4. Katanemo triggers the OAuth flow and retrieves a token from the identity provider. (Note: The OAuth flow varies internally based on whether it's OIDC or SAML).
5. Katanemo internally generates a new token with user information.
6. Katanemo calls the Developer Service's redirect URL with the generated token as a query parameter.
7. The Developer Service exchanges the received code with a token by calling Katanemo, completing the authentication process.Below is the code generated by ChatGPT which I used in sequencediagram.org with very minor tweaks.
Title BYOI to Katanemo Sequence Diagram
actor User
participant "Katanemo" as Katanemo
participant "Identity Provider" as Idp
participant "Developer Service" as DevService
User -> Katanemo: Clicks on "Login with Enterprise SSO"
Katanemo --> User: Screen with email is displayed
User -> Katanemo: Provides email
Katanemo -> Katanemo: Verify domain corresponding to email
alt Domain Verified
Katanemo --> User: Ask to enter connection ID
User -> Katanemo: Provides connection ID
else Domain Not Verified
Katanemo --> User: Show options: default connection or choose from list
User -> Katanemo: Selects connection
end
Katanemo -> Idp: Trigger OAuth flow
activate Idp
Idp --> Katanemo: Retrieve token from identity provider
deactivate Idp
Katanemo -> Katanemo: Generate a new token
Katanemo -> DevService: Call redirect URL with code as query parameter
activate DevService
DevService -> Katanemo: Exchange code with token
Katanemo --> DevService: New token
deactivate DevServiceI pasted this code in sequencediagram.org to generate the sequence diagram.
