Venn Creator

A modern, dynamic Venn Diagram generator built with Next.js, React, and D3.js. Create beautiful, proportional Venn diagrams for up to 5-6 sets with ease.

Features

• Fully Interactive: Add, remove, and customize sets in real-time.
• Visual Customization: Choose custom colors for each set with a built-in color picker.
• CSV Import: Quickly populate diagrams by importing CSV files (headers as sets, columns as items).
• Label Toggles: Show or hide labels for individual sets to declutter your visualization.
• High-Quality Export: Download your diagrams in SVG (vector) or PNG (high-res) formats.
• Dark/Light Mode: Sleek UI with support for both themes, persisting your preference.
• Local Persistence: Your work is automatically saved to your browser's local storage.
• Built with D3 & Venn.js: Powered by robust libraries for accurate proportional layouts.

Getting Started

Prerequisites

• Node.js 18.x or later
• pnpm (recommended)

Installation

1. Clone the repository:

   git clone https://github.com/your-username/Venn-diagram.git
   cd Venn-diagram

2. Install dependencies:

   pnpm install

3. Start the development server:

   pnpm dev

4. Open http://localhost:3000 in your browser.

Docker (Optional)

You can also run the application using Docker:

1. Build the image:

   docker build -t venn-creator .

2. Run the container:

   docker run -p 3000:3000 venn-creator

Tech Stack

• Framework: Next.js 15 (App Router)
• Styling: Tailwind CSS 4
• Visuals: D3.js & Venn.js
• Icons: Lucide React

Usage Tips

• Entering Data: Type your items in the textarea for each set, one item per line. The diagram will automatically calculate intersections.
• CSV Format: Use a CSV where the first row contains set names. Subsequent rows should contain the items for those sets.
• Exporting: Use the SVG export for large prints or further editing in vector software (like Illustrator/Figma).

License

This project is open-source and available under the MIT License.