MySubway

Convert hand-drawn transit sketches into clean, professional diagrams instantly. Rough maps become accurate, polished visualizations ideal for planners, designers, and transit enthusiasts.

Comment

Inspiration

Transit maps are often messy or hard to create without specialized tools. MySubway was designed to turn hand-drawn sketches into clean, professional diagrams automatically.

What it does

The tool converts a user-provided sketch of a transit network into a polished, labeled diagram. It preserves line colors, station names, and relative positions while straightening lines and spacing labels neatly.

How it built

  • Frontend: React (Typescript) for drawing input and preview.
  • Backend: Laravel (PHP) handles processing the image and generating JSON for the diagram.
  • AI-assisted layout: A model extracts lines and stations from sketches, then calculates coordinates and generates SVG output.

Challenges encountered

  • Preventing labels from overlapping lines.
  • Straightening hand-drawn lines while keeping network topology accurate.
  • Ensuring AI interprets ambiguous sketches consistently.

Accomplishments

  • Fully automated diagram generation from sketches.
  • Clean, readable diagrams with correct station spacing and line colors.
  • Minimal user input required beyond the sketch itself.

What was learned

  • Converting freehand sketches into structured data requires balancing AI guidance and geometric logic.
  • SVG generation requires precise alignment of labels and lines.
  • Integrating React frontend with Flask backend enables real-time AI-assisted diagram feedback.

What's next for MySubway

  • Add support for multiple map styles and layouts.
  • Improve AI handling of messy sketches and handwritten labels.
  • Export diagrams directly to PNG, PDF, or interactive web maps.
Share this project:

Updates