Multi Scenario Flow Viewer

A React component library for visualizing multi-scenario flows with merged and individual views.

Features

• Multi-scenario visualization: Display multiple workflow scenarios in a single diagram
• Merged view: Shows consolidated flow with all scenarios combined
• Individual view: Shows each scenario separately for detailed analysis
• Interactive: Hover effects, scenario filtering, and scrollable views
• Customizable: Configurable colors, line widths, and node sizes
• TypeScript support: Full type definitions included

Installation

npm install multi-scenario-viewer

Usage

Basic Example

import React from 'react';
import { MultiScenarioFlowViewer, IndividualScenarioViewer } from 'multi-scenario-viewer';
import type { ScenarioFlow } from 'multi-scenario-viewer';

const scenarios: ScenarioFlow[] = [
  {
    id: "1",
    label: "正常系フロー",
    color: "#4f83cc",
    path: ["Start", "注文", "確認", "出荷", "完了"]
  },
  {
    id: "2",
    label: "在庫切れ時",
    color: "#e57373",
    path: ["Start", "注文", "確認", "エラー通知", "完了"]
  },
  {
    id: "3",
    label: "支払いエラー時",
    color: "#ffa726",
    path: ["Start", "注文", "支払いエラー", "エラー通知", "完了"],
    strokeWidth: 3 // Custom line width
  }
];

function App() {
  return (
    <div style={{ display: 'flex', gap: '20px' }}>
      {/* Merged flow view */}
      <div>
        <h2>Merged Flow</h2>
        <MultiScenarioFlowViewer 
          scenarios={scenarios}
          width={600}
          height={400}
        />
      </div>
      
      {/* Individual scenarios view */}
      <div>
        <h2>Individual Scenarios</h2>
        <IndividualScenarioViewer
          scenarios={scenarios}
          width={700}
          height={400}
        />
      </div>
    </div>
  );
}

API Reference

MultiScenarioFlowViewer

Props for the merged flow viewer component.

| Prop | Type | Default | Description | |------|------|---------|-------------| | scenarios | ScenarioFlow[] | required | Array of scenario flow definitions | | width | number | 800 | Width of the viewer in pixels | | height | number | 600 | Height of the viewer in pixels | | nodeRadius | number | 16 | Radius of flow nodes in pixels | | edgeWidth | number | 2 | Width of flow edges in pixels |

IndividualScenarioViewer

Props for the individual scenarios viewer component.

| Prop | Type | Default | Description | |------|------|---------|-------------| | scenarios | ScenarioFlow[] | required | Array of scenario flow definitions | | width | number | 400 | Width of the viewer in pixels | | height | number | 600 | Height of the viewer in pixels | | nodeRadius | number | 12 | Radius of flow nodes in pixels | | edgeWidth | number | 1.5 | Default width of flow edges in pixels |

ScenarioFlow

Type definition for scenario flow data.

type ScenarioFlow = {
  id: string;           // Unique identifier for the scenario
  label: string;        // Display name for the scenario
  color: string;        // Color for the scenario (hex, rgb, etc.)
  path: string[];       // Array of step names in the flow
  strokeWidth?: number; // Optional custom line width for this scenario
};

Advanced Usage

Custom Styling

const customScenarios: ScenarioFlow[] = [
  {
    id: "premium",
    label: "プレミアム会員",
    color: "#9c27b0",
    path: ["Start", "注文", "会員特典", "優先処理", "高速出荷", "追跡", "完了"],
    strokeWidth: 3 // Thicker line for premium flow
  },
  {
    id: "standard",
    label: "通常フロー",
    color: "#4f83cc",
    path: ["Start", "注文", "確認", "出荷", "完了"],
    strokeWidth: 1 // Thinner line for standard flow
  }
];

Event Handling

The components include built-in interactions:

• Hover effects: Tooltips show scenario information when hovering over nodes
• Scenario filtering: Click scenario buttons to highlight specific flows
• Scrolling: Automatic scroll support for large diagrams

Development

Building the Library

npm run build

This creates both ESM and CommonJS builds in the dist folder.

Running the Demo

npm run dev

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.