Home → Suggestions →

uml diagram

• Edit

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

   

   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

   • Edit

2. 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!

   • Edit

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

   

   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

   • Edit

4. 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

   • Edit

5. 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?

   • Screen_Shot_2017-07-18_at_20.31.27.png 86.9 KB
   • Edit

6. Support Staff 6 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.

   • Edit

7. 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!

   • Edit

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

   

   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 "mermaid.sh" script and added it as "Preporcessor" in the settings.
   Then I added the following lines to my text file.

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

   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.

   • Edit

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

   

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

   Specifically I'm interested in Mermaid with Gantt charts.

   • Edit

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

    

    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>
    <script>
    mermaid.initialize({
          // theme: 'forest',
          // themeCSS: '.node rect { fill: red; }',
          logLevel: 3,
          flowchart: { curve: 'linear' },
          gantt: { axisFormat: '%Y-%m-%d' },
          sequence: { actorMargin: 50 },
    })
    </script>
    

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

    • screenshot_mermaid_test_2.png 75.5 KB
    • Edit

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

    

    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...

    • Edit

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

    

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

    • Edit