Skip to main content

React Flow Docs

Esta seccion incorpora React Flow dentro del portal para construir diagramas interactivos y navegables usando React.

Objetivo​

  • Habilitar diagramas interactivos dentro de Docusaurus.
  • Permitir una base reutilizable para flujos de arquitectura, integraciones y gobierno tecnico.
  • Dejar un componente listo para extender con nodos custom, edges custom y carga de datos dinamica.

Implementacion realizada​

Integracion aplicada

La integracion se realizo con el paquete moderno @xyflow/react, que es la libreria oficial actual de React Flow.

  • Se instalo la dependencia @xyflow/react.
  • Se agregaron estilos globales de React Flow en el proyecto.
  • Se creo un componente reusable en src/components/reactflow/.
  • Se genero esta pagina documental para mostrar un ejemplo funcional dentro del portal.

Ejemplo interactivo​

Cargando diagrama interactivo...

Como extenderlo​

Casos de uso recomendados​

  • Diagramas de arquitectura de referencia
  • Flujos de autenticacion y autorizacion
  • Mapeo de microservicios y dependencias
  • Diagramas de integracion entre plataformas
  • Visualizacion de pipelines y dominios de datos

Siguientes mejoras posibles​

  1. Cargar nodos y edges desde JSON o Markdown frontmatter.
  2. Agregar nodos custom con iconografia corporativa.
  3. Mostrar panel lateral con metadata al seleccionar un nodo.
  4. Persistir layouts por dominio o proyecto.
  5. Exportar diagramas como imagen o SVG.

Estructura tecnica​

src/
├── components/
│   └── reactflow/
│       └── AlpuraArchitectureFlow.jsx
└── css/
    └── reactflow.css

Nota de compatibilidad​

El componente esta encapsulado con BrowserOnly para evitar problemas de renderizado durante el build estatico de Docusaurus.