Mermaid formatting

[BsNoSi]

I tried the GANTT examples of mermaid (http://knsv.github.io/mermaid/gantt.html) or subgraph. In general it works. But black background with black arrows does not look nice. Try this:

gantt
    title A Gantt Diagram

    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    anther task      : 24d

Where/how can I configure the styling of mermaid? I tried the hints given in the mermaid examples, but they do not work.

[cloose]

There seems to be missing at least the "mermaid.css" stylesheet from the mermaid distribution. I will fix this with the next minor release. Afterwards it will look like this:

Thanks for the report! Christian

[cloose]

As you can see, it still has problems. So I will further investigate what is missing in addition.

[cloose]

Actually I was wrong with my last comment. :smile: For the look from the mermaid docs, there is additional configuration needed:

<script>
            mermaid.ganttConfig = {
                titleTopMargin:25,
                barHeight:20,
                barGap:4,
                topPadding:50,
                sidePadding:100,
                gridLineStartPadding:35,
                fontSize:11,
                numberSectionStyles:4,
                axisFormatter: [
                    // Within a day
                    ["%I:%M", function (d) {
                        return d.getHours();
                    }],
                    // Monday a week
                    ["w. %U", function (d) {
                        return d.getDay() == 1;
                    }],
                    // Day within a week (not monday)
                    ["%a %d", function (d) {
                        return d.getDay() && d.getDate() != 1;
                    }],
                    // within a month
                    ["%b %d", function (d) {
                        return d.getDate() != 1;
                    }],
                    // Month
                    ["%m-%y", function (d) {
                        return d.getMonth();
                    }]
                ]
            };
</script>

[BsNoSi]

Where can/shall I add this script?

Is this to be done each file or (much better) is there a way, to place my preset anywhere and it is used, if I want to us "mermaids"?

[cloose]

Unfortunately it's still not possible to create custom templates for the HTML generation in CuteMarked (see #49). So you will have to add this script either directly into the markdown document or move it to a separate file and link to it from the markdown document.

[cloose]

This bug should be fixed with version 0.11.2. Thanks for your report!

Christian

[BsNoSi]

Happy New Year!

I tested GANTT with new version (0.11.2) by comparing results of Mermaid-page (demo code) with result of CuteMarkED. The challenge still exists. In CMED all bars are black. This makes it impossible to see the state of a task (done, critical, …). You can compare by yourself, I used this demo code from mermaid homepage.

I do not miss the coloring of the demo page. But if I cannot distinguish between "done", "critical" or "task", a main function of a GANTT diagram is missing.

This code:

gantt
title Ein Gantt-Diagramm
dateFormat DD.MM.YYYY
section Start
  Vorbereitung :done, s0,01.01.2016,1d
  Kickoff  :s1, 02.01.2016, 1d
section Aufgaben
  Doku   :active, d1, after s1, 3d
  Machen :active, d2, after d1, 2d
  Kontrolle :active, crit, d3, after d2, 1d
section ToDo
  Einkaufen gehen :f1,05.01.2016, 4h
  Telefonat mit Thomas :f2, 07.01.2016, 1h

Should look like this:

But it results in that:

I think, the difference is obvious.

[cloose]

Hi @BsNoSi,

It seems to be important to set the numberSectionStyles option in the ganttConfig configuration object per JavaScript.

The following markdown example returns your expected result:

~~~mermaid
gantt
title Ein Gantt-Diagramm
dateFormat DD.MM.YYYY
section Start
  Vorbereitung :done, s0,01.01.2016,1d
  Kickoff  :s1, 02.01.2016, 1d   
section Aufgaben
  Doku   :active, d1, after s1, 3d
  Machen :active, d2, after d1, 2d
  Kontrolle :active, crit, d3, after d2, 1d
section ToDo
  Einkaufen gehen :f1,05.01.2016, 4h
  Telefonat mit Thomas :f2, 07.01.2016, 1h
~~~

<script>
mermaid.ganttConfig = {
    numberSectionStyles:3
};
</script>

Unfortunately I'm not sure how to best present this configuration to the user. Maybe I will set this configuration to at least 1.

Any ideas?

Thank you Christian

[BsNoSi]

Ah! I see. It is quite simple, if there is an idea, how. Maybe the most elegant solution currently is a snippet with my presets for mermaid. As a general preset I would prefer "2" because this alternates the rows for each section with a background color.

Thanks for this fast solution.

[BsNoSi]

Because of this support — yours an of mermaid ;) — I wrote an additional article in my (german) blog.