[go: up one dir, main page]

Skip to content
This repository has been archived by the owner on Sep 16, 2019. It is now read-only.

Support the mermaid #125

Closed
chih7 opened this issue Nov 15, 2016 · 7 comments
Closed

Support the mermaid #125

chih7 opened this issue Nov 15, 2016 · 7 comments

Comments

@chih7
Copy link
chih7 commented Nov 15, 2016

mermaid can generate diagram and flowchart from text in a similar manner as markdown.

Some examples come from README:

CodeRendered diagram
                
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
                
            

Example 1

                
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 <br/>prevail...
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
                
            
Example 2
@chih7 chih7 closed this as completed Sep 14, 2017
@bestouff
Copy link

Why ? That would be fantastic !

@yhatt
Copy link
Owner
yhatt commented Oct 8, 2018

We've re-opened this issue. Certainly it is worth implementing, and it is mentioned from other issues (#150, #235).

We are planning to support mermaid.js in the core of Marp Next.

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```​

@yhatt yhatt reopened this Oct 8, 2018
@yhatt yhatt added the Supports in Marp Next The tagged issue has/would resolved in repos on @marp-team, and might close in near future. label Oct 8, 2018
@yhatt yhatt added Marp Next ◢◢ Issues for the new version (Marp Next by @marp-team) and removed Marp Next ◢◢ Issues for the new version (Marp Next by @marp-team) labels Oct 8, 2018
@ashutosh2411
Copy link

I would like to contribute to this issue. Is there a recent thread about the development of this particular feature?

@yhatt
Copy link
Owner
yhatt commented Oct 21, 2018

This issue is targeted to Marp Next, so you should implement it on marp-team/marp-core if you want to start working.

yhatt/marp is already not maintained, so any pull requests for this repo would not merge.

There is not a thread for this development because marp-core is not ready to accept contributing by lacking of the contributing guideline (only a team guideline is applied). However I think mermaid.js could support by changing the implementation of Marp.highlighter().

@yhatt
Copy link
Owner
yhatt commented Feb 7, 2019

I had tried to implement better support of Mermaid to Marp Core, but I have stopped work because it has several problems. We wait until the improvement of mermaid to support the non-browser environment.

I'll write down the working memos...

  • The easiest way to use mermaid is using markdown-it-mermaid plugin. But it is not working without web context. Marp Web is converting Markdown within Web Worker for performance, so it does not work.

  • Execute mermaid.initialize() in Marp.ready() is also working with conversion <div class="mermaid"> in highlighter(). However, it has blinking chart in Marp Web's live preview.

  • Marp for VS Code is supporting Markdown Preview mermaid support experimentally. Sadly the example graph has the incorrect text size.

---
marp: true
---

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```​

2019-02-07 18 58 14

@yhatt yhatt removed the Supports in Marp Next The tagged issue has/would resolved in repos on @marp-team, and might close in near future. label Apr 5, 2019
@mymmoonoa
Copy link

need support of mermaid...

@yhatt
Copy link
Owner
yhatt commented Jul 9, 2019

@mymmoonoa You can try to use mermaid.js directly via HTML as a workaround, only for Marp Next tools with enabled HTML.

# Mermaid

<div class="mermaid">
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
</div>

<!-- mermaid.js -->
<script src="https://unpkg.com/mermaid@8.1.0/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>
# Marp CLI
marp --html mermaid.md

mermaid

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants