Turn hand-drawn transit diagrams into machine-readable data using AI vision extraction.

Problem & Solution

Visualizing transit concepts shouldn’t be complicated. Transit networks are often tricky to document, and manually entering station and line data is slow and prone to mistakes. MySubway makes it effortless: simply sketch your transit idea, upload it, and Google Gemini automatically extracts the structured data. The result is a clear, professional schematic that brings your transit vision to life instantly.

Key Features

• AI-Powered Extraction: Upload a transit diagram image; Gemini Vision API extracts lines, stations, and network structure
• Interactive Canvas: Draw or import transit networks on a zoomable, color-coded canvas
• Instant Rendering: Automatic schematic diagram generation via Graphviz
• Full-Stack: Modern React + Laravel pipeline, tested and production-ready

How It Works

Upload Image
    ↓
Gemini Vision extracts geometric data (stations, lines, coordinates)
    ↓
Parse JSON with transit network schema
    ↓
Graphviz renders as schematic SVG
    ↓
Convert to PNG and display

The AI applies sophisticated geometric rules: grid-snapping, transfer point detection, and schematic alignment to produce clean, standardized diagrams from sketches.

Tech Stack

Frontend: React 19, TypeScript, Konva canvas, Tailwind CSS, Vite
Backend: Laravel 12, PHP 8.2+, Google Gemini Vision API
Rendering: Graphviz, SVG-to-PNG conversion with librsvg

Quick Start

Prerequisites

• Node.js 22+
• PHP 8.2+
• Graphviz
• rsvg-convert (librsvg)

Setup

git clone <repo>
cd TransitDiagram
composer run setup

This will install dependencies, configure .env, generate keys, and build assets.

Development

composer run dev

Open http://localhost:8000 and start drawing or uploading transit diagrams.

Environment

Create or update .env with:

GEMINI_API_KEY=your_gemini_api_key

Run Tests

composer run test