Editor visual de diagramas de arquitectura animados integrado en VS Code.
Los archivos .flow-diagram.json se abren directamente con el editor Flow Diagram en lugar de mostrarse como texto JSON.
Novedades de UI
Menú de engranaje con acceso a:
Tema del lienzo
Idioma de interfaz (Auto por sistema, Español, English)
Guardar, Abrir y Exportar
Controles de animación global
Terminología de conectores unificada (conector en lugar de flecha)
Herramientas de formas con nombres estandarizados (Box, Database, Diamond, Circle, Hexagon, Text)
Orden personalizado de formas (subir/bajar) con persistencia local
Cómo usar
Crear un nuevo diagrama
Paleta de comandos (Ctrl+Shift+P) → Flow Diagram: Nuevo diagrama
Clic derecho en el Explorador → Flow Diagram: Nuevo diagrama
Esto crea un archivo .flow-diagram.json vacío y lo abre en el editor.
Abrir un diagrama existente
Simplemente haz doble clic en cualquier archivo .flow-diagram.json en el Explorador — se abre con Flow Diagram automáticamente
O usa Flow Diagram: Abrir diagrama desde la paleta de comandos
Guardar
Ctrl+S dentro del editor guarda directamente al archivo .flow-diagram.json
El botón 💾 Guardar en el menú de engranaje también funciona
Exportar
El botón ⬇ Exportar (menú de engranaje) genera GIF/PNG/JPG/SVG y guarda el archivo en la misma carpeta que el .flow-diagram.json
SVG es ideal para presentaciones (PowerPoint, Google Slides, Keynote) porque es vectorial y escalable sin perder calidad
Idioma de interfaz
La opción por defecto es Auto (sistema)
Flow Diagram detecta el idioma del sistema (Español/English) y adapta la UI
Puedes forzar idioma manualmente desde el menú de engranaje
La preferencia queda guardada localmente para próximas sesiones
Zoom y navegación
Rueda del mouse → zoom in/out centrado en el cursor
