Flow Diagram

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.

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/draw.io 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
• draw.io genera un archivo .drawio editable en draw.io / diagrams.net con todas las páginas del documento; se conservan formas, colores, iconos, conectores y el flujo animado (se pierden el pulso y la animación de aparición, que draw.io no soporta)
• Las opciones de resolución muestran los píxeles reales según el tamaño de canvas activo (hasta 3× para exportaciones de alta definición)

Tamaño del canvas

El menú de engranaje incluye un selector Tamaño del canvas:

El tamaño se guarda en el archivo .flow-diagram.json y se restaura automáticamente al abrirlo.

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

Formato del archivo .flow-diagram.json

El archivo es JSON plano: cualquier script, pipeline o herramienta (incluida una IA) puede generarlo sin abrir el editor visual. La referencia completa está en el archivo FORMAT.md incluido con la extensión; este es el resumen esencial.

Estructura raíz

{
  "version": 3,
  "app": "flow-diagram",
  "doc": {
    "theme": "dark",
    "cur": 0,
    "pages": [ { "name": "Página 1", "nextId": 10, "nodes": [], "edges": [] } ]
  },
  "settings": { "speed": 0.5, "dots": 3, "build": false, "stagger": 0.45, "canvasSize": "hd" }
}

• theme: "dark" o "crema" · cur: índice de la página activa
• settings.canvasSize: "hd" (1280×720) · "fhd" (1920×1080) · "2k" (2560×1440)
• settings.build + stagger: animación de aparición de nodos en secuencia

Nodo

{ "id": 1, "shape": "rect", "x": 400, "y": 300, "w": 160, "h": 80,
  "label": "Mi Servicio", "color": "#6a9fb5", "pulse": false, "order": 0, "fs": 12 }

Categorías de iconos disponibles: General, DevIcons, GCP, AWS, Azure, Banca, BD y Mainframe — la lista completa de claves está en FORMAT.md.

Conector (edge)

{ "id": 1, "from": 1, "to": 2, "fromSide": null, "toSide": null,
  "route": "straight", "waypoints": [], "label": "HTTP/REST",
  "animated": true, "dashed": false, "startArrow": false, "endArrow": true,
  "flowDir": "normal" }

• from / to: IDs de los nodos origen y destino
• fromSide / toSide: "n" "e" "s" "w" o null (automático)
• route: "straight" o "ortho" (ángulos rectos, admite waypoints manuales)
• animated: puntos fluyendo sobre el conector

Tips rápidos

• nextId de cada página debe ser mayor que cualquier id usado en ella.
• Deja ~50 px de margen respecto al borde del canvas (área segura HD ≈ 1180×620).
• Paleta sugerida: #6a9fb5 · #d08b5b · #c9b458 · #7fa66b · #c16a6a · #326ce5 · #6d5a96.
• En FORMAT.md hay un ejemplo mínimo completo listo para copiar.

Iconos personalizados

Además de las categorías incluidas, puedes registrar tus propios iconos con la configuración flow-diagram.customIcons (Ajustes de VS Code → settings.json). Cada icono necesita una key única (la que usarás en el campo icon del nodo), un name visible y una url directa a un SVG o PNG; group es opcional (por defecto "Custom").

"flow-diagram.customIcons": [
  {
    "key": "rabbitmq",
    "name": "RabbitMQ",
    "group": "Mensajería",
    "url": "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/rabbitmq/rabbitmq-original.svg"
  },
  {
    "key": "github",
    "name": "GitHub",
    "url": "https://cdn.simpleicons.org/github/ffffff"
  },
  {
    "key": "cache",
    "name": "Caché",
    "url": "https://api.iconify.design/lucide/database-zap.svg?color=%23c9b458"
  }
]

Repositorios de iconos recomendados

Todos sirven las imágenes con cabeceras CORS, por lo que funcionan tanto en el editor como en los exports a GIF/PNG/JPG:

Consejo sobre el color: los sets monocromos (Simple Icons, Lucide, Tabler vía Iconify) se pintan en negro por defecto, lo que no se ve bien en el tema oscuro. Usa el color en la URL (/ffffff en Simple Icons, ?color=%23ffffff en Iconify) para adaptarlos al tema. Los sets a color (Devicon, el set logos de Iconify) no lo necesitan.

Historial de cambios

Consulta la pestaña Changelog de la extensión (o el archivo CHANGELOG.md) para el detalle de cada versión.

Licencia

MIT