From Text to Diagram: Creating Sequence Diagrams for Technical Writing through LLM/AI

UknOwWho_Ab1r
2 min readNov 22, 2023

--

LLM + Problem decomposition + Mermaid syntax + Draw.io

Sequence Diagram & LLM

While coding my webserver project I was assigned to deal with the parsing of the URI (Unique Request Identifier). To understand the whole URI parsing process, I leveraged LLM to decompose how it works underneath with example. Here an output I got :

After going through the step by step process and verifying it. Now lets convert them into Mermaid Sequence Diagram… Yahoo !!_!!

Output:

Mermaid Syntax /GPT-4 Output

As we got our mermaid syntax diagram code. Now, let’s delve into making it visual.
First, we go to draw.io and Insert -> Advanced -> Mermaid

Check That!_!

Paste your Mermaid code that you got as output from your LLM and click on “Insert”.

Mermaid Syntax

Do give a recheck with the reference documentation of Mermaid and see if any adjustment is needed or not. There you go the final diagram. You can choose to add the Flow animation:

Isn’t that cooler now.

You can leverage LLM to produce and add more styles to it. Feel free to experiment and comment what you have made.

Feel free to reach out or buy me a coffee if this helped you somehow.

--

--

UknOwWho_Ab1r

Software Engineer | Mechanical Engineer | Redis Side Quest Hackathon Winner | Gen AI Enthusiast