Add UML diagrams support

[shatteringlass]

I think this project could benefit from integrating such a useful feature as UML support for diagrams and flowcharts.
Two open source projects seem to have this feature:

• PyMdown's SuperFences
• umlsync

Unfortunately I don't have the skills to port this feature. This is just a feature request.

[uranusjr]

This looks interesting. The first seems to be based on js-sequence-diagrams, while the second uses its own implementation… I think. There are so many things in there I can’t make out what is what, and their website doesn’t seem to work.

Anyway, this should be possible to integrate with means similar to MathJax. I’ll look into it. Thanks for the suggestion!

[shatteringlass]

Maybe also Mermaid is worth checking out.

[uranusjr]

That’s a cool one too—thanks for the heads up! With that said, neither is particularly attractive at the moment, mainly because of their size: js-sequence-diagrams is about 200 KB with dependencies, and Mermaid is more than 500 KB (!). The main JavaScript library MacDown currently uses (excluding MathJax because it’s loaded through the Internet and is on its way out anyway) is Prism, which is usually less than 10 KB (depending on what languages you use).

I still think UML/flowchart would be a great addition, but I may have to rethink how to bundle it into MacDown. Hopefully I can make it do server-side rendering instead, but initial researching results aren’t that promising. :disappointed:

[frankis]

+1 for UML/Diagramming in general

I use it a lot, even though js-sequence-diagrams got many caveats one got to live with (no autosizing in somewhat complex diagrams leads to lines crossing "shapes" in a strange manner, however, I always thought markdown is just a hype, since using it I can´t imagine a daily life without it.

I love macdown, but got to stick with stackedit until macdown supports uml diagramming :(

[uranusjr]

Wow, didn’t even know StackEdit has it. Do you have any idea what tools they use for UMLs? I was also dissatisfied by js-sequence-diagrams during my initial investigation, but there don’t seem to be many alternatives.

[shatteringlass]

Look here. They create UML diagrams from plain text.

[uranusjr]

So they do use js-sequence-diagrams (and flowchart.js). I guess that is the only way to go then. Thanks for the info!

[frankis]

There are some alternatives (did´t test myself but looks somewhat easy to implement and use at least for basic operations - however, I am also not sure how/if they are maintained.

1. http://jumly.tmtk.net
2. http://plantuml.sourceforge.net
3. http://kangamodeling.codeplex.com

[avishaan]

+1 in general.

Also a fan of Mermaid for the diagrams and markdown-like syntax.

[epugh]

I love how nice MacDown is, and I like not having "yet another browser tab open", so here's hopoing this gets added!

Out of curiosity, you mentioned concerns about how big the JS files were to support these features, does it matter how big the MacDown download is?

[uranusjr]

Well, if the package is too big, it will be a pain to download, for one.

But the real issue is not the package size itself, but the application when it is launched. Every extra JavaScript library means another thing to load when MacDown renders the preview, and will inevitably slow things down a little bit. Now, loading 500 KB locally is not actually that much a problem, I’d admit, but you can make such a case for about a dozen other JavaScript add-ons, too, and if everyone of them is accepted, the slow-down will be apparent. I know from experience that adding a feature is simple, but taking it out is not. So my current approach is to try to err on the cautious side, adding only essential things to the core.

And no, I don’t consider UML essential, sorry. At least not now. That might change though, especially more and more people are now asking for it. This has to be solved somehow.

[epugh]

I see, so what you are saying is that you hit the load time on every render, versus 1 time only. That makes sense.

On Mar 5, 2015, at 1:15 PM, Tzu-ping Chung notifications@github.com wrote:

Well, if the package is too big, it will be a pain to download, for one.

But the real issue is not the package size itself, but the application when it is launched. Every extra JavaScript library means another thing to load when MacDown renders the preview, and will inevitably slow things down a little bit. Now, loading 500 KB locally is not actually that much a problem, I’d admit, but you can make such a case for about a dozen other JavaScript add-ons, too, and if everyone of them is accepted, the slow-down will be apparent. I know from experience that adding a feature is simple, but taking it out is not. So my current approach is to try to err on the cautious side, adding only essential things to the core.

And no, I don’t consider UML essential, sorry. At least not now. That might change though, especially more and more people are now asking for it. This has to be solved somehow.

— Reply to this email directly or view it on GitHub https://github.com/uranusjr/macdown/issues/224#issuecomment-77417559.

---

Eric Pugh | Principal | OpenSource Connections, LLC | 434.466.1467 | http://www.opensourceconnections.com http://www.opensourceconnections.com/ | My Free/Busy http://tinyurl.com/eric-cal
Co-Author: Apache Solr 3 Enterprise Search Server http://www.packtpub.com/apache-solr-3-enterprise-search-server/book This e-mail and all contents, including attachments, is considered to be Company Confidential unless explicitly stated otherwise, regardless of whether attachments are marked as such.

[seedotlee]

flowchart looks good.

[wangtai]

+1

[ratson]

+1 for mermaid support.

I have to use Haroopad because of this.

[skrach]

+1

[uranusjr]

Minor update for MacDown 0.6: It is now possible to manually include whatever script you want inside the rendered HTML. Crack open MacDown.app/Contents/Resources/Templates/Default.handlebars and add it anywhere (my recommendation is right before </body>).

Beware: This will be overwritten when you upgrade MacDown.

[avishaan]

Oh awesome!

Sent using CloudMagic [https://cloudmagic.com/k/d/mailapp?ct=pi&cv=6.0.64&pv=8.1.3] On Thu, Mar 17, 2016 at 8:54 PM, Tzu-ping Chung notifications@github.com wrote: Minor update for MacDown 0.6: It is now possible to manually include whatever script you want inside the rendered HTML. Crack open MacDown.app/Contents/Resources/Templates/Default.handlebars and add it anywhere (my recommendation is right before ).

Beware: This will be overwritten when you upgrade MacDown.

— You are receiving this because you commented. Reply to this email directly or view it on GitHub [https://github.com/MacDownApp/macdown/issues/224#issuecomment-198147903]

[yieme]

If you don't want to modify MacDown, I've found it useful to use http://plantuml.com/plantuml/form to take UML

:User: -> (MacDown)
(MacDown) -> [Awesome]

and get an image URL

[Jmuccigr]

Been looking at mermaid myself. There's a way to embed it in pandoc, so that might be a plus for macdown too.

[j5bot]

I've written a wrapper script which re-modifies the macdown default template every launch in order to introduce support for mermaid (and anything else you might want):

https://gist.github.com/j5bot/07216966b66a5899ebc94dad1f56aa0f

[j5bot]

unfortunately, some of the graph types aren't rendering properly ... some kind of css conflict? If you have some time to look I would appreciate it. I'll make a gist of a markdown document with mermaid uml in it for you to try ... https://gist.github.com/j5bot/55d3be79bd3e6ca7e4f60169843ec696

[haxpor]

I successfully tested it by having

<link rel="stylesheet" type="text/css" href="
https://cdnjs.cloudflare.com/ajax/libs/mermaid/6.0.0/mermaid.css">

and

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/6.0.0/mermaid.min.js"></script>
<script type="text/javascript">mermaid.initialize({startOnLoad:true});</script>

Might be the similar problem with @j5bot as first I included mermaid 's distribution files directly from its github raw file, that causes the problem of weird rendering, it turns out there's a MIME type problem shouting out when I exported it into HTML.

All in all, yay, macdown is my favorite with this I don't need to switch to other editors when I need to include mermaid support :)

Ref: mermaid hosted on CDNJS.