Is SemanticMediaWiki Required?

Documenting all of the Gantt features?

does not render in IE

help with SMW query results in Mermaid Gantt

{{#mermaid:gantt
  dateFormat  YYYY/MM/DD
  Overall Project: prj1, {{{has project begin date}}}, {{{has project finish date}}}
  {{#ask:[[Category:Project Milestone]][[relates to page::{{FULLPAGENAME}}]]
    |?has milestone name
    |?has date#-F[Y-m-d]
    |link=none|format=template|template=Mermaid Milestones
  }}
}}

{{{2|Milestone Name}}}: {{{3|2000-01-01}}}, 1d

<div
 id="ext-mermaid-99635bc5204c4b4e1"
 class="ext-mermaid"
 data-mermaid="{"content":"gantt\n
 dateFormat YYYY\/MM\/DD\n
 Overall 2018 SEC EMI IST Test Campaign : fc16491, 2018\/10\/01, 2018\/12\/21\n
 [[SMW::off]]Milestone1: 2018-11-19, 1d[[SMW::on]]","config":{"theme":"forest"}}"
><div class="mermaid-dots"></div></div>

{{#mermaid:gantt
  dateFormat  YYYY/MM/DD
  Overall Project: prj1, {{{has project begin date}}}, {{{has project finish date}}}
  Milestone1: 2018-11-19, 1d
}}

Using Mermaid with SMW SRF (SEP issue)

{{#mermaid:gantt
  Event1: myevent1, 2018/10/18, 1d
  Event2: myevent2, 2018/10/20, 1d
}}

{{#mermaid:gantt
  {{#ask: [[Category:Foo]]  |?has name  |?has date |link=none
     |format=template
     |template=Foo-item
     |import-annotation=true
     |sep=\n
  }}
}}

<div id="ext-mermaid-57345bc89a90cf8bf" class="ext-mermaid" data-mermaid="{"content":"gantt\n Event1: myevent1, 2018\/10\/18, 1d\\n Event2: myevent2, 2018\/10\/20, 1d","config":{"theme":"forest"}}"><div class="mermaid-dots"></div></div>

<div id="ext-mermaid-57345bc89a90cf8bf" class="ext-mermaid" data-mermaid="{"content":"gantt\n Event1: myevent1, 2018\/10\/18, 1d\n Event2: myevent2, 2018\/10\/20, 1d","config":{"theme":"forest"}}"><div class="mermaid-dots"></div></div>

Does this extension support arrows on graphs

{{#mermaid:graph LR 
Start --> Stop 
}}

Set "axisFormat" for Gantt charts

What's new in 2.1.1?

Git graph and Class diagrams???

Installing on a non-Internet facing server

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.

Gary Squeak24 (talk) 17:12, 6 February 2020 (UTC)

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. [[kgh]] (talk) 17:49, 7 March 2020 (UTC)

Mermaid CSS issue with Metrolook Skin

• 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".

Thanks!

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

Is it possible to make gantt tasks clickable?

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 Revansx (talk) 00:14, 1 August 2020 (UTC)

Globally change flowchart theme in Common.css?

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? Yevvieart (talk) 08:49, 1 August 2020 (UTC)

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

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 (talk) 16:30, 10 August 2020 (UTC)

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 ? Revansx (talk) 16:54, 10 August 2020 (UTC)

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

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 Javier.Farachi (talk) 17:55, 11 August 2020 (UTC)

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 TheTomFinke (talk) 10:09, 24 November 2020 (UTC)

User Journey Example?

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

}} 130.76.24.15 (talk) 20:26, 31 August 2020 (UTC)

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

}} Polymath uk (talk) 10:30, 12 October 2020 (UTC)

Rendering in some mobile browsers

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

}} Polymath uk (talk) 10:47, 12 October 2020 (UTC)

Mediawiki 1.35 with mermaid 3.0.0 displays blank page

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!

}} Ahmad.enisyst (talk) 09:54, 11 November 2020 (UTC)

I'm getting the same issue, lots of loading gifs and blanks. Frosty9191 (talk) 11:37, 6 January 2021 (UTC)

Update mermaid.min.js to Version 10.x

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? Ac-fra (talk) 10:54, 9 November 2023 (UTC)

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 (talk) 07:53, 28 January 2024 (UTC)

@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? Tom-Wiming (talk) 08:26, 29 April 2024 (UTC)

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 install

At 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 Mikasa7 (talk) 15:46, 30 April 2024 (UTC)

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. Tom-Wiming (talk) 08:01, 9 July 2024 (UTC)

Maximum text size in diagram exceeded

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! School4schools (talk) 15:26, 10 September 2024 (UTC)

Adding Wiki links in the state text of a stateDiagram-v2 diagram

MW 1.39, Mermaid 3.1.0

I have the following mermaid code:

{{#mermaid: stateDiagram-v2
   state "My Organization" as myorg
   state "[[Alice]]" as myorg
}}

and my hope was that the text "[[Alice]]" would render "Alice" as a wiki link, but it does not.

I would be content to put a full hyperlink in if need be, but sadly there is no reference to adding links in the mermaid state diagram documentation at: https://mermaid.js.org/syntax/stateDiagram.html

Can this be done? Revansx (talk) 20:03, 3 December 2024 (UTC)

Extension:External Data can now handle wiki links in the contexts like this: see https://traditio.wiki/Traditio:Test/ED/mermaid/2.Alexander Mashin ^talk 02:02, 20 December 2024 (UTC)

> Can this be done?

Not as far as I'm aware. —TheDJ (Not WMF) (talk • contribs) 20:52, 3 December 2024 (UTC)

Links are possible, but only with full URLs, see the following:

graph TD;
    A-->B;
    A-->C;
    B-->D(This is a LINK!);
    C-->D;
    click D "https://www.mediawiki.org/wiki/MediaWiki"

Bryandamon (talk) 20:54, 3 December 2024 (UTC)

@Bryandamon - Hi Bryan. Thanks, but that's only for the flowchart (i.e. "graph") mermaid charts. Here I'm asking about the "stateDiagram-v2" diagrams. Revansx (talk) 21:32, 4 December 2024 (UTC)

Update

I was able to get links to work by adding an html anchor in the state description. For example:

{{#mermaid: stateDiagram-v2
   state "<a href=https://www.mediawiki.org>Mediawiki</a>" as mediawiki
   state "<a href=Main_Page>Main Page</a>" as main_page
}}

Special care must be given to make sure that the <a> property does not contain any quotes.

Note - The first state (mediawiki) provides a fully qualified external link, the second state (mainpage) is treated by the mermaid extension as a local wiki link to the main page.

w00t!

/Rich Revansx (talk) 18:41, 5 December 2024 (UTC)

Styling the states of a stateDiagram-v2 diagram

MW 1.39, Mermaid 3.1.0

I have the following mermaid code in my wiki:

{{#mermaid: stateDiagram-v2
   state "My Organization" as myorg
   state "Alice" as myorg
}}

and I would like to style the state. According to: https://mermaid.js.org/syntax/stateDiagram.html I should be able to add:

classDef style1 fill:#f00

and

class myorg mystyle1

..and that should change the background of my state, however, when I try it as:

{{#mermaid: stateDiagram-v2
   state "My Organization" as myorg
   state "Alice" as myorg

   classDef style1 fill:#f00

   class myorg mystyle1
}}

..it causes the mermaid parser function to fail.

Is styling a mermaid stateDiagram-v2 diagram possible? Revansx (talk) 20:16, 3 December 2024 (UTC)

There's a small error in your class definition (class myorg style1 vs. class myorg mystyle1), you can see a working example here. I haven't checked this using the MW extension though. Bryandamon (talk) 20:52, 3 December 2024 (UTC)

@Bryandamon - Hi Bryan. The typo is only related to my attempt to make the example I posted generic.. My actual code is all work themed and I didn't want to post it here. So the class and classDef methods truly don't work for me.

Regardless, I was able to style them by adding the following CSS in the page (using Extension:CSS)

{{#css:
.node rect { stroke: #000!important; }
line.divider { stroke: #000!important; }
.statediagram-state > .label > foreignObject:first-child > div { width: 250px!important; }
.statediagram-state > .label > foreignObject:first-child > div > .nodeLabel { color: #fff!important; }
.statediagram-state > .label > foreignObject:not(:first-child) > div > .nodeLabel { text-align: left!important; }
}}

That actually works well! Revansx (talk) 21:35, 4 December 2024 (UTC)