Editor de diagramas de arquitectura

Hay 20 iconos genéricos integrados, como servidor, base de datos, usuario y nube. Los logotipos de marca no se incluyen porque tienen condiciones de uso. En su lugar, puedes importar tu propia imagen PNG / JPEG / GIF / WebP / SVG (hasta 512 KB) para cada nodo. Las imágenes se procesan solo en tu navegador y nunca se envían.

Pulsa «Conectar» y haz clic en el nodo de origen y luego en el de destino. También puedes seleccionar un nodo y hacer Mayús+clic en otro. Las líneas se conectan solas usando solo ángulos rectos y rodean otros nodos y nombres de grupo. En el panel «Elemento seleccionado» de abajo puedes fijar los lados por los que sale y entra una línea (arriba / derecha / abajo / izquierda) cuando quieras decidir tú la ruta.

Sí. Se mueven juntos los nodos cuyo centro está dentro del marco y los demás grupos que caben por completo en él. Arrastra el cuadrado azul de la esquina inferior derecha para cambiar el tamaño. También puedes anidar grupos, por ejemplo un marco de Workers dentro de uno de Cloudflare.

Tus cambios se guardan automáticamente en el almacenamiento local de este navegador (no se envía nada a un servidor). Si borras la caché se pierden, así que usa «Guardar como JSON» para los diagramas importantes. Se exporta a PNG, SVG y JSON. Mermaid no puede expresar la posición libre ni los iconos, por eso no se ofrece; para Mermaid usa el Constructor de diagramas de infraestructura.

Reúne todo el servicio (usuarios, edge, servidores, bases de datos, servicios externos) en una sola imagen y expórtala como SVG para pegarla en un README o wiki.

Diferencia con colores dónde se ejecuta cada cosa mediante marcos de grupo y añade etiquetas como /api o HTTPS a las líneas para obtener un diagrama listo para un artículo o unas diapositivas.

Esboza la visión general colocando nodos y trazando líneas, como en una pizarra. Guarda como JSON para compartirlo con tu equipo.

Convierte un sistema que mezcla front ends, API, bases de datos y servicios externos en algo que también puedan seguir quienes no son ingenieros.

Los iconos integrados son dibujos de línea genéricos. Si usas un logotipo, sigue las directrices de marca de su titular e importa la imagen tú mismo. Cada imagen puede pesar hasta 512 KB.

Los cambios permanecen solo en el almacenamiento local de este navegador. No se conservan al borrar la caché ni en otro dispositivo, así que guarda como JSON.

Las líneas rodean otros nodos y nombres de grupo, pero pueden solaparse con otras líneas. Si los nodos están muy juntos, una línea puede dar un rodeo largo o volver a la ruta simple si no logra pasar. Si no va por donde quieres, fija los lados de inicio y fin o desactiva «Rodear otros nodos con las líneas».