Escribe flechas como User -> API -> Database y obtén un diagrama de arquitectura o de flujo ya ordenado. Pliega grupos en una caja para ver el conjunto y numera los pasos para un flujo detallado.
100%
Escribe a la izquierda una línea como User -> App -> Database, o haz doble clic aquí para añadir una caja.
Arrastra las cajas para moverlas. Doble clic para renombrar una caja o añadir una. Arrastra el punto de una caja para conectarla. Ctrl+Z deshace.
No se sube nada: el diagrama vive en tu navegador y en los enlaces que decidas compartir.
Acerca de Creador de diagramas de sistemas
En una pizarra digital dibujas cada caja y cada flecha y las alineas a mano. Aquí escribes qué habla con qué, una línea por flecha, y el diseño se hace solo. Agrupa servicios relacionados y pliega el grupo en una caja cuando necesites ver el conjunto; ábrelo de nuevo para el detalle.
Qué hace
Diseño automático, de izquierda a derecha o de arriba abajo, que se actualiza mientras escribes.
Formas elegidas según el nombre: DB es una base de datos, Kafka una cola, User una persona y un nombre con ? al final una decisión.
Grupos que se pliegan en una caja, para que un mismo diagrama sirva de vista general y de detalle.
También puedes arrastrar, conectar, renombrar y añadir cajas en el lienzo; cada cambio se escribe en el texto.
Pasos numerados, estilo dibujado a mano, exportación PNG y SVG y enlaces para compartir. No se sube nada.
Cómo funciona
1Escribe líneas como User -> Web App -> Orders DB o empieza con una plantilla.
2Añade grupos con Nombre { ... }, etiquetas tras dos puntos y --> para llamadas asíncronas.
3Alterna entre Vista general y Detalles, recoloca cajas arrastrando y exporta o copia un enlace.
Preguntas
¿En qué se diferencia de Excalidraw?
Excalidraw es una pizarra libre: colocas tú cada forma y cada flecha. Aquí el texto es el diagrama y el diseño es automático, así que añadir un servicio es una línea, no dibujar y realinear cajas. Para un boceto suelto, Excalidraw sigue siendo mejor.
¿Cómo muestro una vista general y una detallada?
Pon las cajas relacionadas en un grupo con Nombre { ... }. Vista general pliega cada grupo en una sola caja y une sus flechas; Detalles los vuelve a abrir. También puedes plegar un grupo cada vez desde su cabecera.
¿Se guarda mi diagrama en algún sitio?
No. Se dibuja en tu navegador y se guarda en su almacenamiento local. Un enlace compartido lleva el diagrama dentro del propio enlace, después del signo #, que los navegadores nunca envían al servidor.
¿Puedo pegar un diagrama de flujo de Mermaid?
No directamente; no hay importación de Mermaid. Las líneas simples como A -> B funcionan, pero hay tres diferencias. Borra la cabecera graph TD, o se convertirá en una caja, y escribe direction: down en su lugar. Quita las etiquetas de Mermaid entre corchetes, porque aquí el texto entre [ ] se lee como etiquetas de forma y color. Y --> dibuja aquí una flecha discontinua para una llamada asíncrona, mientras que en Mermaid es una flecha normal; usa -> para una continua.
¿Qué más puedo escribir además de A -> B?
A -> B: texto pone una etiqueta en la flecha, A --> B dibuja una flecha discontinua, A <-> B una de doble sentido y A <- B apunta hacia atrás. Nombre [db, blue] fija una forma y un color; las formas son service, db, cache, queue, actor, client, storage, external, decision, terminal y note. title: da nombre al diagrama, direction: down lo dispone de arriba abajo y una línea que empieza por # o // es un comentario. Un diagrama admite hasta 300 cajas, 600 flechas y 20.000 caracteres de texto.