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

Articulos recientes

Introducción
2026-08-03

Cómo generar sentencias CREATE TABLE desde un diseño visual | Generador de DDL

Un vistazo al interior del Generador de DDL, que convierte un diseño visual de tablas en sentencias CREATE TABLE y un diagrama ER. Incluye las reglas de conversión de tipos para MySQL/PostgreSQL/SQLite y el algoritmo de inferencia de columnas desde JSON.

Caso de uso
2026-07-21

Patrones de diseño de needs en GitHub Actions: acelere la CI y evite los antipatrones

Referencia de patrones para las dependencias entre jobs (needs) en GitHub Actions. Cubre la ramificación en diamante, la cancelación con concurrency, el equilibrio de fail-fast, las trampas de matrix con needs y los workflows reutilizables, con ejemplos YAML listos para copiar.

Caso de uso
2026-07-21

Referencia de sintaxis de diagramas ER en Mermaid: símbolos de relación y ejemplos reales

Referencia completa de la sintaxis erDiagram de Mermaid: chuleta de cardinalidad (pata de gallo), relaciones uno a muchos frente a muchos a muchos, atributos con PK/FK y un ejemplo completo de comercio electrónico.

Introducción
2026-07-21

Cómo construir consultas SELECT y JOIN visualmente con un SQL Builder

Ensamble cláusulas SELECT, WHERE y JOIN en su navegador con un constructor visual de SQL. Cómo funciona el entrecomillado automático de valores, tabla de uso de JOIN y cómo unir varias tablas.

Caso de uso
2026-07-21

Referencia completa de JOIN en SQL: diferencias entre INNER, LEFT, RIGHT y FULL

Referencia de los tipos de JOIN en SQL (INNER/LEFT/RIGHT/FULL/CROSS/SELF) con una chuleta y ejemplos de conteo de filas. Explica por qué los JOIN uno a muchos duplican filas, la trampa de NULL entre WHERE y ON, y cómo escribir JOINs con varias tablas.

Introducción
2026-07-16

Case Converter ― convierta a 9 estilos de nomenclatura a la vez: camelCase, snake_case, kebab-case

Cómo convertir identificadores y nombres de variables a 9 estilos de nomenclatura simultáneamente: camelCase, PascalCase, snake_case, CONSTANT_CASE, kebab-case y más. Cubre el manejo de mayúsculas consecutivas (HTTPServer), dígitos y conversión de listas completas.

Anuncio

Anuncio