022
Mermaid Visualizer
A self-hosted Mermaid diagram tool with a live split pane, starter templates, and saved diagrams.
This reading didn't load. The transcript is below.
Read the transcript
I kept reaching for the Mermaid Live Editor and running into its edges. Mermaid is a text syntax: you write plain code and it turns into flowcharts, sequence diagrams, entity relationship diagrams. The official editor works. It just never felt like mine.
I built one for AC Creations, my studio label. Write syntax on the left, watch the diagram render live on the right. Starter templates, several export formats, saved diagrams. Fully self-hosted, fully under my control.
I vibe-coded it with AI in January twenty twenty-six, using React and Express. It is live now. If you diagram with text, take a look.
Narrated in my own cloned voice, generated with ElevenLabs v4.
Mermaid is a text syntax for diagrams. You write plain code and it renders as a flowchart, a sequence diagram, or an entity relationship diagram. No drag-and-drop, no canvas. Just syntax.
The standard Mermaid Live Editor works, but it shows its edges fast when you want templates and a place to keep your work. I wanted an everyday tool I actually trusted: polished, self-hosted, fast, and fully under my control.
So I built the Mermaid Visualizer. It has a split pane: write your syntax on the left, watch the diagram appear on the right in real time. Starter templates help you skip the blank-page problem. Several export formats are available when you need the diagram somewhere else. Saved diagrams keep your work where you left it.
I built it for AC Creations, my studio label, and vibe-coded it with AI in January 2026. The stack is React, TypeScript, Express, Tailwind, and Drizzle.
It is live now.
The making
- React
- TypeScript
- Express
- Tailwind CSS
- Drizzle ORM