how can i render mermaid in slides? about vscode-reveal HOT 13 CLOSED

how can we enter newer mermaid diagrams such as https://mermaid-js.github.io/mermaid/#/gantt?id=syntax ?

it doesn't seem to work

gantt
    dateFormat  YYYY-MM-DD
    title Adding GANTT diagram functionality to mermaid

    section A section
    Completed task            :done,    des1, 2014-01-06,2014-01-08
    Active task               :active,  des2, 2014-01-09, 3d
    Future task               :         des3, after des2, 5d
    Future task2              :         des4, after des3, 5d

    section Critical tasks
    Completed task in the critical line :crit, done, 2014-01-06,24h
    Implement parser and jison          :crit, done, after des1, 2d
    Create tests for parser             :crit, active, 3d
    Future task in critical line        :crit, 5d
    Create tests for renderer           :2d
    Add to mermaid                      :1d

    section Documentation
    Describe gantt syntax               :active, a1, after des1, 3d
    Add gantt diagram to demo page      :after a1  , 20h
    Add another diagram to demo page    :doc1, after a1  , 48h

    section Last section
    Describe gantt syntax               :after doc1, 3d
    Add gantt diagram to demo page      :20h
    Add another diagram to demo page    :48h

from vscode-reveal.

Hi,

Actually it's not possible. Thank for asking.

I will add this plugin https://github.com/ludwick/reveal.js-mermaid-plugin

Maybe in Version 3

from vscode-reveal.

Not yet ...

from vscode-reveal.

Shoud be good :)

from vscode-reveal.

Can be closed no?

from vscode-reveal.

@evilz could we re-open this one ?

from vscode-reveal.

Is this already possible? Should it be reopened?

from vscode-reveal.

In case anybody's confused with the syntax this should be good:

<div class="mermaid">
graph LR;
  A(AAAA)==> B(B node);
  B==> C(SEE SEE);

  class A diag-a-styles;
  class B diag-b-styles
  class C diag-c-styles;
</div>

You can find more examples in the sample

from vscode-reveal.

more complex gantt diagrams also don't work for me, like in the case above from @rvion

from vscode-reveal.

I think the problem might be that the mermaid plug-in inside vscode-reveal is the old one?

When one plug-in depends on another and its code is copied as part of its deployment, then new features won't work until the main plugin (vscode-reveal) integrates and re-releases the newest. I saw this with other reveal plugins here (can't remember which one it was, but I managed to hack the update in my install (libs folder?) to get the feature). I think you could do the same as a workaround.

from vscode-reveal.

maybe you are right.
I should update a lot of stuff ... PR is welcome ;p

from vscode-reveal.

@evilz I think I could make the update changes, but how do you build/test this plugin normally? I'm not new to TypeScript or VSCode, but never did a VSCode plug-in. Is there a quick-start you follow?

from vscode-reveal.

@evilz OK, I got the jest tests to pass, but it seems the extension still has the vscode dependency. Would you agree to migrate it per this explanation?

from vscode-reveal.