022
Mermaid Visualizer
A self-hosted Mermaid diagram tool with a live split pane, starter templates, and saved diagrams.
That's the whole thing.
The site's sound is off. The narration still plays.
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