Editor de diagramas técnicos

Crea un flujo o una arquitectura con bloques nombrados y conexiones dirigidas.

Carga el ejemplo o añade bloques con nombres claros. En diagramas grandes, busca un nombre o un ID estable.

Funciona en tu navegador. No se sube ningún diagrama. No requiere cuenta, Python ni GPU.

Al generar, el módulo de distribución se descarga desde este sitio. Tu diagrama permanece en este dispositivo.

1. Describe tu diagrama

Cambia el nombre de los bloques, elige sus conexiones y genera el diagrama. Los textos y el título admiten hasta 200 unidades UTF-16.

Ir a la vista previa

Título del diagramaTipo de diagramaDirección de la distribución

Bloques

Buscar un bloque (nombre o ID)

Conexiones

Buscar una conexión (texto, nombre de bloque o ID)

Editar conexiones

Volver a los bloques

Usar JSON de un asistente de IA

Pega un diagrama con la versión 1 del esquema. Si el JSON no es válido, el formulario queda intacto. Esta acción no llama a ningún modelo de IA.

JSON del diagrama

Al eliminar un bloque, se conservan sus conexiones para corregirlas. Los cambios invalidan las exportaciones hasta que generes de nuevo. Los datos permanecen en memoria y desaparecen al salir o recargar la página.

2. Revisa y exporta

Escala de la vista previaSVG · texto editable

Comprobar los textos y las conexiones originales

El JSON conserva los ID originales, los textos exactos y el sentido de las conexiones. Revísalos antes de compartir.

JSON exportado actual

Volver a editar

Comprueba el significado antes de compartir. Las fuentes pueden variar en otros visores SVG y las flechas muy juntas pueden solaparse. Esta herramienta distribuye grafos; no simula diagramas de secuencia ni circuitos.

Se necesita un navegador moderno compatible con Canvas, Web Workers e Intl.Segmenter.

Licencias del motor de distribución y de su código fuente

Cómo utilizar

¿Qué es un editor de diagramas técnicos?

Crea un flujo o una arquitectura con bloques nombrados y conexiones dirigidas. Edita la estructura, revisa la disposición y guarda SVG y JSON con versión. Organiza el dibujo; no deduce pasos ausentes ni certifica un diseño técnico.

Paso a paso

Carga el ejemplo o añade bloques con nombres claros. En diagramas grandes, busca un nombre o un ID estable.
Añade conexiones y elige origen y destino, además de disposición vertical u horizontal. Eliminar un bloque conserva sus conexiones para corregirlas o restaurar el bloque.
Genera y comprueba nombres y direcciones de las flechas. Ajustar a la vista muestra el conjunto; el tamaño real permite desplazarse. Una estructura válida no garantiza que las flechas agrupadas sean legibles.
Descarga SVG y JSON. Volver a aplicar el JSON recupera la estructura editable. Cambiar el SVG en otro editor no actualiza el JSON. Guarda las copias antes de salir.

Cómo elegir los ajustes

Opción	Qué cambia
Flujo / arquitectura	Ambos usan bloques nombrados y conexiones dirigidas. Elegir el tipo no añade reglas de secuencias, circuitos u otros ámbitos.
TB / LR	De arriba abajo / de izquierda a derecha. El idioma de la interfaz no invierte el diagrama.
Búsqueda y páginas	10 elementos editables por página. Filtrar cambia los controles visibles, no el diagrama completo generado o exportado.
SVG / JSON	SVG contiene formas vectoriales y texto. JSON conserva los ID, etiquetas y extremos de la versión 1, sin las coordenadas generadas.

Ejemplo y resultado esperado

Un flujo de revisión con 3 bloques y 2 conexiones exporta los 3 bloques y ambas conexiones. Busca y renombra un bloque, vuelve a generar y comprueba en JSON la nueva etiqueta y los extremos sin cambios. Los números ilustran el proceso; no predicen dimensiones ni tiempo de ejecución.

Si no funciona

Aplica o descarta los cambios JSON pendientes antes de generar. Corrige la ruta indicada en el error y vuelve a intentarlo.
Si falta un extremo, restaura el bloque eliminado o elige uno existente. Las conexiones no se borran silenciosamente.
Si se supera el tiempo o un límite de salida, cancela y simplifica una copia guardada antes de reintentar. Cambiar la entrada invalida el resultado anterior; solo el resultado actual correcto puede descargarse.
Limpiar ofrece una única restauración en la página. Salir o recargar libera la tarea; no hay guardado automático. Si el portapapeles no funciona, selecciona el JSON y usa el atajo de copia o descárgalo.
Guardar el JSON de entrada conserva un diagrama válido y editable sin coordenadas de distribución. Si el motor no carga, guárdalo antes de recargar la página y abre el archivo JSON. Aplica o descarta el borrador JSON pegado antes de guardar. La importación acepta JSON UTF-8 de hasta 1,000,000 bytes; los archivos no válidos no cambian el formulario. Puedes cancelar la lectura; una edición también invalida la lectura anterior. La entrada no se sube ni se guarda automáticamente.

Formatos y límites

Entrada mediante formulario o JSON del esquema versión 1, hasta 1,000,000 bytes UTF-8. Entre 1 y 100 bloques y entre 0 y 200 conexiones. Títulos y etiquetas: máximo 200 unidades UTF-16; título y nombres de bloques obligatorios, etiquetas de conexión opcionales. ID de 1–40 caracteres ASCII: letras, dígitos, _ o -, comenzando por letra.

La disposición se detiene tras 15 segundos. Salida limitada a 16,384 píxeles por lado, 64,000,000 píxeles totales y 5,000,000 bytes SVG. Se rechazan campos o versiones desconocidos, ID duplicados y extremos inexistentes. No importa Mermaid, CAD ni archivos de circuitos.

No requiere GPU ni Python. Un Worker del navegador usa recursos fijos del mismo origen. El texto SVG no se convierte en trazados; las fuentes de otro visor pueden cambiar su aspecto. Comprueba el SVG en la aplicación de destino.

Preguntas frecuentes

¿Crea un diseño técnico por mí?

No. Tú aportas bloques, etiquetas y conexiones. Las comprobaciones cubren la estructura y límites de salida, no la corrección del diseño.

¿Qué dirección elijo?

TB para un flujo vertical y LR para una cadena horizontal de dependencias. Regenera y revisa cómo encaja en su destino.

¿Por qué un diagrama válido aún parece abarrotado?

Las conexiones completas pueden solaparse visualmente. Acorta etiquetas, simplifica una copia y revisa el tamaño real antes de compartir.

¿Por qué no puedo generar o se rechaza JSON?

Aplica o descarta el JSON pendiente. Revisa ruta, versión, límites, ID únicos y extremos existentes.

¿Se sube mi diagrama o se envía a IA?

No. Entrada y resultados permanecen en memoria de la página. Los recursos fijos vienen de este sitio; no se llama a ningún modelo. Un asistente puede preparar el mismo esquema, pero la página no se conecta a tu cuenta de IA.