Organize diagram pages using tab groups
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 8.2k
- Forks
- 1.2k
- PR merge metrics
- No merged PRs in 30d
Description
- https://github.com/jgraph/drawio-desktop/blob/master/CODE_OF_CONDUCT.md that this project adheres to.
- I have searched the issue tracker for a feature request that matches the one I want to file, without success.
Is your feature request related to a problem? Please describe.
When a diagram contains many pages, all page tabs are displayed in a single horizontal list. This makes it difficult to navigate between related pages and quickly locate a specific page. Users may also need to scroll through a long list of tabs.
For example, a large project may contain separate pages for architecture, database design, user flows, APIs, and deployment. Currently, all these pages appear at the same level without an option to organize them.
Describe the solution you'd like
Please add support for organizing page tabs into named groups.
Suggested functionality:
- Create, rename, and delete tab groups.
- Drag and drop pages between groups.
- Expand or collapse a group to reduce the number of visible tabs.
- Reorder groups and pages within each group.
- Optionally assign a color to each group for easier identification.
- Preserve the group structure when the diagram is saved, reopened, or shared.
- Keep ungrouped pages available in a default group or at the top level.
For example:
- Architecture
- Overview
- Components
- Deployment
- Database
- ER Diagram
- Tables
- User Flows
- Login
- Checkout
This would make diagrams with a large number of pages significantly easier to navigate and maintain.
Describe alternatives you've considered
Currently, pages can be organized by adding prefixes to their names, such as Architecture - Overview or Database - Tables. However, this does not reduce the number of visible tabs and becomes difficult to manage when there are many pages.
Another workaround is to split the pages into multiple diagram files, but this makes sharing, navigation, and maintaining relationships between diagrams more difficult.
Additional context
The attached screenshot shows a diagram with more than 20 page tabs displayed in a single horizontal row. A collapsible grouping mechanism, similar to tab groups in modern web browsers, would improve usability for large diagrams.
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
No implementation file or test is identified in the issue. Start by locating the page-tab UI and the diagram save/reopen/share entry points, then determine how groups, ordering, and collapsed state should be represented. Done means named groups support the requested page operations and the structure persists across saving, reopening, and sharing.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100