Railracks Visualizer

A React-based visualizer for Railtracks agentic flows

🚀 Quick Start

As an NPM Package

1. Install the package:

   npm install @railtownai/railtracks-visualizer

2. Import and use in your React app:

   import { Visualizer } from '@railtownai/railtracks-visualizer';
   
   function App() {
     const data = {
       nodes: [...],
       edges: [...],
       stamps: [...]
     };
   
     return (
       <Visualizer
         flowData={data}
         width="100%"
         height="800px"
         showTimeline={false}
         defaultZoom={1.2}
         defaultPan={{ x: 0, y: 0 }}
       />
     );
   }

🎨 Features

• Interactive Flow Visualization: Visualize agentic flows with nodes and edges
• Auto-layout: Automatic positioning of nodes in a tree structure
• Inspection Panel: Detailed view of nodes and edges
• Portable Styling: Uses emotion for self-contained, portable styles
• Graceful Theme Handling: Works out of the box with default light theme, no ThemeProvider required
• Dark Mode Support: Full dark mode compatibility with automatic theme detection

Basic Usage (No ThemeProvider Required)

import { Visualizer } from "@railtownai/railtracks-visualizer";

// Works out of the box with default light theme
<Visualizer flowData={data} />;

🔧 Development

1. npm install
2. npm run build
3. npm test
4. npm start - This should open up Storybook UI at http://localhost:6006

📄 License

See LICENSE

📞 Support

For issues and questions, please open an issue on GitHub.