VizPaint

Transform your diagrams into stunning AI-generated images. VizPaint converts Mermaid charts, ASCII art, flowcharts, and text diagrams into beautiful, stylized visuals using Fal.ai's image generation models.

Features

• Multiple Diagram Types - Support for Mermaid diagrams, ASCII art, flowcharts, and any text-based diagram format
• Custom Style Prompts - Describe your desired visual style and watch AI transform your diagram
• Reference Images - Upload an image for style/composition reference
• Multiple AI Models - Choose from Nano Banana Pro or Seedream v4.5
• Aspect Ratio Presets - Square (1:1), Landscape (16:9), Portrait (9:16), Instagram (4:5)
• Generation History - Previous generations saved locally for easy access
• BYOK (Bring Your Own Key) - Use your own Fal.ai API key with optional secure storage

Demo

1. Landing Page - Paste a diagram or upload an image to get started
2. Create Page - Fine-tune your style, choose a model, and generate

Quick Start

Prerequisites

• Node.js 18+
• A Fal.ai API key (Get one here)

Installation

# Clone the repository
git clone https://github.com/Mortifera/vizpaint.git
cd vizpaint

# Install dependencies
npm install

# Start the development server
npm run dev

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

Enter Your API Key

1. Navigate to the Create page
2. Enter your Fal.ai API key
3. Optionally check "Remember my key" to persist it (stored securely in IndexedDB)

Example Diagrams

VizPaint works with any text-based diagram - just paste it in and describe your desired style:

Mermaid Flowchart

graph TD
    A[User] --> B[Frontend]
    B --> C[API]
    C --> D[Database]

ASCII Architecture

┌─────────────┐     ┌─────────────┐     ┌─────────────┐
│   Client    │────▶│   Server    │────▶│  Database   │
│  (Browser)  │◀────│  (Node.js)  │◀────│  (Postgres) │
└─────────────┘     └─────────────┘     └─────────────┘
        │                  │
        │           ┌──────┴──────┐
        │           │    Cache    │
        └──────────▶│   (Redis)   │
                    └─────────────┘

Simple Box Diagram

+-------------+      +-------------+
|   Input     | ---> |  Process    |
+-------------+      +-------------+
                           |
                           v
                    +-------------+
                    |   Output    |
                    +-------------+

Plain Text Description

Three circles connected in a triangle:
- "Design" at the top
- "Develop" at bottom left
- "Deploy" at bottom right
Arrows flowing clockwise between them

Sequence Flow

User -> App: Login request
App -> Auth: Validate credentials
Auth -> Database: Check user
Database --> Auth: User found
Auth --> App: Token generated
App --> User: Login successful

Usage

Text to Image

1. Paste your diagram in the input area (any format above works!)

2. Add a style description:

   Clean, modern infographic style with bold colors and clear labels
   

3. Select a model and aspect ratio

4. Click Generate Image

Image to Image (Style Reference)

1. Upload a reference image for style guidance
2. Paste your diagram
3. The AI will apply the reference image's style to your diagram visualization

Available Models

Model	Best For	Pricing
Nano Banana Pro	Text rendering, character consistency	$0.15/image
Seedream v4.5	Photorealistic, fast generation	$0.04/image

Project Structure

src/
├── app/
│   ├── page.tsx              # Landing page
│   ├── create/page.tsx       # Main creation page
│   └── api/generate/route.ts # Image generation API
├── components/
│   ├── landing/              # Landing page components
│   ├── create/               # Creation page components
│   └── shared/               # Shared components
├── hooks/
│   ├── useLocalStorage.ts    # LocalStorage persistence
│   ├── useApiKey.ts          # API key management
│   └── useFalGeneration.ts   # Generation hook
├── lib/
│   ├── models.ts             # Model definitions
│   ├── types.ts              # TypeScript types
│   └── keyStorage.ts         # IndexedDB for API keys
└── utils/
    └── promptBuilder.ts      # Prompt construction

API Key Security

VizPaint takes API key security seriously:

• Default: Keys are stored in memory only (cleared on page refresh)
• Optional Persistence: Enable "Remember my key" to store in IndexedDB
• Never Server-Stored: Your key is sent per-request but never stored on our servers
• Clear Warning: Security implications are shown before enabling persistence

Development

# Run development server
npm run dev

# Build for production
npm run build

# Run production build
npm start

# Lint code
npm run lint

Tech Stack

• Framework: Next.js 16 with App Router
• Language: TypeScript
• Styling: Tailwind CSS 4
• AI Generation: Fal.ai
• Fonts: Geist

Contributing

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

License

MIT License - see LICENSE for details.

Acknowledgments

• Fal.ai for the image generation API
• Vercel for Next.js and hosting