diagrams with ReactFlow

published: 12/8/2025

written by: Stefan Johansson

2 min read

ReactFlow 🔗 is a powerful open-source library 🔗 for building interactive diagrams and flowcharts in React (or Svelte 🔗) applications.

This post demonstrates ReactFlow diagramming in Astro. These diagrams are fully client-side rendered, making them perfect for a static site hosted on Azure Static Web Apps.

While ReactFlow supports extensive interactivity and diagram creation, including node and edge creation, dragging, zooming, and panning, this post focuses on static diagrams with optional interactivity. This allows a site to publish pre-defined diagrams that can be nicely rendered and explored, without the diagram creation features being front and center.

The component exposes the diagram as an Astro React island, allowing easy integration into Astro pages and posts. A trivial diagram definition is passed as a prop to the component, which then renders the diagram accordingly.

Simple Flow Diagram

Here’s a basic flow diagram showing a simple process:

Architecture Diagram

More complex diagrams can show system architectures with multiple branches:

Different Background Styles

The diagram component should support different background patterns:

Cross Pattern

Configuration Options

The Diagram component accepts several configuration options:

• definition - The diagram definition (nodes and edges)
• title - Optional title displayed above the diagram
• height - Height of the diagram container (default: 400px)
• showMiniMap - Whether to show the mini map (default: false)
• showControls - Whether to show zoom/pan controls (default: true)
• backgroundVariant - ‘dots’, ‘lines’, or ‘cross’ (default: ‘dots’)
• allowFocusMode - Enable fullscreen focus mode (default: true)
• interactive - Allow node dragging (default: false)
• fitView - Auto-fit diagram to view (default: true)

Theme Support

The diagrams automatically adapt to the site’s theme. Try switching between light and dark mode using the theme toggle in the footer to see the diagrams adjust their colors accordingly!