[New Component] Diagram / Flow

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