I built a mind map application in one day using “Vibe Coding” (Google AI Studio)

By using Google AI Studio, I was able to create a mind map application using only natural language. This is what they call “Vibe Coding.”

I have created simple programs and somewhat complex Office macros in the past, but I am not a professional programmer.

Starting Point

The mind map outputted by NotebookLM can only be exported as an image file. I wanted to be able to edit the valuable mind map. Therefore, I used Google AI Studio to create an application that reads the mind map image, performs OCR (Optical Character Recognition), and converts it into Markdown. Because that was accomplished so easily, I became curious to try the next thing.

If this is possible, maybe I can create a mind map application itself?

Reading a Markdown file and displaying it as a mind map happened instantly. The following is a sample mind map automatically generated by Google AI Studio. At this point, it only displayed the map and did not yet have editing functionality.

Very early stage. The AI assistant functionality came along even though I hadn’t requested it.

Implementing the editing functionality took one day. There are still bugs and unimplemented features, but it is already fully practical.

Current state

Instead of spending time debugging, I can focus on adjusting the node placement to look aesthetically pleasing, and thinking about fun dark theme color schemes and operational effects. Themes like Cyberpunk, Ronin, and Zen Dark were automatically created by Google AI Studio.

It was like when I was hooked on the turn-based Civilization VI. It writes the code while I make coffee or brush my teeth. Although sometimes I have to check with Google AI Studio to see if it’s done.

And although coding knowledge is mostly unnecessary, there are points of caution.

First, you must clarify what you want to achieve.

What I want to achieve → A mind map application with good visuals and excellent operability.

(I hadn’t initially sought operability, but because “good visuals” were achieved so easily).

You also need to verbalize what you want to do and give precise instructions. If you think something is wrong, you must relentlessly criticize it and demand corrections (give negative feedback). Although it shouldn’t be necessary to write prompts in English, writing them in English is also good for learning. And since English is probably more logical than Japanese, it tends to work better.

Features standard to Google AI Studio: Since it’s a web application, it is platform-independent. It already knows how to create good designs from the start, including samples and color palettes.

The AI assistant functionality came along even though I hadn’t requested it… If I use the AI too much, I will be charged by Google.

Insights

The application must not only function but also operate pleasantly. Furthermore, fixing bugs takes time even when using Google AI Studio. Basic coding knowledge is helpful. This is because it helps you understand what is going wrong when a problem occurs. Programming education is not useless.

I’ve hit the API limit, so I will move on to something else for now.

It seems we have entered an era where we can create the necessary applications ourselves. I will likely be able to stop paying the subscription fee for a certain mind map application. Will I be able to provide my own mind map application when running an Sci-Fi Prototyping workshop?

Leave a Reply