README.md

metadata

title: 📊 PVB Flow - Product Vision Board to Mermaid
emoji: 📊
colorFrom: blue
colorTo: green
sdk: gradio
sdk_version: 6.0.0
app_file: app.py
pinned: false
license: mit
hardware: zero-gpu
short_description: Product Vision Board to Mermaid diagram generator
models:
  - Qwen/Qwen3-VL-4B-Instruct
tags:
  - product-management
  - mermaid
  - diagram-generation
  - vision-board
  - ai-powered
  - qwen
  - qwen3
  - zero-gpu

📊 PVB Flow - Product Vision Board to Mermaid Diagram Generator

Transform your Product Vision Board JSON into professional, operational process Mermaid diagrams with AI-powered analysis.

⚡ Features

🤖 AI-Powered Generation:

• Qwen3-4B-Instruct: State-of-the-art Qwen3 model optimized for instruction following
• ZeroGPU Acceleration: Fast inference with automatic GPU management
• Operational Focus: Creates process diagrams showing WHO does WHAT
• Actor-Based Design: Identifies systems, humans, and AI actors
• Decision Points: Shows branching logic and validation loops

🎯 Smart Diagram Design:

• Process Workflows: Sequential operational steps
• Data Flows: Input/output transformations
• Validation Loops: Error handling and enrichment
• Visual Styling: Color-coded actors and decision points

📊 Interactive Features:

• Conversational Refinement: Chat to improve diagrams
• Layout Control: Request vertical/horizontal layouts
• Visual Enhancements: Add colors, icons, subgraphs
• Shareable Links: Generate Mermaid Live Editor URLs

🔗 Export Options:

• Mermaid Live Editor: Direct link to edit and export
• PNG/SVG/PDF Export: Via Mermaid Live Editor
• Share with Team: Shareable links for collaboration

🚀 How to Use

Basic Usage

1. Paste Product Vision Board JSON in the chat input
2. Wait for diagram generation (appears in right panel)
3. Refine via chat (e.g., "make it more vertical", "add colors")
4. Generate shareable link to open in Mermaid Live Editor

Example Product Vision Board JSON

{
  "1. Utilisateur Cible": [
    "Passionnés de cuisine amateur",
    "Professionnels de la restauration"
  ],
  "2. Description du Produit": [
    "Application de gestion de recettes avec suggestions personnalisées",
    "Planification automatique des repas de la semaine"
  ],
  "3. Fonctionnalités Clés": [
    "Recherche de recettes par ingrédients disponibles",
    "Génération automatique de liste de courses",
    "Suggestions basées sur les préférences alimentaires"
  ],
  "4. Enjeux et Indicateurs": [
    "Réduire le gaspillage alimentaire de 30%",
    "Atteindre 100 000 utilisateurs actifs en 6 mois"
  ],
  "Summary": "Simplifier la planification des repas et réduire le gaspillage alimentaire"
}

Refinement Examples

• "Make it more vertical"
• "Add more colors to distinguish actors"
• "Simplify the diagram"
• "Add icons or emojis"
• "Show this as a swimlane diagram"

🎯 Perfect For

• Product Managers: Visualize product vision as operational processes
• Business Analysts: Transform requirements into process flows
• Development Teams: Understand operational workflows
• Stakeholders: Share vision in visual format
• Documentation: Professional process diagrams

🔧 Configuration

The app uses ZeroGPU for acceleration:

• No API key required
• Runs on Hugging Face ZeroGPU infrastructure
• Automatic model loading and GPU management

🔒 Privacy & Security

• ZeroGPU: Temporary GPU allocation per request
• No Data Retention: Vision boards processed temporarily
• Secure Processing: HF Spaces environment
• Open Source Model: Qwen3-4B-Instruct

🔗 Related Links

• Mermaid Live Editor: https://mermaid.live/edit
• Mermaid Documentation: https://mermaid.js.org/
• Qwen3-4B-Instruct: https://huggingface.co/Qwen/Qwen3-4B-Instruct
• ZeroGPU: https://huggingface.co/docs/hub/spaces-zerogpu

Start transforming your Product Vision Boards into professional diagrams! 📊✨