Home → Questions →

MermaidJS support

• Edit

Alex

11 Mar, 2019 08:15 PM

Is it possible to have the previews of https://mermaidjs.github.io diagrams in the Composer?
Perhaps including it from https://unpkg.com/mermaid@8.0.0/dist/mermaid.min.js
I found this feature in the Typora editor.

1. Support Staff 1 Posted by Fletcher on 12 Mar, 2019 11:34 PM

   

   Sorry for the delay.

   You can include whatever javascript you like in the file's metadata. No need to wait on me! ;)

   More information is available in the MultiMarkdown user's guide:

   https://fletcher.github.io/MultiMarkdown-6/syntax/metadata.html#htmlheader

   Fletcher

   --
   Fletcher T. Penney
   Manager, Founder
   MultiMarkdown Software, LLC
   [email blocked]

   • smime.p7s 3.8 KB
   • Edit

2. 2 Posted by Alexander Pavle... on 14 Mar, 2019 05:43 PM

   

   Thanks! It does work, but only when I hit Command+R, after each edit
   preview turns into plain-text. I wonder how to make it automatic.
   Example:
   HTML footer: <script src="
   https://unpkg.com/mermaid@8.0.0/dist/mermaid.min.js
   "></script><script>mermaid.initialize();</script>
   <div class="mermaid">
   graph TD
   test
   </div>

   • Edit

3. Support Staff 3 Posted by Fletcher on 14 Mar, 2019 06:38 PM

   

   Most scripts that I have seen are only run when page first loads. Not if the page content changes.

   You could modify the script to run more often. How to do that depends on the script.

   You can set Composer’s preferences to reload the entire page every time it updates. This works but may not give the visual experience you desire.

   Or you can refresh manually when you need to see a meaningful change.

   Only you can decide which option is best for you.

   Sent from my iPhone

   • Edit