uml diagram

's Avatar


30 Oct, 2014 09:00 AM

can support uml diagram, like ?

  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


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

    fat's Avatar

    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:



    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.


  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.


  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 “" with content

    -------------- --------------
    # Title

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

    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/ and set up as a Preprocessor.

    echo -e "<script src=\"\"></script><script>mermaid.initialize({startOnLoad:true});</script>\n\n"

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

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

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

    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!

  8. 8 Posted by emuell on 27 Sep, 2018 05:49 AM

    emuell's Avatar

    Hello Brett,

    I am "digging out" that topic after a long time again, but I tried to follow the steps you mentioned two posts above.
    I created the "" script and added it as "Preporcessor" in the settings.
    Then I added the following lines to my text file.

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

    Unfortunately I did not get any diagram displayed on Marked 2.
    I am relatively new to markdown and Marked 2, but I would need to get the diagrams working in Marked 2 and have no glue where to start troubleshooting.
    Are there special settings to be set in the preferences (other than the preprocessing script)? Do I need to install something local to my machine?

    Please advise - Thank you a lot.

  9. 9 Posted by Travis on 01 Nov, 2018 05:38 AM

    Travis's Avatar

    I'm interested in this too, so a kind 'bump'.

    Specifically I'm interested in Mermaid with Gantt charts.

  10. 10 Posted by Steinthal on 23 Nov, 2018 04:19 PM

    Steinthal's Avatar

    I have downloaded mermaid.min.js and put this into a file that I include in my MD files if needed:

    <script src="/Users/myname/Documents/mermaid/mermaid.min-8.0.0-rc.8.js"></script>
          // theme: 'forest',
          // themeCSS: '.node rect { fill: red; }',
          logLevel: 3,
          flowchart: { curve: 'linear' },
          gantt: { axisFormat: '%Y-%m-%d' },
          sequence: { actorMargin: 50 },

    Additonally, I had to deselect "Process Markdown inside of HTML" on the Processor tab.

  11. 11 Posted by Bart Heerman on 29 Sep, 2019 12:50 PM

    Bart Heerman's Avatar

    I don't know why, but arrowheads are missing on the lines. I have the same problem. I don't know why this is happening...

  12. 12 Posted by Steinthal on 17 Mar, 2020 09:58 PM

    Steinthal's Avatar

    Looks like this problem has been solved with Version 2.5.39 (985) on Catalina 10.15.4 Beta (19E258a).

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


? 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