Mermaid Diagrams in Documents

Nick Wynja's Avatar

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?


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

    Brett's Avatar

    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;
    var diff = document.getElementById('firstdiff'); diff.parentNode.removeChild(diff);
    <script src="mermaid.full.min.js"></script>

    (Using Discount processor)

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

    Nick Wynja's Avatar

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

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

    Nick Wynja's Avatar

    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.

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

    Brett's Avatar

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

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

    Brett's Avatar

    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.

        participant Alice
        participant Bob
        Alice->John: Hello Johns, how are you?
        loop Healthcheck
            John->John: Fight against hypochondria
        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.

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:


Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts


? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac