Using mermaid in Marked 2

Nigel Metheringham's Avatar

Nigel Metheringham

06 Feb, 2020 11:32 AM

Hi,

I see there are previous discussions on the use of marmaid within Marked - in particular http://support.markedapp.com/discussions/questions/8184-mermaid-dia... - however I am having problems making this work for me.

I am writing documents up that will mostly be read in gitlab and so want to work with their style of mermaid support - see https://docs.gitlab.com/ee/user/markdown.html#diagrams-and-flowcharts - and preview in Marked. So I want to use this style:-

graph TD;  
  A-->B;
  A-->C;
  B-->D;
  C-->D;
<pre><code>
However I cannot make this work in Marked, and the settings Brett refers to the linked discussion - *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.* - are no longer in the same place, nor seem to have the same effect.

Any suggestions please..

Nigel.</code>
</pre>
  1. Support Staff 1 Posted by Brett on 06 Feb, 2020 12:49 PM

    Brett's Avatar

    The settings have not moved, and to the best of my knowledge have the
    exact same effect. I'm not in a position to test this at the moment as
    Marked does not provide any official support for MermaidJS, but nothing
    has changed that should invalidate those previous discussions.

    -Brett

  2. Support Staff 2 Posted by Brett on 06 Feb, 2020 04:32 PM

    Brett's Avatar

    Just to clarify, here are the settings mentioned:

    With these settings, the following renders properly:

    <script src="https://unpkg.com/mermaid@8.4.0/dist/mermaid.min.js"></script>
    
    # Frequently Asked Questions
    
    Documentation coming soon!
    
    ```mermaid
    graph LR
          A --- B
          B-->C[fa:fa-ban forbidden]
          B-->D[fa:fa-spinner ok];
    ```
    

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

Generic

? 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