Generador de diagramas de arquitectura
Dibuja el diseño del sistema como texto. Agrupa servicios en capas con subgráficos Mermaid — clientes, APIs, almacenes de datos, colas — y renderiza un diagrama de arquitectura limpio para tu documento de diseño. Nada deja tu navegador.
One step per line. Indent two spaces to branch beneath the line above.
Diseño de sistema que vive en el repositorio
Los diagramas de arquitectura se desvían en el momento en que se convierten en un archivo binario en una herramienta de diseño. Escribirlos como Mermaid los mantiene junto al código: agrupa cada capa en un subgráfico, usa cilindros para almacenes de datos y hexágonos para buses, y el diagrama se actualiza con una edición de una línea durante la revisión.
También es el artefacto correcto para una RFC o documento de incorporación — los revisores ven los componentes y el flujo de datos sin abrir una aplicación separada.
De un flujo de trabajo a su diagrama
Si estás documentando una automatización — digamos una canalización n8n o Zapier que mueve datos entre servicios — un diagrama de arquitectura hace que las partes móviles sean legibles. Dibuja el disparador, los servicios que toca y dónde aterrizan los datos, luego mantén el código en tu documentación para que evolucione con el flujo.
Preguntas frecuentes
¿Cómo hago un diagrama de arquitectura de software a partir de texto?
Usa un diagrama de flujo Mermaid, agrupa servicios relacionados con "subgraph Tier … end", y conéctalos con flechas. Usa cilindros "[(DB)]" para almacenes de datos. Se renderiza en vivo y exporta a SVG o PNG.
¿Cómo agrupo servicios en capas?
Envuelve nodos en "subgraph Name … end". Cada subgráfico se convierte en una caja etiquetada, que es la forma más clara de mostrar una división de presentación/aplicación/datos o un conjunto de microservicios.
¿Puedo mostrar enlaces asincronos o en cola?
Sí — usa un enlace punteado con etiqueta, como "A -. async .-> B", para distinguir eventos y colas de llamadas sincrónicas.
¿Mi diagrama de arquitectura es privado?
Sí. Se renderiza completamente en tu navegador, por lo que los nombres de servicio internos y la topología nunca dejan tu dispositivo.
¿Qué formas debo usar para bases de datos y colas?
Usa "[(name)]" para un cilindro de base de datos, "[[name]]" para una cola/subrutina, y "{{name}}" para un hexágono como un bus de eventos. La hoja de trucos los lista.