Will appreciate help to add needed adjustments on Mermaid 3.1.0 on MW 1.41.0, PHP 8.1.29
These solutions are beyond me: javascript - Maximum Text Size In Diagram Exceeded - Stack Overflow and Maximum text size in diagram exceeded · Issue #113 · mermaid-js/mermaid-cli · GitHub
How can I implement the max size on my MW installation? Thanks!
We are using Mediawiki 1.36 with Mermaid Extension 3.1.0, which includes Mermaid 8.14.0.
An update with jarn install did not update mermaid.min.js to newer versions.
A manual update of mermaid.min.js to Version 10.4 failed, since the JavaScript could not be loaded.
Is there a practicable way to update the included version of mermaid.min.js to current version 10.x?
Hello.
Try to use the mermaid.js file instead of mermaid.min.js. Also the variable $wgResourceLoaderDebug = true; solves the problem (but this is not so much a solution as the reason why it happens).
@Mikasa7, can you please provide a step-by-step instruction for dummies how to upgrade to Mermaid 10.x? Would be greatly appreciated!
Or could somebody who knows how to do it create a new version of the Extension with the latest Mermaid version included?
Hello @Tom-Wiming,
To update version of mermaid.js you need to clone repository: https://github.com/SemanticMediaWiki/Mermaid
Execute the commands:
npx npm-check-updates -u (or manually edit package.json - change the mermaid version to the new one)npm installAt execution time there may be errors related to file copying, but this is OK.
The updated version of the file will be located at:
resources/mermaid.min.js
If MediaWiki cannot load new version of the file correctly replace in extension.json row resources/mermaid.min.js with resources/mermaid.js
Afterwards you should copy file node_modules/mermaid/dist/mermaid.js to resources folder.
I hope I've been helpful
Thanks @Mikasa7! I indeed got the copying error messages, but ignored them. Also, it didn't work with "mermaid.min.js" (the code threw an exception in the browser), but using the unpacked "mermaid.js" works.
I am running MW 1.35 and installed Mermaid 3.0.0 and used the following syntax from example, A blank page is rendered, i also tried using the dev-master instead of 3.0.0 still nothing, i tried version 2.2.0, and then there is just a loading gif :
{{#mermaid:sequenceDiagram participant Alice participant Bob
Alice->John: Hello John, how are you?
loop Healthcheck
John->John: Fight against hypochondria
end
Note right of John: Rational thoughts
prevail... John-->Alice: Great! John->Bob: How about you? Bob-->John: Jolly good!
}}
HI! After installing Mermaid extension, tried include this in a page:
{{#mermaid:sequenceDiagram participant Alice participant Bob
Alice->John: Hello John, how are you?
loop Healthcheck
John->John: Fight against hypochondria
end
Note right of John: Rational thoughts
prevail... John-->Alice: Great! John->Bob: How about you? Bob-->John: Jolly good!
}}
and get this error:
[3f6e033d4535e9168d66d42b] /index.php?title=...&action=submit Error from line 35 of ...\mediawiki\extensions\Mermaid\src\ServiceWiring.php: Class 'Mermaid\Config' not found
Thanks in advance! :)
Javi
Probably the wrong and naive approach, but i dont have much experience in php and i got it to work
i just added
require_once('Config.php');
require_once('MermaidConfigExtractor.php');
to Mermaid/src/ServiceWiring.php, underneath the use statements
I have just tested the rendering of diagrams in various browsers and using all of the three default mediawiki themes. All seem to work fine on desktop browsers, (Sea Monkey, Dissenter, Brave, Opera, Chrome, etc).
I have had less success with mobile browsers. Chrome and clones (eg Kiwi, etc), Firefox are fine, but there is an issue with Brave. It renders some (eg graph boxes) as large with small text - ie the boxes are not sized to fit the text. I have tried applying em font sizes but this does not make a difference
{{#mermaid:graph TB
classDef default fill:#f9f,stroke:#333,stroke-width:4px,font-size:1.0em;
sq[Square shape] --> ci((Circle shape))
classDef green fill:#9f6,stroke:#333,stroke-width:2px,font-size:1.0em;
class sq,e green
}}
I've tried the example for the Mermaid documentation, with the mediawiki call, but it does not seem to work. I am using v3. All other types seem to work. Anyone else having issues?
{{#mermaid:journey
title My working day
section Go to work Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me
}}
There is an error in your syntax somewhere because this doesn't work on my site either. This does though:
{{#mermaid:graph TB
classDef default fill:#f9f,stroke:#333,stroke-width:4px,font-size:1.0em;
sq[Square shape] --> ci((Circle shape))
classDef green fill:#9f6,stroke:#333,stroke-width:2px,font-size:1.0em;
class sq,e green
}}
Issue - Short tasks (duration << X axis range) do not render visibly when displayed on gantt charts with long (timespan >> task width).
Possible solution #1 - modify mermaid.js to "catch" tasks with "width=0" and add "1" to the width
Possible solution #2 - Use CSS to set "minimum-width" of tasks.
What to do?
Note: MW 1.34 w/ Mermaid v2.2.0
I've played with the task elements in the browser's developer's tools and it would be ideal if Mermaid detected tasks with 'width="0"' and bumped them to 'width="1"'. Is that a mermaid.js feature or is that something that can be done in the Mediawiki Extension:Mermaid ?
Instead of defining class and linkstyle per chart, I'd prefer to change the way all charts display as default on my wiki. Could anyone point me to what css class and variables i'd have to use to enforce it?
running MW 1.34 + Mermaid 2.2.0
mermaid.js allows gantt chart tasks to be clickable [1], however, this breaks mermaid gantt charts in MW 1.34. Can someone comment on how hard this would be to make functional in Mediawiki? My desire is to call the {{#formlink:form=MyForm|target=TaskPagename|popup|reload}} parser function from Page Forms, but I would be content with just standard wiki page links, or even full URLs if need be. Thanks!
[1] https://mermaid-js.github.io/mermaid/#/gantt?id=interaction
The SVG elements generated by Mermaid are hard-coded with height=100% in the SVG element. This is not a problem in Vector but for whatever reason there is an issue with value of "height" when using the Metrolook Skin. With a height value of 100% from Mermaid the SVG is always 100% of the screen height which produces lots of unwanted white-space above and below the SVG. I have been able to fix this by adding the following CSS to Mediawiki:Common.css:
svg { height:auto }
but I wanted to share this with the Mermaid folks in case:
Thanks!