Flow Diagram — Extensión VS Code

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:

Opción	Resolución	Uso recomendado
HD	1280 × 720	Diagramas simples, documentación
Full HD	1920 × 1080	Arquitecturas medianas
2K	2560 × 1440	Diagramas complejos con muchos nodos

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

Acción	Resultado
Rueda del mouse	Desplazar el canvas (pan vertical)
Rueda del mouse horizontal / Shift+Rueda	Desplazar el canvas (pan horizontal)
Ctrl + Rueda	Zoom in/out centrado en el cursor
Botón central + arrastrar	Pan libre
Ctrl+0	Restablecer zoom al 100%

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 }

Campo	Descripción
`id`	Entero único en la página (los conectores lo referencian)
`shape`	`rect` · `cylinder` · `diamond` · `circle` · `hex` · `text` · `icon`
`x`, `y`	Centro del nodo en píxeles
`label`	Texto (usar `\n` para saltos de línea)
`order`	Orden de aparición cuando `build: true`
`icon`	Solo con `shape: "icon"` — clave del icono (p. ej. `docker`, `postgresql`, `kafka`, `lambda`, `gke`, `aks`, `as400`, `corebank`)

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:

Fuente	Patrón de URL	Notas
Devicon	`https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/<nombre>/<nombre>-original.svg`	Logos de lenguajes y herramientas dev, a color. Variantes: `-original`, `-plain`, `-line`, `-wordmark`
Simple Icons	`https://cdn.simpleicons.org/<marca>` o `https://cdn.simpleicons.org/<marca>/<hex>`	Miles de logos de marcas, monocromos. Añade `/<hex>` (sin `#`) para elegir el color
Iconify	`https://api.iconify.design/<set>/<icono>.svg?color=%23<hex>`	Más de 200 000 iconos de todos los sets populares (`logos`, `lucide`, `tabler`, `mdi`, `simple-icons`…). El parámetro `color` es clave para iconos monocromos
Tabler Icons	`https://cdn.jsdelivr.net/npm/@tabler/icons@latest/icons/outline/<icono>.svg`	Iconos de UI genéricos (outline y filled)
Tu propio repo de GitHub	`https://raw.githubusercontent.com/<usuario>/<repo>/<rama>/<ruta>.svg`	GitHub raw envía CORS, así que puedes mantener los iconos de tu equipo en un repo propio

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

Flow Diagram

almakit