Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unlabelled edges on left side of top-down flowchart ('graph TD') cut off #73

Open
ernstki opened this issue Sep 15, 2021 · 1 comment
Open

Comments

@ernstki
Copy link

ernstki commented Sep 15, 2021

Setup and configuration

  • Mermaid version:
    • if you mean the MediaWiki Extension, 3.0.1 from Composer
    • if you mean the JavaScript library, I've updated to the latest available with yarn install as per these instructions
  • MediaWiki version: 1.35.something
  • PHP version: 7.3.latest-in-the-package-manager
  • Database system (MySQL, PostgresQL, etc.) and version:

Issue

Hi, everyone.

On our private wiki, I believe we are having the issue described in mermaid-js/mermaid#1288, which is that an unlabelled edge on the left side of a "wide" top-down flowchart is cut off. This appears to have been resolved in PR mermaid-js/mermaid#1333 April of last year, and I'm not able to reproduce the problem in the Mermaid live editor (link below).

graph TD
  A[input files] --> B[pipeline]
  B --> C[output 1]
  B --> D[output 2]
  C --> E[post-process 1]
  C --> F[post-process 2]
  C --> G[post-process 2]
  D --> G[post-process 2]
  C --> H[display]
  D --> H[dipslay]
  B --> I[summary]
  E --> I[summary]
  F --> I[summary]
  G --> I[summary]
  H --> I[summary]

Renders on our wiki as:

Screenshot showing the problem; the node edge on the left side of the diagram is cut off

Here is the same diagram rendered in the Mermaid live editor and in the SMW sandbox.

This issue can be temporarily resolved by messing with the resulting SVG's viewBox attribute, which is what led me to search for "viewbox" in the mermaid-js/mermaid GitHub project, and thus mermaid-js/mermaid#1333.

What is puzzling me is, supposedly I have the latest Mermaid.js library after doing a yarn install as prescribed here. I see a current timestamp on resources/mermaid.min.js anyway. As the referenced GitHub pull request to fix this issue appears to have been merged over a year ago, I would think I wouldn't be seeing this issue at all in the Mermaid MediaWiki extension.

I'm a bit out of my depths in terms of step-debugging a minified third-party JavaScript library, but I probably have 75% of the skills necessary to help fix this issue in the MediaWiki extension. I would just appreciate some general advice on how I could cross the finish line here.

Thanks!

@ernstki
Copy link
Author

ernstki commented Sep 15, 2021

I actually have no idea how to tell what exact version of mermaid.js yarn pulled down, my apologies. The JavaScript is minified, and I don't see any obvious version strings inside it. I assume it's the latest release, 8.12.1.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant