xyflow — Node editor
A React Flow / xyflow graph editor embedded in a maud-ui shell. Nodes are draggable, edges are connectable, the minimap and controls are wired, and the React Flow colour mode flips automatically with the gallery's data-theme attribute. Loaded from esm.sh at runtime — no bundler.
flows/api-pipeline.json
Loading xyflow + React from esm.sh…
Graph JSON
// Click Export JSON to dump the current nodes and edges.Usage — mount xyflow inside a maud-ui page
// In your <head>:
// <link rel="stylesheet" href="https://esm.sh/@xyflow/react@12.3.6/dist/style.css">
// <script type="importmap">
// { "imports": {
// "react": "https://esm.sh/react@18.3.1",
// "react-dom/client":"https://esm.sh/react-dom@18.3.1/client",
// "@xyflow/react": "https://esm.sh/@xyflow/react@12.3.6?deps=react@18.3.1"
// }}
// </script>
//
// Your maud template renders an empty mount point:
html! {
div class="mui-integration mui-integration--xyflow" {
div class="mui-integration__header" { /* toolbar */ }
div class="mui-integration__editor" id="flow-root" {}
}
}
// Then a <script type="module"> mounts ReactFlow into the div:
// import { createRoot } from 'react-dom/client';
// import { ReactFlow, Background, Controls, MiniMap } from '@xyflow/react';
// const root = createRoot(document.getElementById('flow-root'));
// root.render(React.createElement(ReactFlow, {
// defaultNodes: [/* ... */],
// defaultEdges: [/* ... */],
// fitView: true,
// colorMode: document.documentElement.dataset.theme || 'dark',
// }, React.createElement(Background), React.createElement(Controls)));