Improvement: New Zooming and Panning UX for Diagrams

Some users said our diagram interactive UX is a bit cumbersome, like, you can’t vertical/horizontal scroll with mouse wheels or use two fingers to scroll around the diagram.

Today we’re excited to announce you some UX enhancements for diagrams:

  • Panning Around: Besides the current dragging-to-move behavior, users can now scroll their diagrams using the mouse wheel or trackpad:
    • Mouse Wheel:
      • Up/down : Rotate mouse wheel forward/backward.
      • Left/right : Shift + Rotate mouse wheel forward/backward.
    • Trackpad : Place two fingers on the touchpad and slide horizontally/vertically.

diagram-panning-ux

  • Zooming: Zoom in/out using the mouse wheel or trackpad:
    • Mouse Wheel: Ctrl/Cmd + Rotate mouse wheel forward/backward.
    • Trackpad : Pinch to zoom out and spread to zoom in.

diagram-zooming-ux

From dbdiagram team w/ :heart:

1 Like

Thank you for the update.
I am using dbdiagram.io for my first “database project” in 15 years.
It is lovely.
As large displays become more capable, diagramming seems a resurgent design element in software design.
I would love “pinch to zoom” functionality in dbdiagram.io.
Perhaps “cumbersome” is a constantly moving goalpost!

1 Like

Thank you for the tutorial for mouse- and keyboard-based users.
I use a Windows-based touchscreen. Many other browser based design tools support “pinch-to-zoom” (i.e. the application responds to up to 10 touch points simultaneously).
Adding a feature adaptive to future capability would not add “cumbersomitiably” to your UI; touch users don’t need to see the funny silver keyboard and mouse animations you spent time to produce.

Hi Cayers,

Thank you for your suggestions.
I am Huy Phung from the dbdiagram team.

We currently do not support pinch-to-zoom on the touch screen (only the track pad). However, we appreciate your feedback and will think about it in the future.

Please let us know if you have any new concerns or questions.

Best regards,
Huy Phung