New Feature: Text-to-Diagram

One idea I've been wanting to experiment with for a while now is generating diagrams from text, and this weekend I managed to put together a demo and release it into Isoflow (which you can try for free at https://isoflow.io/app, just click the second button top-left, the one with the AI icon).

The idea is simple, but the results are surprisingly decent.

Even though I originally built isoflow to visualise network architectures, you can go beyond networks and generate anything that can be visualised on a graph. For example, try writing the prompt “Show me the organisational structure of the US political system” and you'll see what I mean.

As a visual learner, I’m already finding this feature quite useful for visualising many types of structures (everything from how Amazon operates to how the Sinaloa Cartel is structured). The output is not yet perfect, but as a first iteration it's already feeling quite useful, and I'm sure there is a lot of improvement to be made when it comes to optimising the prompts I'm using.

Now for the tech side of things.

Text-to-diagram uses the ChatGPT API under the hood (no surprises there!). As I mentioned, I've had this experiment in mind for a while now, but what bubbled it up to the surface again is that I recently read about OpenAI's new ‘Structured Outputs’ feature which allows you to pass a JSON schema to ChatGPT along with your prompt, and have ChatGPT output its response in the same format. This is HUGELY useful, and made it a breeze to get ChatGPT talking the same language as Isoflow.

Once I had that, I built a simple interface that would accept a prompt. Nothing complicated, mainly just a textbox, but after generating a few diagrams, I discovered that ChatGPT wasn't great at positioning nodes on the graph. A lot of the time the nodes were too close or too far away from each other, making the diagram seem chaotic and difficult to read. So as a next step, I started experimenting with auto-layout algorithms, mainly force-directed graph drawing.

The force-directed algo essentially sees nodes as physical objects, and connectors as rubber bands, and runs your graph through a physics model. Eventually connected nodes start getting pulled closer together, and the result is a neater layout. So now I use ChatGPT just to generate the content, and the layout algo deals with making things look nice.

All in all, I need to keep an eye on usage costs for this feature as I'm basically subsidising using ChatGPT's API. At the same time it opens up Isoflow.io to other use cases, and I'm interested in what people use it to visualise. Do let me know in the comments what you think of it.