Home → Problems →

Using mermaid in Marked 2

• Edit

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

   

   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

   • Edit

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

   

   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];
   ```
   

   • Edit