react-form-atlas-visualizer

See Your Form Logic. Generate beautiful flowcharts and insightful statistics from your React Form Atlas schemas.

⚡ Quick Start

1. Paste your schema into our live playground (Coming Soon) or use the CLI:

   npx react-form-atlas-visualizer ./examples/onboarding-schema.json -o flow.html

2. Open flow.html in your browser. You'll see an interactive graph like this:

   

🖥️ CLI Usage

React Form Atlas-visualizer <schema-file> [options]

# Options:
# -o, --output <file>    Output HTML file (Default: schema-visualization.html)
# -h, --help            Show help

🛠️ Programmatic API

import { SchemaVisualizer } from 'react-form-atlas-visualizer';
import schema from './onboarding.json';

// Get Mermaid Diagram String
const diagram = SchemaVisualizer.toMermaid(schema);
console.log(diagram);
// Output: graph TD; A-->B; ...

// Get Complexity Stats
const stats = SchemaVisualizer.getStats(schema);
console.log(stats);
/*
{
  totalStates: 15,
  maxBranching: 4,
  cyclomaticComplexity: 3
}
*/

📄 License

MIT © Mehul Birare