Mermaid Tutorial (setup)

If you do not already know Mermaid diagrams [↗] makes it possible to create diagrams within your Markdown or HTML.

Mermaid diagrams might not yet be supported within your CMS in which case you might have to include the JS library to enable it.

Once you are done pulling in the library, the next step will be to wrap your Mermaid instructions within a pre tag with the class set to mermaid.

Here is a complete example below:

🚫 Wrap Code📋 Copy
01: <pre class="mermaid">
02: flowchart TD
03:     A[eddymens.com] -->|reads an article| B(Views course)
04:     B --> C{Signs up for course}
05:     C -->|One| D[Laptop]
06:     C -->|Two| E[iPhone]
07:     C -->|Three| F[fa:fa-car Car]
08: </pre>
09: 
10: <script type="module">
11:   import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
12: </script>

flowchart TD
    A[eddymens.com] -->|reads an article| B(Views course)
    B --> C{Signs up for course}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]

Here is another article you might like 😊 "Diary Of Insights: A Documentation Of My Discoveries"