Extension talk:Mermaid

About this board (talkcontribs)

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?


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


Reply to "User Journey Example?"

Getting "...\mediawiki\extensions\Mermaid\src\ServiceWiring.php: Class 'Mermaid\Config' not found"

Javier.Farachi (talkcontribs)

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
 Note right of John: Rational thoughts 
   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! :)


Reply to "Getting "...\mediawiki\extensions\Mermaid\src\ServiceWiring.php: Class 'Mermaid\Config' not found""

Use CSS to set "minimum width" of gantt tasks in pixels?

Revansx (talkcontribs)

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

Revansx (talkcontribs)

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 ?

Reply to "Use CSS to set "minimum width" of gantt tasks in pixels?"

Globally change flowchart theme in Common.css?

Yevvieart (talkcontribs)

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?

Reply to "Globally change flowchart theme in Common.css?"

Is it possible to make gantt tasks clickable?

Revansx (talkcontribs)

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

Reply to "Is it possible to make gantt tasks clickable?"

Mermaid CSS issue with Metrolook Skin

Revansx (talkcontribs)
  • Mermaid 2.2.0
  • MW 1.34.1
  • Skin:Metrolook 7.0 alpha 2 (118084b) 16:20, 23 April 2020

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:

  1. Other people are having this issue or
  2. The mermaid maintainers think changing the current "height=100%" SVG attribute to "height=auto".


- Revansx (talk) 01:04, 13 May 2020 (UTC)

Reply to "Mermaid CSS issue with Metrolook Skin"

Git graph and Class diagrams???

Summary by Kghbln

No, due to issue 39.

Revansx (talkcontribs)
Kghbln (talkcontribs)

No, because this requires Mermaid 8.4.0 while the extension ships Mermaid 8.0.0. Pull requests welcome: issue 39.

Installing on a non-Internet facing server

Squeak24 (talkcontribs)

Hi All

I was wondering if there is anyway of installing this extension without the use of Composer? The server I am working on is behind a firewall and only available to users on the local Intranet.

I would take the server offline and install it on an Internet facing machine, but due to the size of the Wiki, I know this will take time, not sure if this down time will be acceptable.

I need to put this ideally on two different Wikis I have on the one server.

Any help is appreciated.


Kghbln (talkcontribs)

The only way is to install it on an internet facing machine and move over the files afterwards. I think it should work for this extension without including MediaWiki itself in the process. Not 100% sure though.

Reply to "Installing on a non-Internet facing server"

What's new in 2.1.1?

Summary by Revansx

"Fixes loading of configuration settings" .. Yippie! (y)

Revansx (talkcontribs)

If i find anything written in the readme file, I'll post it here...

Set "axisFormat" for Gantt charts

Summary by Revansx

It was demonstrated that this capability is available in the latest version of mermaid: 2.1.0. See https://mermaidjs.github.io/gantt.html#Scale for axisFormat value details

Revansx (talkcontribs)

Hi. I'm using Mermaid with MW 1.30 for Gantt charts and I'd like to set the axisFormat parameter as discussed in mediawikijs project pages here:

It's not clear to me how to do this with Mermaid as a mediawiki extension. Do I need to add something in Common.js or maybe make changes to the mermaid.core.config file in the mermaid extensions folder.. Please advise!


Return to "Mermaid" page.