Guía de vista previa Mermaid
Guía de vista previa Mermaid: guía práctica con demo copiable, checklist de revisión y notas de publicación para código Mermaid.
El problema real que resuelve
Guía de vista previa Mermaid sirve cuando el diagrama no es solo una imagen, sino una pieza mantenible de documentación. La fuente debe seguir siendo legible, la vista previa debe detectar errores y la exportación debe funcionar en README, wiki o blog.
Úsalo para flujos de checkout, onboarding, releases o incidentes. La idea es crear un ciclo corto de edición, previsualización y revisión antes de publicar.
Una demo pequeña para pegar primero
No empieces con todo el contenido de producción. Usa primero un fragmento pequeño para validar sintaxis, etiquetas y layout.
Cuando la primera vista funcione, añade nombres reales de servicios, campos, actores o dependencias.
flowchart LR
Draft[AI or human draft] --> Preview[Mermaid Preview]
Preview --> Check{Readable?}
Check -- no --> Edit[Fix labels and direction]
Edit --> Preview
Check -- yes --> Export[Export SVG / PNG]Cómo revisar la previsualización
Revisa como si fueras un compañero leyendo la página. ¿Responde una pregunta clara? ¿La fuente se podrá editar después?
Si viene de IA, revisa nombres, dirección, agrupación y relaciones faltantes.
Errores comunes
El error más común es intentar explicarlo todo en un solo diagrama. Separa flujo de petición, datos, infraestructura y salida de publicación.
Otro error es exportar solo una imagen. Guarda el texto fuente junto al SVG o PNG.
Checklist antes de publicar
Antes de publicar, verifica nitidez, etiquetas largas y que el artículo incluya una entrada reproducible.
La página funciona mejor cuando muestra entrada, previsualización y decisión tomada después de revisarla.