React Diagramsを使ったシンプルで簡単な方法

1. React Diagramsのインストール: まず、React Diagramsをプロジェクトにインストールする必要があります。以下のコマンドを使用して、npmパッケージとしてインストールします。

npm install react-diagrams

2. フローチャートコンポーネントの作成: React Diagramsでは、フローチャートはノード（要素）とポート（接続ポイント）から構成されます。まず、フローチャートコンポーネントを作成しましょう。

import React from 'react';
import { Diagram, NodeModel, PortModel } from 'react-diagrams';
const FlowChart = () => {
  // ノードとポートの作成
  const node1 = new NodeModel('Node 1');
  const node2 = new NodeModel('Node 2');
  const port1 = new PortModel('Port 1');
  const port2 = new PortModel('Port 2');
  // ノードとポートの関連付け
  node1.addPort(port1);
  node2.addPort(port2);
  // ノードの位置設定
  node1.setPosition(100, 100);
  node2.setPosition(300, 100);
  // フローチャートを作成
  const diagram = new Diagram();
  diagram.addNode(node1);
  diagram.addNode(node2);
  return (
    <div style={{ height: '500px', width: '800px' }}>
      {diagram.render()}
    </div>
  );
};
export default FlowChart;

3. フローチャートコンポーネントの使用: 作成したフローチャートコンポーネントを他のReactコンポーネントで使用することができます。

import React from 'react';
import FlowChart from './FlowChart';
const App = () => {
  return (
    <div>
      <h1>フローチャートの例</h1>
      <FlowChart />
    </div>
  );
};
export default App;

以上の手順に従うことで、React Diagramsを使用してシンプルで簡単なフローチャートを作成することができます。この例では、2つのノードとそれらの間のポートを作成しましたが、React Diagramsにはさまざまなカスタマイズオプションもあります。