Extension talk:Mermaid

Jump to navigation Jump to search

About this board

Set "axisFormat" for Gantt charts

1
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!


Thanks!

Using Mermaid with SMW SRF (SEP issue)

2
Summary by Revansx

SOLVED - the solution was .. wait for it.. to add a CR/LF to the beginning of the "Foo-item" template.

Revansx (talkcontribs)

I'm trying to use SMW SRF to return the results of a ASK statement as lines of unprocessed text within some other parser call (say Mermaid [1])

Here is an example of the parser function result I'm trying to emulate:

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

Here is the way I am coding it:

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

It works perfectly for a single result but not for multiple results.

Here is what the resulting html source looks like:

<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>

By inspecting the html source of the rendered page, I can see that the problem is that the "\" in the SEP of the results is ultimately getting printed as "\\n" in the final HTML.

I know that what it needs to be to work is this:

<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 anyone know a way that I can avoid having the SRF output formatter (or the MW output formatter) add the extra "\" to the "\n"?

[1] Extension:Mermaid

Revansx (talkcontribs)

SOLVED - the solution was .. wait for it.. to add a CR/LF to the beginning of the "Foo-item" template.

The 3 tricks to getting Mermaid to receive events information from SMW queries are:

  1. use the format=template SRF call pointing to a template that contains the wikitext:
    
    {{{2|Milestone Name}}}: {{{3|2000-01-01}}}, 1d
    
  2. notice that the template begins with a "CR/LF". This is crucial for the Mermaid parser call to process properly.
  3. use the "import-annotation=true" option in the SMW query to shut off the [[SMW::off/on]] tags.

I'm now able to make great Gantt charts with my site.

MW + SMW + SRF + Mermaid = Project Management in a Wiki.

help with SMW query results in Mermaid Gantt

4
Summary by Revansx

SOLVED!!! - happy to report that I figured it out.. turns out that I needed to add the parameter "import-annotation=true" to my #ask.

Revansx (talkcontribs)

trying to generate milestones in a gantt chart with Mermaid using inline SMW querries and the "template" SRF format. I have the following wiki text in a page:

{{#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
  }}
}}

and page "Template:Mermaid Milestone" is simply:

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

but it doesn't work.. an inspection of the generated html (view source) shows this:

<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>

the mermaid code that the SMW #ask statement should have rendered int is this:

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

The problem seems to be the SMW::off/on

Revansx (talkcontribs)

the text:

Milestone1: 2018-11-19, 1d

is exactly what I'm striving for.. it's just that for some reason i'm getting

[[SMW::off]]Milestone1: 2018-11-19, 1d[[SMW::on]]

which is breaking it.

How do I solve this?

Revansx (talkcontribs)

SOLVED!!! - happy to report that I figured it out.. turns out that I needed to add the parameter "import-annotation=true" to my #ask.

The following now works:


{{#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
    |import-annotation=true
  }}
}}
Revansx (talkcontribs)

Does this extension support arrows on graphs

1
Summary by Revansx

not sure what changed but the problem is gone

Revansx (talkcontribs)

I'm using this extension to create graphs such as:

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

It works except that the connecting line as just a line and is not an arrow. Are arrow tips not supported by the mediawiki use of mermaid?

Is SemanticMediaWiki Required?

4
Quiddity (talkcontribs)

This extension is intriguing! I was writing notes about my desire for just such a tool, a few months ago.

Is SemanticMediaWiki required, or is it just in that github repository for convenience? Thanks.

Revansx (talkcontribs)

Same here. I can not understate my interest in this extension. More detail please.

Lbillett (talkcontribs)

We've been mulling over a diagram visualization extension for a while and haven't committed. Been playing with a home-brew cytoscapejs extension that seemed to be the most promising. Right up until I got to play with this. Is going to mean updating our MW and PHP versions, but Mermaid could be a big enough carrot to get us over those.

I think we could create an maintain electrical distribution and steam piping single line diagrams with something like this. Would beat the pants of actually having to draw them.

MWJames (talkcontribs)

No (I believe the requirements section makes it clear as to what is requirement and whatnot.)

Revansx (talkcontribs)

Mermaid works great except in Internet Explorer (IE) .. is there a way to get IE to work?

MWJames (talkcontribs)

Documenting all of the Gantt features?

3
Revansx (talkcontribs)

I'm making Gantt plots using Mermaid in my EMW site and I have successfully used all of the capabilities as found in the very short gantt example on the project page.. and now i'd like to do more. Where in the mermaid code are the gantt features coded.. I'm happy to look through that to discover the (presumed) additional capabilities, but I'l like some definitive guidance. I'll be happy to post my discoveries here for the benefit of all as I am successful. that said -- I wish to set the end date of a task to be the completion date of another task.. I'm trying to discover if that is possible?, and if so, how.

Revansx (talkcontribs)

and.. how can I set the color of a section?

MWJames (talkcontribs)
There are no older topics