New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Mermaid formatting #241

Open
BsNoSi opened this Issue Sep 7, 2015 · 10 comments

Comments

Projects
None yet
2 participants
@BsNoSi
Copy link

BsNoSi commented Sep 7, 2015

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 cloose added the bug label Sep 9, 2015

@cloose cloose added this to the v0.11.2 milestone Sep 9, 2015

@cloose cloose self-assigned this Sep 9, 2015

@cloose

This comment has been minimized.

Copy link
Owner

cloose commented Sep 9, 2015

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:

mermaid_gantt

Thanks for the report!
Christian

@cloose

This comment has been minimized.

Copy link
Owner

cloose commented Sep 9, 2015

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

@cloose

This comment has been minimized.

Copy link
Owner

cloose commented Sep 9, 2015

Actually I was wrong with my last comment. 😄 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

This comment has been minimized.

Copy link

BsNoSi commented Sep 10, 2015

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

This comment has been minimized.

Copy link
Owner

cloose commented Sep 10, 2015

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 added a commit that referenced this issue Oct 13, 2015

cloose added a commit that referenced this issue Oct 13, 2015

cloose added a commit that referenced this issue Oct 13, 2015

@cloose

This comment has been minimized.

Copy link
Owner

cloose commented Jan 1, 2016

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

Christian

@cloose cloose closed this Jan 1, 2016

@BsNoSi

This comment has been minimized.

Copy link

BsNoSi commented Jan 2, 2016

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:

mermaid-true

But it results in that:

mermaid-false

I think, the difference is obvious.

@cloose

This comment has been minimized.

Copy link
Owner

cloose commented Jan 2, 2016

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

@cloose cloose reopened this Jan 2, 2016

@BsNoSi

This comment has been minimized.

Copy link

BsNoSi commented Jan 2, 2016

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

This comment has been minimized.

Copy link

BsNoSi commented Jan 4, 2016

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment