Home → Questions →

Mermaid Diagrams in Documents

• Edit

Nick Wynja

14 Jan, 2015 02:52 PM

Hi Brett,

I've started using Mermaid to render plain text to diagrams in my personal wiki and would like to use Mermaid for document outputs as well.

What's the best way to go about doing this?

Thanks,
—Nick

1. Support Staff 1 Posted by Brett on 14 Jan, 2015 04:43 PM

   

   The two issues you'll run into are typographic processing taking over within the diagram and converting things like --> to —>, and the #firstdiff element that is used to mark the latest change, which will show up inside the diagram div when you're editing within it.

   The first issue can be solved by turning off "Generate typographically correct..." in the Style preferences, or by just using the Discount (GFM) processor, which shouldn't run SmartyPants. If you're using a custom processor, you may have some luck adding "markdown=0" to the attributes on the .mermaid div, which in many cases prevents any Markdown processing within that particular block element.

   The second issue is more complicated because Marked generates the diff element even if you've disabled scroll to edit. In order to have the diagram render properly while editing within it, you need to remove the diff marker manually. The following code is working for me:

   <div class="mermaid">
   graph TD;
       A-->B;
       A-->C;
       B-->D;
       C-->D;
   </div>
   
   <script>
   var diff = document.getElementById('firstdiff'); diff.parentNode.removeChild(diff);
   </script>
   <script src="mermaid.full.min.js"></script>
   

   (Using Discount processor)

   • Edit

2. 2 Posted by Nick Wynja on 14 Jan, 2015 04:49 PM

   

   Bingo. Add this to the "Beers I Owe You" tab.

   • Edit

3. 3 Posted by Nick Wynja on 14 Jan, 2015 07:35 PM

   

   Also useful here: I've used the <<{folder/raw_file.html} unprocessed text or html include braces to include a file with my Marmaid markup and am able to keep smart typography on.

   • Edit

4. Support Staff 4 Posted by Brett on 14 Jan, 2015 09:54 PM

   

   Good god I forgot I had that option. That was actually the main reason I
   initially added the raw include... doh.

   • Edit

5. Support Staff 5 Posted by Brett on 27 Sep, 2018 01:32 PM

   

   I got it to work by turning off Smart Typography in Preferences->Style->Generate typographically correct quotes and punctuation. You can also do it by using a fenced code block (see below) instead of a paragraph, but only if you turn off Syntax Highlighting in Style preferences.

   ```mermaid
   sequenceDiagram
       participant Alice
       participant Bob
       Alice->John: Hello Johns, how are you?
       loop Healthcheck
           John->John: Fight against hypochondria
       end
       Note right of John: Rational thoughts <br/>prevail...
       John-->Alice: Great!
       John->Bob: How about you?
       Bob-->John: Jolly good!
   ```
   

   I may work on a better solution for this, but that's what I've got right now.

   • Edit