[New Component] Diagram / Flow #49121

Summary

I would like to suggest a native Diagram / Flow component for the MUI ecosystem.

The goal would be to support node-based interfaces such as workflows, business processes, automation flows, decision trees, system diagrams and process visualization.

Today, applications using MUI usually need another library such as React Flow for this kind of interface, then manually adapt theme, controls, nodes, states and styling to match MUI.

Examples

Motivation

Node-based interfaces are common in modern applications, especially for:

Workflow builders
Automation editors
Approval flows
AI agent workflows
Process diagrams
Decision trees
System architecture
Data pipelines
Read-only process visualization

MUI already provides the surrounding UI components, but there is no native component for nodes and connections.

Suggested API

<Diagram
  nodes={nodes}
  edges={edges}
  onNodesChange={handleNodesChange}
  onEdgesChange={handleEdgesChange}
  onConnect={handleConnect}
  fitView
>
  <DiagramBackground />
  <DiagramControls />
  <DiagramMiniMap />
</Diagram>

Possible components:

Diagram
DiagramNode
DiagramEdge
DiagramHandle
DiagramControls
DiagramMiniMap
DiagramBackground

Core features

The initial version could support:

Node rendering
Custom nodes
Edges and arrows
Node dragging
Connections between nodes
Zoom and pan
Fit view
Selection
Read-only mode
MiniMap
Background grid
Edge labels
Decision branches
Keyboard navigation
Accessibility support

MUI integration

The main advantage would be native support for MUI conventions such as:

sx
slots
slotProps
theme.palette
theme.spacing
theme.shape
theme.typography

Custom nodes could also use existing MUI components:

function ApprovalNode({ data }) {
  return (
    <Card variant="outlined">
      <CardContent>
        <Typography variant="subtitle2">
          {data.title}
        </Typography>

        <Chip
          size="small"
          label={data.status}
        />
      </CardContent>
    </Card>
  );
}

Package scope

If this is too large for Material UI itself, it could potentially fit as a separate MUI X package, for example:

@mui/x-diagrams

The goal would not be to copy React Flow.

The value would be providing a diagram solution designed around MUI APIs, theming, accessibility and customization patterns.

Another option could be an official MUI abstraction built on top of an existing graph engine.

Questions

Would this type of component fit better in Material UI or MUI X?

Would the team prefer a native graph implementation or an abstraction over an existing engine?

Should the first version focus on visualization, editing, or both?

I am attaching a simple visual reference showing the type of diagram component being proposed.

Search keywords: diagram, flow, workflow, flowchart, node editor, graph, process diagram, visual workflow, automation, React Flow