tag:support.markedapp.com,2011-09-11:/discussions/suggestions/40540-uml-diagramMarked: Discussion 2020-12-18T09:18:58Ztag:support.markedapp.com,2011-09-11:Comment/351243222014-10-30T12:57:13Z2014-10-30T12:57:13Zuml diagram<div><p>It's possible by including flowchart.js. You could have a
custom<br>
preprocessor that inserted this automatically when certain markup
was<br>
detected. When I get time, I'll write up how to do it as a
knowledgebase<br>
article.</p>
<p>-Brett</p></div>Bretttag:support.markedapp.com,2011-09-11:Comment/351243222017-07-18T13:23:22Z2017-07-18T13:24:38Zuml diagram<div><p>Hi,<br>
I've recently bought Marked 2 because of it's astonishing capabilities.</p>
<p>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.</p>
<p>But I did not get the point of about how to use preprocessor to achieve this.</p>
<p>Any help is appreciated, thanks!</p></div>fattag:support.markedapp.com,2011-09-11:Comment/351243222017-07-18T14:21:34Z2017-07-18T14:21:34Zuml diagram<div><p>Hi Michael,</p>
<p>These may help:</p>
<ul>
<li>
<p><a href="http://support.markedapp.com/discussions/questions/8184-mermaid-diagrams-in-documents">http://support.markedapp.com/discussions/questions/8184-mermaid-dia...</a></p>
</li>
<li>
<p><a href="http://support.markedapp.com/discussions/problems/106381-external-html-file">http://support.markedapp.com/discussions/problems/106381-external-h...</a></p>
</li>
</ul>
<p>You don't necessarily need a custom processor, you can just include<br>
markup in the document to link a script, etc. A pre-processor could<br>
insert the script tag into every document automatically, but let me know<br>
if that's a necessity for you.</p>
<p>-Brett</p></div>Bretttag:support.markedapp.com,2011-09-11:Comment/351243222017-07-18T18:24:02Z2017-07-18T18:24:02Zuml diagram<div><p>Hi Bett,</p>
<p>thank you very much for quick response.</p>
<p>I think I need some time to swallow that.<br>
Seems I have underestimated it’s complexity.</p>
<p>Best,<br>
Michael</p></div>fattag:support.markedapp.com,2011-09-11:Comment/351243222017-07-18T18:33:10Z2017-07-18T18:33:11Zuml diagram<div><p>Hi Brett,</p>
<p>thanks again for response!</p>
<p>As far I understood there is no easy way to take a file “test.md" with content</p>
<p>-------------- test.md --------------</p>
<h1><a name="title" class="anchor" href="#title"></a>Title</h1>
<h2><a name="sequences-are-easy-to-be-displayed" class="anchor" href="#sequences-are-easy-to-be-displayed"></a>Sequences are easy to be displayed</h2>
<p>​<code>sequence Alice->Bob: Hello Bob, how are you? Note right of Bob: Bob thinks Bob-->Alice: I am good thanks! ​</code> -------------- test.md --------------</p>
<p>hand it over to Marked 2 and get something like the image below, right?</p></div>fattag:support.markedapp.com,2011-09-11:Comment/351243222017-07-22T17:36:25Z2017-07-22T17:36:49Zuml diagram<div><p>Sorry for the delayed response to this one,</p>
<p>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 <a href="http://marked2app.com/help/Custom_Processor.html">Preprocessor</a>.</p>
<pre>
<code>#!/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</code>
</pre>
<p>In my testing, this works, although your syntax needs to look more like this:</p>
<pre>
<code><div class="mermaid">
sequenceDiagram
John-->Alice: Great!
John->Bob: How about you?
Bob-->John: Jolly good!
</div></code>
</pre>
<p>You can do it with backticks, but then you'll get code formatting in addition to mermaid's formatting:</p>
<pre>
<code>```mermaid
sequenceDiagram
John-->Alice: Great!
John->Bob: How about you?
Bob-->John: Jolly good!
```</code>
</pre>
<p>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.</p></div>Bretttag:support.markedapp.com,2011-09-11:Comment/351243222017-07-24T07:22:33Z2017-07-24T07:22:33Zuml diagram<div><p>Hi Brett,<br>
thank you for detailled explanation!</p>
<p>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.</p>
<p>Anyway, it would be great if you could keep this on your queue!</p></div>fattag:support.markedapp.com,2011-09-11:Comment/351243222018-09-27T05:49:35Z2018-09-27T05:49:35Zuml diagram<div><p>Hello Brett,</p>
<p>I am "digging out" that topic after a long time again, but I tried to follow the steps you mentioned two posts above.<br>
I created the "mermaid.sh" script and added it as "Preporcessor" in the settings.<br>
Then I added the following lines to my text file.</p>
<pre>
<code><div class="mermaid">
sequenceDiagram
John-->Alice: Great!
John->Bob: How about you?
Bob-->John: Jolly good!
</div></code>
</pre>
<p>Unfortunately I did not get any diagram displayed on Marked 2.<br>
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.<br>
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?</p>
<p>Please advise - Thank you a lot.</p></div>emuelltag:support.markedapp.com,2011-09-11:Comment/351243222018-11-01T05:38:13Z2018-11-01T05:38:14Zuml diagram<div><p>I'm interested in this too, so a kind 'bump'.</p>
<p>Specifically I'm interested in Mermaid with Gantt charts.</p></div>Travistag:support.markedapp.com,2011-09-11:Comment/351243222018-11-23T16:19:31Z2018-11-23T16:19:31Zuml diagram<div><p>I have downloaded mermaid.min.js and put this into a file that I include in my MD files if needed:</p>
<pre>
<code><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></code>
</pre>
<p>Additonally, I had to deselect "Process Markdown inside of HTML" on the Processor tab.</p></div>Steinthaltag:support.markedapp.com,2011-09-11:Comment/351243222019-09-29T12:50:31Z2019-09-29T12:50:32Zuml diagram<div><p>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...</p></div>Bart Heermantag:support.markedapp.com,2011-09-11:Comment/351243222020-03-17T21:58:41Z2020-03-17T21:58:41Zuml diagram<div><p>Looks like this problem has been solved with Version 2.5.39 (985) on Catalina 10.15.4 Beta (19E258a).</p></div>Steinthal