Last June 14, 2025, I visited a local café near where I live for a quick break. Well, I wanted to be productive at least since it was a hot Saturday afternoon. I figured that the quick project I spawned a couple of days ago was worth building on.
This is the story of that project.
MermaidJS Editor is a project I vibe-coded on a trip to a café and was also done in around a couple of hours or so.
GitHub - jerieljan/mermaidjs-editor: A basic MermaidJS editor.
My primary motivation was originally to try out Claude Code, but it turns out that I needed a speedy, no-nonsense Mermaid editor anyway that I can easily export and screenshot for other uses.
It’s a basic Mermaid editor. Sure, there’s the official one and many others, but I just want it basic and quick, and a handful of features for my needs, like a good default font and background color swapping for themes.
Then it just kept on rolling and I thought I wanted this in Vercel and I wanted to see a project running in Vite and that’s how this project became the way it is.
I also had to deal with some hiccups, which I’ll explain further below.
Vibe coding is undeniably fun when you ask for something and it nails down what you wanted in one shot. There’s just something cool about running Vite and seeing it change live while Claude Code does its work for every step in the process, until you see the end result, working like magic.
These are NOT the exact prompts, and some had multiple prompts to get the desired effect, but these are quite close.
I’m also the kind of person who learns by example. Sure, it’s not learning per se when you’re just prompting and it spits out functioning code, but it definitely motivates me when I see something working immediately and I can inspect and learn from the LLM output. I get a better appreciation on how a Vite project is configured, how various components are built, and I ponder why the way it’s built is so much different to what I’m used to in other programming languages.
As such, I spent like a good hour working on the code with Claude Code, whether it’s minor, mundane additions to actually good features that I wanted from what I mostly one-shotted a few days ago, and then figured that I wanted it hosted in Vercel.
The git history so far.
I realized I actually built quite a bit of the system before the 14th, but really, a lot of it actually materialized during that session since it was just a bare editor and render view prior.
My biggest lesson in building this is that it further validated my expectations with AI for coding — it works if you get the features and context engineering correctly. Features that even an inexperienced developer couldn’t conjure on their own for an entire day can take just minutes if you knew what you wanted.
As other experienced developers and AI engineers have pointed out, this kind of LLM-driven development has its issues.
The magic has its price. Quite literally.
It costs money for every prompt. Keep requesting, and it compounds over and over. Since this is token-based, that means more complex requests and projects with large amounts of data (code, but also extends to things like documentation, examples, etc) would also end up costing you money.
And that’s also assuming you’d finish things in one-shot. I actually had to prompt multiple times for some of the more complex issues I encountered and every failed attempt costs money with no progress.