Saltar al contenido
Viz de Arq

Constructor de Diagramas de Infraestructura

Cree diagramas de arquitectura de sistemas y redes con una GUI. Genere código Mermaid e imágenes al instante.

Guía: Cómo usar y características

  • Haga clic en "Agregar nodo" para crear elementos y establecer sus etiquetas y formas (Rectángulo, Redondo, Cilindro, etc.).
  • Use "Agregar conexión" para definir relaciones entre elementos seleccionando los nodos origen/destino en los menús desplegables.
  • Cambie el flujo del diagrama (de arriba a abajo, de izquierda a derecha, etc.) en la sección "Dirección del diseño".
  • Descargue el diagrama generado como imagen PNG usando el botón "Descargar PNG".
  • Copie la sintaxis Mermaid al portapapeles con "Copiar Mermaid" para usarla en README o herramientas de documentación.

Ejemplos: Ejemplos

Arquitectura Web de 3 Niveles

Entrada

Nodos: Internet, Balanceador de carga, Servidor de aplicaciones, BD
Conexiones: Internet -> LB -> App -> BD

Salida

graph TB
    n1["Internet"]
    n2(["Load Balancer"])
    n3["App Server"]
    n4[("Database")]
    n1 --> n2
    n2 --> n3
    n3 --> n4

FAQ: Preguntas frecuentes

  • ¿Puedo guardar mi diagrama?

    Sí, puede descargarlo como imagen PNG. También puede copiar el código Mermaid para guardar su diseño y editarlo en el futuro.
  • ¿Puedo usar íconos específicos de la nube (AWS/Azure)?

    Actualmente solo se admiten formas genéricas. El soporte de íconos se está considerando para actualizaciones futuras.
  • ¿Puedo arrastrar y soltar nodos para cambiar posiciones?

    El diseño es gestionado automáticamente por el motor de Mermaid. El arrastre manual no está soportado; use la dirección de diseño para ajustar el flujo.

Casos de uso: Casos de uso comunes

  • Diagramas de arquitectura rápidos

    Visualice y comparta rápidamente la visión general de la arquitectura para proyectos de cualquier tamaño.

  • Ilustraciones de documentación

    Genere código de diagramas para READMEs de GitHub o wikis internas en minutos.

  • Lluvia de ideas de diseño de red

    Visualice dependencias entre subredes o gateways para alinear con su equipo.

Notas: Notas y limitaciones

  • Persistencia de datos

    El contenido se pierde al recargar la página. Copie y guarde el código Mermaid si necesita conservar sus cambios.

  • Restricciones de diseño

    Los elementos se organizan automáticamente. La colocación personalizada mediante arrastrar y soltar no está soportada.

  • Rendimiento del navegador

    Un número muy grande de nodos puede afectar el rendimiento de renderizado del navegador.

Nodos

Conexiones

graph TB Users["Users"] LB["Load Balancer"] App1["App Server 1"] App2["App Server 2"] DB[("Database")] Users --> LB LB --> App1 LB --> App2 App1 --> DB App2 --> DB

Constructor de diagramas de infraestructura

Permite crear diagramas de infraestructura y arquitectura para explicar servicios, redes, bases de datos y flujos entre componentes. Es útil para documentación técnica, revisiones de diseño y comunicación entre equipos.

Usos comunes

  • Documentar arquitectura: representa sistemas y dependencias principales.
  • Planificar cambios: visualiza componentes antes de una migración.
  • Compartir contexto: facilita discusiones entre backend, DevOps y producto.

Mantén los diagramas simples. Si hay demasiados componentes, divide la arquitectura en varias vistas.

Artículos para esta herramienta

Artículos recientes

Caso de uso
2026-08-07

Opciones de curl: qué hacen realmente -X, -H y -d

Referencia de las opciones de curl que aparecen en el trabajo diario con APIs: por qué -d ya implica POST, en qué se diferencia de --data-raw, la @ inicial que lee un archivo sin avisar, comillas simples frente a dobles, y por qué -k y -L merecen más cuidado del habitual.

Introducción
2026-08-06

Convertir entre JSON Schema y Zod: cómo se corresponden required y .optional()

Por dentro de un conversor bidireccional que transforma JSON Schema en un esquema de Zod y el código Zod de vuelta a JSON Schema. Incluye los valores por defecto invertidos entre required y .optional(), la tabla de correspondencia de restricciones y cómo se analiza Zod sin ejecutar código.

Caso de uso
2026-08-06

Orden de evaluación en SQL: por qué WHERE no ve el alias del SELECT

El orden en que escribe las cláusulas de SQL no es el orden en que se ejecutan. Referencia del orden lógico (FROM → WHERE → GROUP BY → HAVING → SELECT → ORDER BY → LIMIT), por qué fallan los alias en WHERE, cuándo usar WHERE y cuándo HAVING, ONLY_FULL_GROUP_BY y la trampa de LEFT JOIN con WHERE.

Caso de uso
2026-08-06

Formato unified diff: cómo leer las cabeceras @@ de git diff

Cómo leer el formato unified diff que genera git: qué significan los cuatro números de @@ -12,7 +12,9 @@, por qué un cambio de un solo carácter aparece como línea completa reemplazada, las trampas de los espacios y los finales de línea, \ No newline at end of file, los diffs combinados @@@ en los merges y la detección de renombrados.

Caso de uso
2026-08-06

Conversión UTC⇄JST: tabla del desfase de 9 horas y errores de zona horaria

Convierta entre UTC y la hora de Japón (JST) con una tabla de referencia, y vea por qué la diferencia con España cambia entre 7 y 8 horas según el horario de verano. Incluye el significado de Z y +09:00 en ISO 8601, cuándo JavaScript desplaza las fechas, el comportamiento de MySQL/PostgreSQL y por qué el cron de GitHub Actions siempre corre en UTC.

Caso de uso
2026-08-04

Referencia de CREATE TABLE: tipos y restricciones en MySQL, PostgreSQL y SQLite

Referencia de CREATE TABLE (DDL) con tablas comparativas entre bases de datos: tipos de datos, autoincremento (AUTO_INCREMENT / IDENTITY / rowid), comportamiento de ON DELETE en claves foráneas y la restricción CHECK que MySQL ignora en silencio.

Anuncio

Anuncio