How to use MermaideJS to streamline communications with your new AI overlords


Are you working on wiring in the latest LLM to your products but you are struggling to visualize the data that comes out of it?

Do you have some complex chart or graph you want to feed into your LLM model but can’t figure out how? Or worse yet are using an expensive image to text model first and feeding the result to the LLM?

Then you need to take a look at MermaidJS. I can’t say for certain all models are being trained on MermaidJS syntax but it seems most of them are well versed in it.

This means you can ask it to render complex data in simple, easy to understand, visual graphs and diagrams.

As an experiment I fed it my Opensource Terraform Modules and asked it to draw a Network Diagram and sure enough it did… after a few iterations; for some reason it kept making it really tall.

I then asked it to make a swimlane diagram demonstrating a specific flow through the system to which it generated a beautiful diagram with only slight hallucinations.

These diagrams and others like ERDs are a huge part of how I document and communicate the massively scalable systems I design for my clients so much so that I built my own Animated Pixel Art Diagram Tool.

So I pose the question:

Can I flip this paradigm and create my own diagram of how I want a system to work and then communicate it to my LLM coding partner with a MermaidJS diagram?

I plan on running some experiments with doing just that in the future.

Questions for you:

What unique ways are you finding to communicate complex data to your AI models?

What use cases do you have for using MermaidJS syntax as a communication medium to your LLM models?