Saltar al contenido
DevToolKits.app
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.

Cambia rápidamente entre las utilidades más usadas sin salir de DevToolKits.

Artículos
1
Índice de artículos
IA y LLM
2
Generador de reglas para IA Contador de tokens LLM
Desarrollo y DevOps
8
Visualizador GitHub Actions Formateador SQL Constructor SQL Visual SQL → Diagrama ER Convertidor Curl Calculadora Chmod Editor y Parser de Cron Constructor de Diagramas de Infraestructura
Datos y Esquemas
6
Formateador JSON JSON → TypeScript JSON → Zod JSON → OpenAPI Conversor JSON ⇔ YAML Convertidor CSV ⇔ JSON
Seguridad y Criptografía
5
Base64 / 58 / 32 Herramienta JWT Generador Hash y HMAC Generador JWKS Generador UUID
Ayudas de Texto y Código
4
Generador Tablas Markdown Utilidades de Texto Probador de Regex Visor de Diferencias
URL, QR y Red
5
Codificar / Decodificar URL Calculadora IP / CIDR Parámetros URL → JSON Generador QR Lector QR
Diseño y UI
2
Utilidades de Color Generador de Favicon
Fecha y Hora
3
Conversor de Zona Horaria Unidades de Tiempo Conversor Timestamp UNIX