ER graphs tend to get REALLY wide

[joachim-n]

Describe the bug

With a large number of entities, ER graphs tend to get really wide and not very tall, which makes them hard to work with.

To Reproduce Steps to reproduce the behavior:

1. Render the following graph:

%%{init: { 'theme': 'default' } }%%
erDiagram
consumer-consumer |o--o| user-user : "User"
oauth2_token-access_token |o--o| user-user : "User"
oauth2_token-access_token |o--o| consumer-consumer : "Client"
oauth2_token-auth_code |o--o| user-user : "User"
oauth2_token-auth_code |o--o| consumer-consumer : "Client"
oauth2_token-refresh_token |o--o| user-user : "User"
oauth2_token-refresh_token |o--o| consumer-consumer : "Client"
taxonomy_term-clients |o--o{ taxonomy_term-clients : "Term Parents"
taxonomy_term-clients |o--o{ taxonomy_term-menu : "Menu Items"
taxonomy_term-menu |o--o{ taxonomy_term-menu : "Term Parents"
taxonomy_term-testsuites |o--o{ taxonomy_term-testsuites : "Term Parents"
user-user |o--o{ taxonomy_term-clients : "Client"
user-user |o--o{ taxonomy_term-menu : "Menu Items"
user-user |o--|| agency-default_agency : "Agency"
test_summary-test_summary |o--|{ error_code-error_code : "Taxonomy Terms"
project_summary-project_summary |o--|{ error_code-error_code : "The current active critical errors."
project_summary-project_summary |o--|| user-user : "The project stakeholder"
project_summary-project_summary |o--|{ user-user : "The users of the project"
project_summary-project_summary |o--|{ taxonomy_term-clients : "List of all menu parents."
project_summary-project_summary |o--|{ taxonomy_term-menu : "List of all menu parents."
project_summary-project_summary |o--|{ taxonomy_term-testsuites : "List of all menu parents."
error_code-error_code |o--|| project-default_project : "Project"
wsd_jira_ticket-wsd_jira_ticket |o--o| user-user : "Authored by"
wsd_jira_ticket-wsd_jira_ticket |o--|| project-default_project : "Project"
wsd_jira_ticket-wsd_jira_ticket |o--o| test-accessibility_check : "Test"
wsd_jira_ticket-wsd_jira_ticket |o--o| test-accessibility_check_section508 : "Test"
wsd_jira_ticket-wsd_jira_ticket |o--o| test-accessibility_check_wcag2a : "Test"
wsd_jira_ticket-wsd_jira_ticket |o--o| test-accessibility_check_wcag2aa : "Test"
wsd_jira_ticket-wsd_jira_ticket |o--o| test-accessibility_check_wcag2aaa : "Test"
wsd_jira_ticket-wsd_jira_ticket |o--o| test-amp_validator : "Test"
wsd_jira_ticket-wsd_jira_ticket |o--o| test-bi_pdf_worker : "Test"
wsd_jira_ticket-wsd_jira_ticket |o--o| test-breadcrumb : "Test"
wsd_jira_ticket-wsd_jira_ticket |o--o| test-canonical_test : "Test"
wsd_jira_ticket-wsd_jira_ticket |o--o| test-cypress : "Test"
wsd_jira_ticket-wsd_jira_ticket |o--o| test-domain_structure_test : "Test"
wsd_jira_ticket-wsd_jira_ticket |o--o| test-fmc_security_updates : "Test"
wsd_jira_ticket-wsd_jira_ticket |o--o| test-fmc_test : "Test"
wsd_jira_ticket-wsd_jira_ticket |o--o| test-h1_test : "Test"
wsd_jira_ticket-wsd_jira_ticket |o--o| test-header_navigation : "Test"
wsd_jira_ticket-wsd_jira_ticket |o--o| test-html_status_code : "Test"
wsd_jira_ticket-wsd_jira_ticket |o--o| test-image_test : "Test"
wsd_jira_ticket-wsd_jira_ticket |o--o| test-instatag : "Test"
wsd_jira_ticket-wsd_jira_ticket |o--o| test-instatag_2_0 : "Test"
wsd_jira_ticket-wsd_jira_ticket |o--o| test-lighthouse_accessibility : "Test"
wsd_jira_ticket-wsd_jira_ticket |o--o| test-lighthouse_best_practices : "Test"
wsd_jira_ticket-wsd_jira_ticket |o--o| test-lighthouse_performance : "Test"
wsd_jira_ticket-wsd_jira_ticket |o--o| test-lighthouse_progressive_web_app : "Test"
wsd_jira_ticket-wsd_jira_ticket |o--o| test-lighthouse_seo : "Test"
wsd_jira_ticket-wsd_jira_ticket |o--o| test-link_test : "Test"
wsd_jira_ticket-wsd_jira_ticket |o--o| test-meta_description : "Test"
wsd_jira_ticket-wsd_jira_ticket |o--o| test-open_graph : "Test"
wsd_jira_ticket-wsd_jira_ticket |o--o| test-robots_txt_validator : "Test"
wsd_jira_ticket-wsd_jira_ticket |o--o| test-ryte_content_quality : "Test"
wsd_jira_ticket-wsd_jira_ticket |o--o| test-ryte_seo : "Test"
wsd_jira_ticket-wsd_jira_ticket |o--o| test-ryte_website_quality : "Test"
wsd_jira_ticket-wsd_jira_ticket |o--o| test-ryte_website_success_score : "Test"
wsd_jira_ticket-wsd_jira_ticket |o--o| test-sitelinks_searchbox : "Test"
wsd_jira_ticket-wsd_jira_ticket |o--o| test-ssl_checker : "Test"
wsd_jira_ticket-wsd_jira_ticket |o--o| test-text_to_html_ratio : "Test"
wsd_jira_ticket-wsd_jira_ticket |o--o| test-title_tag : "Test"
wsd_jira_ticket-wsd_jira_ticket |o--o| test-touch_icons : "Test"
wsd_jira_ticket-wsd_jira_ticket |o--o| test-twitter_cards : "Test"
wsd_jira_ticket-wsd_jira_ticket |o--o| test-vulnerability_check : "Test"
wsd_jira_ticket-wsd_jira_ticket |o--o| test-w3c_validator : "Test"
wsd_jira_ticket-wsd_jira_ticket |o--o| test-xml_sitemap_test : "Test"
project-default_project |o--|| taxonomy_term-menu : "Menu"
project-default_project |o--o| taxonomy_term-clients : "Client"
wsd_report-wsd_report |o--|{ website_test-website_test : "Websites"
result-default_result |o--|| project-default_project : "Project"
test-accessibility_check |o--|| project-default_project : "Project"
test-accessibility_check |o--o| wsd_report-wsd_report : "Report ID"
test-accessibility_check_section508 |o--|| project-default_project : "Project"
test-accessibility_check_section508 |o--o| wsd_report-wsd_report : "Report ID"
test-accessibility_check_wcag2a |o--|| project-default_project : "Project"
test-accessibility_check_wcag2a |o--o| wsd_report-wsd_report : "Report ID"
test-accessibility_check_wcag2aa |o--|| project-default_project : "Project"
test-accessibility_check_wcag2aa |o--o| wsd_report-wsd_report : "Report ID"
test-accessibility_check_wcag2aaa |o--|| project-default_project : "Project"
test-accessibility_check_wcag2aaa |o--o| wsd_report-wsd_report : "Report ID"
test-amp_validator |o--|| project-default_project : "Project"
test-amp_validator |o--o| wsd_report-wsd_report : "Report ID"
test-bi_pdf_worker |o--|| project-default_project : "Project"
test-bi_pdf_worker |o--o| wsd_report-wsd_report : "Report ID"
test-breadcrumb |o--|| project-default_project : "Project"
test-breadcrumb |o--o| wsd_report-wsd_report : "Report ID"
test-canonical_test |o--|| project-default_project : "Project"
test-canonical_test |o--o| wsd_report-wsd_report : "Report ID"
test-cypress |o--|| project-default_project : "Project"
test-cypress |o--o| wsd_report-wsd_report : "Report ID"
test-domain_structure_test |o--|| project-default_project : "Project"
test-domain_structure_test |o--o| wsd_report-wsd_report : "Report ID"
test-fmc_security_updates |o--|| project-default_project : "Project"
test-fmc_security_updates |o--o| wsd_report-wsd_report : "Report ID"
test-fmc_test |o--|| project-default_project : "Project"
test-fmc_test |o--o| wsd_report-wsd_report : "Report ID"
test-h1_test |o--|| project-default_project : "Project"
test-h1_test |o--o| wsd_report-wsd_report : "Report ID"
test-header_navigation |o--|| project-default_project : "Project"
test-header_navigation |o--o| wsd_report-wsd_report : "Report ID"
test-html_status_code |o--|| project-default_project : "Project"
test-html_status_code |o--o| wsd_report-wsd_report : "Report ID"
test-image_test |o--|| project-default_project : "Project"
test-image_test |o--o| wsd_report-wsd_report : "Report ID"
test-instatag |o--|| project-default_project : "Project"
test-instatag |o--o| wsd_report-wsd_report : "Report ID"
test-instatag_2_0 |o--|| project-default_project : "Project"
test-instatag_2_0 |o--o| wsd_report-wsd_report : "Report ID"
test-lighthouse_accessibility |o--|| project-default_project : "Project"
test-lighthouse_accessibility |o--o| wsd_report-wsd_report : "Report ID"
test-lighthouse_best_practices |o--|| project-default_project : "Project"
test-lighthouse_best_practices |o--o| wsd_report-wsd_report : "Report ID"
test-lighthouse_performance |o--|| project-default_project : "Project"
test-lighthouse_performance |o--o| wsd_report-wsd_report : "Report ID"
test-lighthouse_progressive_web_app |o--|| project-default_project : "Project"
test-lighthouse_progressive_web_app |o--o| wsd_report-wsd_report : "Report ID"
test-lighthouse_seo |o--|| project-default_project : "Project"
test-lighthouse_seo |o--o| wsd_report-wsd_report : "Report ID"
test-link_test |o--|| project-default_project : "Project"
test-link_test |o--o| wsd_report-wsd_report : "Report ID"
test-meta_description |o--|| project-default_project : "Project"
test-meta_description |o--o| wsd_report-wsd_report : "Report ID"
test-open_graph |o--|| project-default_project : "Project"
test-open_graph |o--o| wsd_report-wsd_report : "Report ID"
test-robots_txt_validator |o--|| project-default_project : "Project"
test-robots_txt_validator |o--o| wsd_report-wsd_report : "Report ID"
test-ryte_content_quality |o--|| project-default_project : "Project"
test-ryte_content_quality |o--o| wsd_report-wsd_report : "Report ID"
test-ryte_seo |o--|| project-default_project : "Project"
test-ryte_seo |o--o| wsd_report-wsd_report : "Report ID"
test-ryte_website_quality |o--|| project-default_project : "Project"
test-ryte_website_quality |o--o| wsd_report-wsd_report : "Report ID"
test-ryte_website_success_score |o--|| project-default_project : "Project"
test-ryte_website_success_score |o--o| wsd_report-wsd_report : "Report ID"
test-sitelinks_searchbox |o--|| project-default_project : "Project"
test-sitelinks_searchbox |o--o| wsd_report-wsd_report : "Report ID"
test-ssl_checker |o--|| project-default_project : "Project"
test-ssl_checker |o--o| wsd_report-wsd_report : "Report ID"
test-text_to_html_ratio |o--|| project-default_project : "Project"
test-text_to_html_ratio |o--o| wsd_report-wsd_report : "Report ID"
test-title_tag |o--|| project-default_project : "Project"
test-title_tag |o--o| wsd_report-wsd_report : "Report ID"
test-touch_icons |o--|| project-default_project : "Project"
test-touch_icons |o--o| wsd_report-wsd_report : "Report ID"
test-twitter_cards |o--|| project-default_project : "Project"
test-twitter_cards |o--o| wsd_report-wsd_report : "Report ID"
test-vulnerability_check |o--|| project-default_project : "Project"
test-vulnerability_check |o--o| wsd_report-wsd_report : "Report ID"
test-w3c_validator |o--|| project-default_project : "Project"
test-w3c_validator |o--o| wsd_report-wsd_report : "Report ID"
test-xml_sitemap_test |o--|| project-default_project : "Project"
test-xml_sitemap_test |o--o| wsd_report-wsd_report : "Report ID"
test_segment-test_segment |o--|| test-accessibility_check : "The test"
test_segment-test_segment |o--|| test-accessibility_check_section508 : "The test"
test_segment-test_segment |o--|| test-accessibility_check_wcag2a : "The test"
test_segment-test_segment |o--|| test-accessibility_check_wcag2aa : "The test"
test_segment-test_segment |o--|| test-accessibility_check_wcag2aaa : "The test"
test_segment-test_segment |o--|| test-amp_validator : "The test"
test_segment-test_segment |o--|| test-bi_pdf_worker : "The test"
test_segment-test_segment |o--|| test-breadcrumb : "The test"
test_segment-test_segment |o--|| test-canonical_test : "The test"
test_segment-test_segment |o--|| test-cypress : "The test"
test_segment-test_segment |o--|| test-domain_structure_test : "The test"
test_segment-test_segment |o--|| test-fmc_security_updates : "The test"
test_segment-test_segment |o--|| test-fmc_test : "The test"
test_segment-test_segment |o--|| test-h1_test : "The test"
test_segment-test_segment |o--|| test-header_navigation : "The test"
test_segment-test_segment |o--|| test-html_status_code : "The test"
test_segment-test_segment |o--|| test-image_test : "The test"
test_segment-test_segment |o--|| test-instatag : "The test"
test_segment-test_segment |o--|| test-instatag_2_0 : "The test"
test_segment-test_segment |o--|| test-lighthouse_accessibility : "The test"
test_segment-test_segment |o--|| test-lighthouse_best_practices : "The test"
test_segment-test_segment |o--|| test-lighthouse_performance : "The test"
test_segment-test_segment |o--|| test-lighthouse_progressive_web_app : "The test"
test_segment-test_segment |o--|| test-lighthouse_seo : "The test"
test_segment-test_segment |o--|| test-link_test : "The test"
test_segment-test_segment |o--|| test-meta_description : "The test"
test_segment-test_segment |o--|| test-open_graph : "The test"
test_segment-test_segment |o--|| test-robots_txt_validator : "The test"
test_segment-test_segment |o--|| test-ryte_content_quality : "The test"
test_segment-test_segment |o--|| test-ryte_seo : "The test"
test_segment-test_segment |o--|| test-ryte_website_quality : "The test"
test_segment-test_segment |o--|| test-ryte_website_success_score : "The test"
test_segment-test_segment |o--|| test-sitelinks_searchbox : "The test"
test_segment-test_segment |o--|| test-ssl_checker : "The test"
test_segment-test_segment |o--|| test-text_to_html_ratio : "The test"
test_segment-test_segment |o--|| test-title_tag : "The test"
test_segment-test_segment |o--|| test-touch_icons : "The test"
test_segment-test_segment |o--|| test-twitter_cards : "The test"
test_segment-test_segment |o--|| test-vulnerability_check : "The test"
test_segment-test_segment |o--|| test-w3c_validator : "The test"
test_segment-test_segment |o--|| test-xml_sitemap_test : "The test"
test_segment-test_segment |o--|{ test_segment_url-test_segment_url : "Websites"

(This is the ER structure for my project, generated automatically.)

Expected behavior

It would be nice if the generated SVG moved things around to fit better.

Screenshots If applicable, add screenshots to help explain your problem.

Code Sample If applicable, add the code sample or a link to the live editor.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context Add any other context about the problem here.

[RonaldZielaznicki]

Geeze, that is wide.

So wide you can hardly tell it's even there.

I think I see what's going on though. A large number of entities relate back to the same top level entity. So all the child entities get put on the same level.

Question is, what should be the cut off for when things move from horizontal to vertical?

🤔 Something to do with the screen width comes to mind. But, I'm wondering if the other diagrams have a solution for this implemented. And if so, if we can't mimic that solution for ER diagrams.

[maximal]

Can confirm that, on any real database of 40 tables or more Mermaid’s ER layout becomes almost useless.

[mrTorb]

it would be nice if you could decide the width of the workspace. something like this: erDiagram maxWidth: 2000