search

mermaid-js / mermaid

Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
https://mermaid.js.org
MIT License
70.68k stars 6.33k forks source link

ER graphs tend to get REALLY wide #2807

Open joachim-n opened 2 years ago

joachim-n commented 2 years ago

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):

Smartphone (please complete the following information):

Additional context Add any other context about the problem here.

RonaldZielaznicki commented 2 years ago

Geeze, that is wide.

image

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 commented 1 year ago

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

mrTorb commented 1 year ago

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

brokenpylons commented 1 month ago

A possible solution would be to implement the neato layout engine from graphviz (or something similar).

The same issue is exhibited if you use the default graphviz layout engine: dot

This is how it looks using the neato layout engine: neato

Related https://github.com/mermaid-js/mermaid/issues/4453