react-flow-renderer

ui-component chart visualization

react-flow-rendererは、インタラクティブなノードベースのUI、ワークフローエディター、フローチャート、またはスタティックダイアグラムを構築するための高度にカスタマイズ可能なライブラリです。

Latest Ver 10.3.17

Homepage

Github

29,178

📢 ノードベースのインタラクティブUIやダイアグラムを簡単に構築できるReactライブラリです。

CDNダウンロード

License: MIT

Asset Type :

すべてのバージョンを見る

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/esm/index-20df97c0.js

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/esm/index-20df97c0.min.js

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/esm/index-a12c80bd.js

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/esm/index-a12c80bd.min.js

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/esm/index.js

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/esm/index.min.js

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/esm/index2.js

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/esm/index2.min.js

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/esm/index3.js

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/esm/index3.min.js

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/esm/index4.js

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/esm/index4.min.js

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/esm/useEdges.js

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/esm/useEdges.min.js

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/esm/useNodes.js

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/esm/useNodes.min.js

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/esm/useReactFlow-993c30ca.js

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/esm/useReactFlow-993c30ca.min.js

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/esm/useReactFlow.js

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/esm/useReactFlow.min.js

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/esm/useUpdateNodeInternals.js

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/esm/useUpdateNodeInternals.min.js

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/esm/useViewport.js

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/esm/useViewport.min.js

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/nocss/esm/index-20df97c0.js

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/nocss/esm/index-20df97c0.min.js

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/nocss/esm/index-a12c80bd.js

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/nocss/esm/index-a12c80bd.min.js

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/nocss/esm/index.js

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/nocss/esm/index.min.js

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/nocss/esm/index2.js

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/nocss/esm/index2.min.js

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/nocss/esm/index3.js

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/nocss/esm/index3.min.js

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/nocss/esm/index4.js

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/nocss/esm/index4.min.js

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/nocss/esm/useEdges.js

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/nocss/esm/useEdges.min.js

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/nocss/esm/useNodes.js

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/nocss/esm/useNodes.min.js

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/nocss/esm/useReactFlow-993c30ca.js

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/nocss/esm/useReactFlow-993c30ca.min.js

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/nocss/esm/useReactFlow.js

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/nocss/esm/useReactFlow.min.js

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/nocss/esm/useUpdateNodeInternals.js

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/nocss/esm/useUpdateNodeInternals.min.js

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/nocss/esm/useViewport.js

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/nocss/esm/useViewport.min.js

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/nocss/umd/index.js

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/nocss/umd/index.min.js

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/umd/index.js

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/umd/index.min.js

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/style.css

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/style.min.css

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/theme-default.css

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/theme-default.min.css

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/esm/index-20df97c0.js.map

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/esm/index-a12c80bd.js.map

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/esm/index.js.map

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/esm/index2.js.map

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/esm/index3.js.map

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/esm/index4.js.map

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/esm/useEdges.js.map

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/esm/useNodes.js.map

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/esm/useReactFlow-993c30ca.js.map

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/esm/useReactFlow.js.map

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/esm/useUpdateNodeInternals.js.map

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/esm/useViewport.js.map

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/nocss/esm/index-20df97c0.js.map

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/nocss/esm/index-a12c80bd.js.map

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/nocss/esm/index.js.map

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/nocss/esm/index2.js.map

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/nocss/esm/index3.js.map

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/nocss/esm/index4.js.map

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/nocss/esm/useEdges.js.map

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/nocss/esm/useNodes.js.map

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/nocss/esm/useReactFlow-993c30ca.js.map

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/nocss/esm/useReactFlow.js.map

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/nocss/esm/useUpdateNodeInternals.js.map

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/nocss/esm/useViewport.js.map

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/nocss/umd/index.js.map

https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/umd/index.js.map

Sample Code

⚠️ import 文を含む一部のコードは、jsFiddleで正しく実行されない場合があります。エラーが発生した場合は、コードをコピーしてご自身の環境でお試しください。

⚙️ JavaScript
{ "code": "import React from 'react';\nimport { ReactFlowProvider, ReactFlow } from 'react-flow-renderer';\n\nfunction App() {\n  const elements = [{ id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } }];\n  return (\n    <ReactFlowProvider>\n      <ReactFlow elements={elements} />\n    </ReactFlowProvider>\n  );\n}\n\nexport default App;" }