2026.03
Cómo desarrollé MermaidBin
Un post corto sobre por qué hice MermaidBin, mi frustración con mermaid.live y cómo terminé construyéndolo con vibe coding, Supabase y Cloudflare.
Hice MermaidBin en una tarde con Codex, más desde la frustración que me produce mermaid.live que desde una gran tesis de producto.
Uso Mermaid con bastante frecuencia, pero cada vez que volvía a mermaid.live sentía más o menos lo mismo: funciona, sí, pero la experiencia nunca me terminó de gustar. La UI se siente tosca, compartir no siempre es cómodo y en general no me daban ganas de quedarme ahí más tiempo del necesario.
Así que hice lo que uno hace cuando algo le molesta lo suficiente: abrir el editor y construir otra versión.
Y sí, fue bastante vibe coding.
No en el sentido de tirar prompts sin pensar, sino en ese flujo donde tienes una idea clara del resultado y vas resolviendo el resto iterando rápido, ajustando UI sobre la marcha y dejando que la herramienta te ayude a mover piezas sin perder criterio.
La base técnica quedó montada sobre:
- Next.js
- TypeScript
- Mermaid
- Monaco Editor
- Supabase
- Cloudflare
Supabase lo usé para autenticación y persistencia. Quería que el proyecto no se quedara solo en “pega aquí un bloque de Mermaid y mira un preview”, sino que tuviera algo más útil:
- guardar diagramas,
- volver a abrirlos,
- compartirlos por link,
- y tener una pequeña galería para explorarlos después.
También terminé agregando cosas que para mí hacen bastante diferencia:
- preview en tiempo real,
- editor con Monaco,
- soporte de tema light/dark,
- links compartibles,
- diagramas públicos o listados.
No quería sobrepensarlo demasiado. La meta no era diseñar “el editor definitivo de Mermaid”, sino construir una versión que yo mismo prefiriera usar. Eso ayudó a mantener el proyecto pequeño y moverme rápido.
Creo que ahí estuvo lo valioso del proyecto: no salió de una idea abstracta, sino de una molestia concreta. Y muchas veces esos proyectos son los más agradecidos de construir, porque la barra para saber si vas bien es bastante simple:
¿yo usaría esto en vez de la alternativa que me frustró?
En este caso, la respuesta fue sí.
Puedes probarlo aquí: MermaidBin.