jgraph / jgraph/drawio

Organize diagram pages using tab groups

Open
#5,774 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement
Dominant language
JavaScript
Stars
8.2k
Forks
1.2k
PR merge metrics
No merged PRs in 30d

Description

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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.