Algunos diagramas se escriben más rápido de lo que se dibujan. Este creador de diagramas de texto, gratuito, usa el motor abierto Mermaid para convertir unas líneas de texto plano en un diagrama pulido, directamente en tu navegador. Escribe flowchart TD y conecta cajas con flechas para un diagrama de flujo; cambia a un diagrama de secuencia para mapear mensajes entre sistemas, a un diagrama de Gantt para planificar un proyecto, o a diagramas de clases y ER para software y bases de datos.
Elige un ejemplo, edita el texto y la imagen se actualiza al pulsar «Dibujar diagrama». Descarga el resultado como SVG nítido para documentos y wikis, o como PNG para presentaciones y chats. Sin cuenta, sin marcas de agua y sin que tu texto salga de tu dispositivo.
Cómo crear un diagrama desde texto
- Empieza desde un ejemplo. Los cinco ejemplos incluidos son diagramas completos y funcionales. Carga uno y cambia las palabras: es la forma más rápida de aprender la sintaxis.
- Edita de línea en línea. Cada línea es una caja, una flecha o una tarea. Pulsa «Dibujar diagrama» tras cada cambio mientras aprendes; el mensaje de error indica la línea que falló.
- Descarga y comparte. El SVG se mantiene nítido a cualquier tamaño y es ideal para documentación. El PNG es mejor para presentaciones, redes sociales y donde no se acepte SVG.
Los cinco tipos de diagrama, en palabras sencillas
Diagrama de flujo: pasos y decisiones — procesos, guías de solución de problemas, flujos de incorporación. Las cajas son pasos, los rombos son preguntas y las flechas muestran el orden. Diagrama de secuencia: quién dice qué a quién, en orden temporal — perfecto para llamadas a API, inicios de sesión y pagos. Diagrama de Gantt: un plan de proyecto sobre un calendario — tareas, duraciones, hitos y dependencias. Diagrama de clases: el plano del software orientado a objetos — clases, sus campos y cómo heredan. Diagrama ER: las tablas de una base de datos y las relaciones entre ellas, el mapa con el que empieza todo proyecto de backend.
Tu primer diagrama de flujo
Tres ideas cubren la mayoría de los diagramas de flujo. Una caja es A[Texto], un rombo de decisión es B{¿Pregunta?} y una flecha es –>, con etiqueta opcional: B –>|Sí| C. El TD tras la palabra flowchart significa disposición de arriba abajo; prueba LR para izquierda a derecha cuando el diagrama vaya en una diapositiva ancha. Mantén las etiquetas cortas — de dos a cinco palabras — y deja el detalle para el texto que rodea al diagrama. Si Mermaid avisa de un error de análisis, casi siempre es un corchete sin cerrar o un carácter especial, como un paréntesis, dentro de una etiqueta; pon comillas en las etiquetas con puntuación.
¿Texto o arrastrar y soltar?
Escribir gana cuando el diagrama vive en documentación, wikis o código: el texto se puede versionar, comparar y regenerar, y cambiar una etiqueta nunca implica redibujar cajas. Arrastrar gana en bocetos libres de pizarra. Si prefieres el ratón, prueba nuestro Generador de Diagramas de Flujo; si tus diagramas viven en documentos y archivos README, el enfoque de texto de esta página te resultará más rápido en diez minutos.
Más tipos de diagrama que puedes escribir
La misma idea de línea a línea cubre otras formas, y el creador las reconoce automáticamente desde la primera línea. Empieza con pie para un gráfico de sectores con etiquetas y números sencillos. Empieza con userJourney para mapear cómo se siente un cliente durante un registro o una compra, paso a paso y con puntuación. Un stateDiagram-v2 describe cualquier cosa con estados y transiciones: un pedido que pasa a pendiente, pagado, enviado y entregado. Un mindmap hace crecer un árbol de temas desde líneas con sangría, la forma más rápida de convertir notas de reunión en un esquema visual. Y gitGraph dibuja diagramas de ramas de Git para tutoriales y planes de lanzamiento. Cada tipo tiene una tarea; elegir el adecuado es la mitad del trabajo de diagramar.
Privado y gratuito
El motor Mermaid funciona por completo en tu navegador. El texto de tu diagrama nunca se sube, se guarda ni se rastrea, y esta página no hace público nada tuyo. Las descargas también se generan en tu dispositivo.
Herramientas relacionadas
Text to Diagram Maker — English version · Generador de Diagramas de Flujo Online · Embellecedor de Capturas de Pantalla.
Inserta esta herramienta en tu web — gratis
Copia el código de abajo para añadir esta herramienta funcional a tu propia página. Solo pedimos que mantengas el pequeño enlace de crédito que la acompaña.