SemanticMediaWiki / Mermaid

Provides a parser function to generate diagrams and flowcharts with the help of the mermaid script language
https://www.mediawiki.org/wiki/Extension:Mermaid
Other
36 stars 22 forks source link

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

Open ernstki opened 2 years ago

ernstki commented 2 years ago

Setup and configuration

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 commented 2 years ago

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.