Isoflow
Create beautiful cloud diagrams
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.
Isoflow reached #1 on PH (to my surprise). Lots of feature requests, and feels like there is a demand for an easy-to-use diagramming tool right now. I'll be working closely with supporters to prioritise what comes next, based on whats most needed..
-
1
Many many Congratulations! @markmanx
It was Socrates that once said, 'Behold, video is way more effective than static images for a landing page, my dudes' (...pretty sure that was Socrates). In any case, I've given Isoflow's landing page a bit of a bump up with a video demo. Small steps.
After recognising that I was going down a dark path by spending way too much time on this landing page, I decided to cut all corners and smash it out in it's simplest form (just one screenshot, and using FormKeep to capture email addresses). It's helpful to think about landing pages as an iterative process (i.e. we can always make it better later), it takes some of the pressure off getting to a big Tada! moment and helps prioritise just the critical things needed for a first launch.
If you've ever played a game like Sim City, you'll be familiar with the isometric perspective (which is the angle at which you view the game). This perspective gives the player god-like visibility over their entire creation, and Isoflow allows web apps to be viewed in the same way.
Isoflow's UI uses an SVG library called Paperjs (to render the map).
Comment