tiwari85aman/PromptViz: A system prompt visualizer tool

🔮 PromptViz

See the logic behind the prompts

Stop reading walls of text. Start seeing the structure.

Your 500-line system prompt? One click → Interactive diagram.

📸 Screenshots

💡 The Problem

Ever tried to understand someone else’s mega system prompt? Or explain yours to a teammate?

"So first it checks if the user is authenticated, then it branches into
three different modes depending on the context, and each mode has its
own set of rules, but there are also these global constraints that..."

Yeah. We’ve all been there.

⚡ The Solution

Paste your prompt. Pick your AI model. Click ge…

🔮 PromptViz

See the logic behind the prompts

Stop reading walls of text. Start seeing the structure.

Your 500-line system prompt? One click → Interactive diagram.

Get Started · See Features · API Docs

📸 Screenshots

💡 The Problem

Ever tried to understand someone else’s mega system prompt? Or explain yours to a teammate?

"So first it checks if the user is authenticated, then it branches into
three different modes depending on the context, and each mode has its
own set of rules, but there are also these global constraints that..."

Yeah. We’ve all been there.

⚡ The Solution

Paste your prompt. Pick your AI model. Click generate.

System Prompt → AI Analysis → Interactive Diagram → Edit → Generate New Prompt

That’s it. No parsing rules to configure. No manual diagramming. The AI reads your prompt like a human would—and draws what it sees.

But wait, there’s more. Edit the diagram visually, then generate an updated prompt in Markdown or XML format. It’s a two-way street.

Input	Output
📝 Your complex prompt	🎨 Beautiful Mermaid diagram
🤖 GPT-4, Claude, Gemini	🔄 Interactive Flowcharts
📁 .txt or .md files	✏️ Editable, zoomable, exportable
✏️ Edited diagram	📄 New prompt (MD / XML)

🎯 Why Developers Love It

🧠 AI Does The Thinking

No regex. No custom parsers. Drop in any prompt—structured or chaotic—and let GPT-4/Claude figure out the logic flow.

⚡ Stupidly Fast

Paste → Click → Done. Average generation time: 3-5 seconds. Your diagram history auto-saves for quick access.

🔌 Multi-Model Flexibility

Bring your own API key. Switch between OpenAI, Anthropic, or Google models on the fly via LiteLLM.

🎨 Actually Useful Output

Not just static images. Get interactive React Flow diagrams you can pan, zoom, edit, and export as Mermaid code.

✏️ Two-Way Editing — The Game Changer

Edit nodes directly in the visual diagram, rearrange the flow, then generate a brand new prompt from your changes. Export as Markdown or XML format. Perfect for iterating on complex system prompts without touching raw text.

✨ Features

🧠 Smart Diagram Generation

Intelligent AI analysis of prompt structure, decision trees, and workflows
Generates clear, well-structured flowchart diagrams
Auto-detects the best visualization approach for your content 🎨 Modern, Responsive Interface
Real-time preview with diagram ↔ code toggle
Drag & drop file upload (.txt, .md)
Interactive canvas: pan, zoom, edit nodes
Works beautifully on desktop, tablet, and mobile ✏️ Visual Editing + Prompt Generation
Edit diagram nodes directly in visualization mode
Rearrange, rename, and restructure your prompt flow visually
Generate updated prompts from your edited diagram
Export in Markdown or XML format
Two-way workflow: Prompt → Diagram → Edit → New Prompt 📚 Built-in History
Auto-saves every diagram to local SQLite database
Quick-load any previous generation
Edit prompts and regenerate on the fly ♿ Accessibility First
WCAG 2.1 AA compliant
Full keyboard navigation (Cmd+Enter to generate, `Cmd+`` to toggle view)
Screen reader support & reduced motion preferences

🏗️ Architecture

┌─────────────────────────────────────────────────────────────┐
│                      PromptViz                               │
├─────────────────────────────────────────────────────────────┤
│                                                              │
│  ┌─────────────────┐         ┌─────────────────────────┐   │
│  │    Frontend     │   API   │        Backend          │   │
│  │  React + TS     │◄───────►│   Flask + LiteLLM       │   │
│  │  Tailwind CSS   │         │   SQLAlchemy            │   │
│  │  React Flow     │         └──────────┬──────────────┘   │
│  │  Mermaid.js     │                    │                   │
│  └─────────────────┘                    ▼                   │
│                              ┌─────────────────────────┐   │
│                              │     AI Providers        │   │
│                              │  OpenAI │ Anthropic     │   │
│                              │  Google │ ...           │   │
│                              └─────────────────────────┘   │
└─────────────────────────────────────────────────────────────┘

🛠️ Tech Stack

Frontend

Technology	Purpose
React 19	UI Framework
TypeScript	Type Safety
Tailwind CSS	Styling
React Flow	Interactive Diagrams
Mermaid.js	Diagram Rendering
Axios	API Communication
Lucide React	Icons

Backend

Technology	Purpose
Flask 3.0	Web Framework
Flask-RESTX	API Documentation
LiteLLM	Multi-model AI Integration
SQLAlchemy	Database ORM
Pydantic	Data Validation
Gunicorn	Production Server

🚀 Quick Start

Prerequisites

Node.js 16+ (for frontend)
Python 3.9+ (for backend)
API Key from OpenAI, Anthropic, or Google AI

1. Clone the Repository

git clone https://github.com/tiwari85aman/PromptViz.git
cd PromptViz

2. Backend Setup

cd backend

# Create virtual environment
python -m venv venv
source venv/bin/activate  # On Windows: venv\Scripts\activate

# Install dependencies
pip install -r requirements.txt

# Configure environment
cp env.example .env
# Edit .env with your API keys

Configure .env:

FLASK_ENV=development
FLASK_DEBUG=True
SECRET_KEY=your-secret-key-here
OPENAI_API_KEY=your-openai-api-key
LITELLM_MODEL=gpt-4
LITELLM_TIMEOUT=60
PORT=5001

Start the backend:

python run.py

The API will be available at http://localhost:5001

3. Frontend Setup

cd frontend

# Install dependencies
npm install

# Start development server
npm start

The app will open at http://localhost:3000

📡 API Endpoints

Method	Endpoint	Description
`GET`	`/api/health`	Health check
`POST`	`/api/generate-diagram`	Generate diagram from text
`POST`	`/api/upload-file`	Generate diagram from file
`GET`	`/api/models`	List available AI models
`POST`	`/api/validate-key`	Validate API key
`GET`	`/api/system-prompts`	Get available system prompts
`GET`	`/api/diagrams`	List saved diagrams
`GET`	`/api/diagrams/{id}`	Get specific diagram
`DELETE`	`/api/diagrams/{id}`	Delete diagram

For detailed API documentation, see backend/API_DOCUMENTATION.md or visit http://localhost:5001/ when the server is running.

⌨️ Keyboard Shortcuts

Shortcut	Action
`Cmd/Ctrl + Enter`	Generate diagram
`Cmd/Ctrl + ``	Toggle diagram/code view
`Tab`	Navigate elements
`Space/Enter`	Activate buttons

📁 Project Structure

PromptViz/
├── backend/
│   ├── app/
│   │   ├── api/             # API routes and models
│   │   ├── core/            # LLM client and system prompts
│   │   └── utils/           # Helper functions
│   ├── data/                # SQLite database
│   ├── config.py            # Configuration
│   ├── run.py               # Application entry
│   └── requirements.txt     # Python dependencies
│
├── frontend/
│   ├── src/
│   │   ├── components/      # React components
│   │   ├── hooks/           # Custom hooks
│   │   ├── services/        # API client
│   │   ├── types/           # TypeScript types
│   │   └── utils/           # Utility functions
│   ├── public/              # Static assets
│   └── package.json         # Node dependencies
│
└── README.md                # This file

🔧 Configuration

Environment Variables

Variable	Description	Default
`OPENAI_API_KEY`	OpenAI API key	Required*
`ANTHROPIC_API_KEY`	Anthropic API key	Optional
`GEMINI_API_KEY`	Google AI API key	Optional
`LITELLM_MODEL`	Default AI model	`gpt-4`
`LITELLM_TIMEOUT`	API timeout (seconds)	`60`
`FLASK_DEBUG`	Enable debug mode	`False`
`SECRET_KEY`	Flask secret key	Auto-generated

*At least one AI provider API key is required.

🚢 Deployment

Development

# Backend
cd backend && python run.py

# Frontend
cd frontend && npm start

Production

# Backend with Gunicorn
cd backend && gunicorn -w 4 -b 0.0.0.0:5001 run:app

# Frontend build
cd frontend && npm run build
# Serve the build/ directory with your preferred static server

🧪 Testing

Backend

cd backend
python test_backend.py

Frontend

cd frontend
npm test

🤝 Contributing

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

Fork the repository
Create your feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

Mermaid.js for diagram rendering
React Flow for interactive node-based diagrams
LiteLLM for unified AI model access
Tailwind CSS for styling

🔮 PromptViz

See the logic behind the prompts

📸 Screenshots

💡 The Problem

⚡ The Solution

🔮 PromptViz

See the logic behind the prompts

📸 Screenshots

💡 The Problem

⚡ The Solution

🎯 Why Developers Love It

🧠 AI Does The Thinking

⚡ Stupidly Fast

🔌 Multi-Model Flexibility

🎨 Actually Useful Output

✏️ Two-Way Editing — The Game Changer

✨ Features

🏗️ Architecture

🛠️ Tech Stack

Frontend

Backend

🚀 Quick Start

Prerequisites

1. Clone the Repository

2. Backend Setup

3. Frontend Setup

📡 API Endpoints

⌨️ Keyboard Shortcuts

📁 Project Structure

🔧 Configuration

Environment Variables

🚢 Deployment

Development

Production

🧪 Testing

Backend

Frontend

🤝 Contributing

📄 License

🙏 Acknowledgments

Similar Posts