Home → Suggestions →

Text -> Diagram Support

• Edit

PIerce Wetter

11 May, 2018 07:38 PM

There are a couple of sites I use all the time to make diagrams via a Markdown like style.

webseqeuncediagrams.com is one.
planttext.com (based on java plantuml) is another.

It would be nice if MMDC could support:

``` uml

Some diagram code

```

and preview mode would know to take the diagram code and run it through said converters to get a PNG back...

1. Support Staff 1 Posted by Fletcher on 14 May, 2018 05:53 AM

   

   Sorry for the delayed response -- I was out of town with limited internet access.

   Such a construct is not part of MultiMarkdown, so it isn't part of Composer.

   There would be some potential security issues with allowing arbitrary execution of commands inside documents. Overall, the way I would recommend adding extensions like this would be to link to javascripts in the metadata that perform the desired commands on code blocks with the specified language.

   This would work similarly to the way that you can perform syntax highlighting on fenced code blocks -- https://fletcher.github.io/MultiMarkdown-5/fences.html.

   Thanks for writing in, and I'll keep your suggestion in mind in case any other related ideas come up.

   Fletcher

   • Edit

2. Fletcher closed this discussion on 14 May, 2018 05:53 AM.

3. Pierce Wetter re-opened this discussion on 14 May, 2018 05:24 PM

4. 2 Posted by Pierce Wetter on 14 May, 2018 05:24 PM

   

   Fences is exactly how I was see this working, just think it would be nice to have it built in to preview.

   • Edit

5. Support Staff 3 Posted by Fletcher on 14 May, 2018 05:56 PM

   

   If it's done the way I describe it would appear in the preview.

   Sent from my iPhone

   • Edit

6. Support Staff 4 Posted by Fletcher on 14 May, 2018 06:08 PM

   

   Update: the links have changed for the highlighter js:

   <link rel="stylesheet"
         href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
   <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
   

   • Edit

7. 5 Posted by Pierce Wetter on 14 May, 2018 09:45 PM

   

   Ok, that's all cool, but a little confused on how to get this to work.

   For diagrams, planttext.com would return a PNG, similarly with graphviz.

   See attached file for my attempt from your sample at code formatting.

   • highlight_test.md 648 Bytes
   • Edit

8. Support Staff 6 Posted by Fletcher on 14 May, 2018 11:15 PM

   

   Those links are examples -- they only provide syntax highlighting for code blocks.

   You would need a different script that took the text from the code block, and then replaced it with the PNG (either in-line or via an image URL).

   Creating such a script is outside the scope of MultiMarkdown or MultiMarkdown Composer, but there's no reason that they would not be compatible with such scripts.

   • Edit