Mermaid Lens
A zoomable and exportable Mermaid diagram viewer for VSCode
Created Apr 21, 2025 - Last updated: Apr 21, 2025
That is my second published VSCode extension, it is Mermaid Lens, a VSCode extension that supports zooming and exporting Mermaid diagrams.
(The first one is Runbook.md)
I often use Cursor to write documents and get AI to generate class diagrams, which saves me a lot of time and effort. But VSCode’s built-in Mermaid viewer doesn’t support zooming, which makes it hard to read, so I decided to create this tool. Once it’s done, I export the diagrams and share them with colleagues.
Since the features are simple, I originally hoped to let AI handle more of the development work in a way of vibe coding. But unexpectedly, the whole process wasn’t as smooth as I anticipated.
The project boilerplate was generated quickly, and the Theme Engine that AI wrote for me saved a lot of time digging through documentation. However, the build script often had issues—like incorrect directory settings or redundant steps.
When it came to implementing zoom and auto refresh functionality, things got trickier. Describing those rules in writing wasn’t easy. If the feature descriptions weren’t clear, the AI didn’t understand them—sometimes even breaking other features out of the blue.
Rather than waste time going back and forth in communication, I just took over and wrote the code myself. But the generated code by AI is full of dirty hacks, so I had to clean up technical debt while coding…
Software architecture still needs proper planning in the AI age.
Moreover, after finishing a feature, I asked the AI to work on something else, and it silently rewrote the style of the previous code—but did it incorrectly. I accidentally committed it without noticing. I can imagine this kind of disaster will become a common issue in software development.
Conclusion
The prototyping phase was fast, but things slowed down once the technical debt piled up.