uml diagram

's Avatar

codenot

30 Oct, 2014 09:00 AM

can support uml diagram, like stackedit.io ?

  1. Support Staff 1 Posted by Brett on 30 Oct, 2014 12:57 PM

    Brett's Avatar

    It's possible by including flowchart.js. You could have a custom
    preprocessor that inserted this automatically when certain markup was
    detected. When I get time, I'll write up how to do it as a knowledgebase
    article.

    -Brett

  2. 2 Posted by fat on 18 Jul, 2017 01:23 PM

    fat's Avatar

    Hi,
    I've recently bought Marked 2 because of it's astonishing capabilities.

    Because I'm using mermaid / flowchart.js / js-sequence libraries on a regular basis, I hoped to find a way to use these tools in conjunction with your great too.

    But I did not get the point of about how to use preprocessor to achieve this.

    Any help is appreciated, thanks!

  3. Support Staff 3 Posted by Brett on 18 Jul, 2017 02:21 PM

    Brett's Avatar

    Hi Michael,

    These may help:

    -
    http://support.markedapp.com/discussions/questions/8184-mermaid-diagrams-in-documents

    -
    http://support.markedapp.com/discussions/problems/106381-external-html-file

    You don't necessarily need a custom processor, you can just include
    markup in the document to link a script, etc. A pre-processor could
    insert the script tag into every document automatically, but let me know
    if that's a necessity for you.

    -Brett

  4. 4 Posted by fat on 18 Jul, 2017 06:24 PM

    fat's Avatar

    Hi Bett,

    thank you very much for quick response.

    I think I need some time to swallow that.
    Seems I have underestimated it’s complexity.

    Best,
    Michael

  5. 5 Posted by fat on 18 Jul, 2017 06:33 PM

    fat's Avatar

    Hi Brett,

    thanks again for response!

    As far I understood there is no easy way to take a file “test.md" with content

    -------------- test.md --------------
    # Title

    ## Sequences are easy to be displayed
    ​```sequence
    Alice->Bob: Hello Bob, how are you?
    Note right of Bob: Bob thinks
    Bob-->Alice: I am good thanks!
    ​```
    -------------- test.md --------------

    hand it over to Marked 2 and get something like the image below, right?

  6. Support Staff 6 Posted by Brett on 22 Jul, 2017 05:36 PM

    Brett's Avatar

    Sorry for the delayed response to this one,

    Essentially you could create a simple preprocessor script that just inserted a script tag for mermaid.js before the rest of the document. Here's an example you can save somewhere like ~/Library/Scripts/mermaid.sh and set up as a Preprocessor.

    #!/bin/bash
    
    echo -e "<script src=\"https://cdn.rawgit.com/knsv/mermaid/6.0.0/dist/mermaid.min.js\"></script><script>mermaid.initialize({startOnLoad:true});</script>\n\n"
    cat
    

    In my testing, this works, although your syntax needs to look more like this:

    <div class="mermaid">
    sequenceDiagram
    John-->Alice: Great!
    John->Bob: How about you?
    Bob-->John: Jolly good!
    </div>
    

    You can do it with backticks, but then you'll get code formatting in addition to mermaid's formatting:

    ```mermaid
    sequenceDiagram
    John-->Alice: Great!
    John->Bob: How about you?
    Bob-->John: Jolly good!
    ```
    

    I'm going to have to put this one in my queue to play with once I solve some more general bugs around the upcoming update release. I'll let you know if I have any more suggestions in this area.

  7. 7 Posted by fat on 24 Jul, 2017 07:22 AM

    fat's Avatar

    Hi Brett,
    thank you for detailled explanation!

    Will try this approach - I probably need to involve sed or something else because I'm using mermaid and similar tools with other markdown tools on other platforms also.

    Anyway, it would be great if you could keep this on your queue!

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac