# uml diagram

#### codenot

30 Oct, 2014 09:00 AM

can support uml diagram, like stackedit.io ?

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

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. Posted by fat on 18 Jul, 2017 01:23 PM

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 Posted by Brett on 18 Jul, 2017 02:21 PM

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.

-Brett

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

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. Posted by fat on 18 Jul, 2017 06:33 PM

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 Posted by Brett on 22 Jul, 2017 05:36 PM

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. Posted by fat on 24 Jul, 2017 07:22 AM

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!

## Internal reply

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

### »

#### 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 Blurs the current field

### Comment Form

r Focus the comment reply box Submit the comment

You can use Command ⌘ instead of Control ^ on Mac

## Recent Discussions

 21 May, 2018 07:33 PM Suggestion: rubberbanding for scrolling 21 May, 2018 04:40 PM Huge PDF sizes after 2.5.14 (947) update 18 May, 2018 03:09 PM Mathjax fails mid-document. 18 May, 2018 02:27 AM Custom Processor not running 2.5.13 and 2.5.14 18 May, 2018 02:08 AM GitHub style doesn't show blank lines when blank lines between bullet items

## Recent Articles

 Highlight sentences longer than a certain number of words In-app purchase issues (Error Domain=Paddle Code=0 "(null)") License code has already been utilized How do I retrieve a lost license (direct version) Custom CSS: Writing custom CSS for Marked