Quick guide to setup and configure MermaidJS for websites.

This code…

Write your Mermaid diagram source inside a fenced block. The code below is the raw init config and sequence diagram that drives the example:

sequence.md Mermaid 
%%{
    init: {
        'theme': 'base',
        'wrap': true,
        'fontSize': 10,
        'themeVariables': {
            'darkMode': false,
            'primaryColor': '#6CA142',
            'primaryTextColor': '#E8F0E0',
            'primaryBorderColor': '#245228',
            'lineColor': '#F8B229',
            'secondaryColor': '#006100',
            'tertiaryColor': '#fff',
            'signalColor': '#E8F0E0'
        }
    }
}%%

sequenceDiagram
    Donor->>Project Coordinator: 1. Donor makes inquiry regarding the Masjid project.
    Project Coordinator->>Donor: 2. Provides information regarding options available for Masjids to donor.
    Donor->>Project Coordinator: 3. Donor learns and decide country and size of the Masjid they would prefer.
    Project Coordinator->>Donor: 4. When the donor decides, a written agreement is made & payment is finalized.
    Donor->>Project Coordinator: 5. Donor signs the agreement and pays in full or as 3 phases.
    Project Coordinator->>Partner Side: 6. Then Geo Location is requested.
    Partner Side->>Project Coordinator: 7. Location is provided.
    Project Coordinator->>Donor: 8. Banners & posters are made & shared with donors.
    Donor->>Project Coordinator: 9. Banners & posters are approved.
    Project Coordinator->>Partner Side: 10. Masjid is given for construction along with approved banners.
    Partner Side->>Project Coordinator: 11. Construction updates are shared.
    Project Coordinator->>Donor: 12. Updates & completion photos are shared to donors.
    Donor->>Project Coordinator: 13. The Masjid Project is completed & final media is received.
    Partner Side->>Project Coordinator: 14. Payment is requested for the Masjid.
    Project Coordinator->>Finance Dept.: 15. Payment request is crosschecked with data.
    Finance Dept.->>Partner Side: 16. Payment is processed and sent to partner.

…will generate this chart.

When MermaidJS is loaded on the page, the block below renders as a live interactive diagram. The fenced mermaid class triggers automatic rendering by the Mermaid script.

index.html — rendered mermaid block HTML 
<pre class="mermaid">
%%{
    init: {
        'theme': 'base',
        'wrap': true,
        'fontSize': 10,
        'darkMode': false,
        'themeVariables': {
            'primaryColor': '#6CA142',
            'primaryTextColor': '#E8F0E0',
            'primaryBorderColor': '#245228',
            'lineColor': '#F8B229',
            'secondaryColor': '#006100',
            'tertiaryColor': '#fff',
            'signalColor': '#E8F0E0'
        }
    }
}%%

sequenceDiagram
    Donor->>Project Coordinator: 1. Donor makes inquiry regarding the Masjid project.
    Project Coordinator->>Donor: 2. Provides information regarding options available for Masjids to donor.
    Donor->>Project Coordinator: 3. Donor learns and decide country and size of the Masjid they would prefer.
    Project Coordinator->>Donor: 4. When the donor decides, a written agreement is made & payment is finalized.
    Donor->>Project Coordinator: 5. Donor signs the agreement and pays in full or as 3 phases.
    Project Coordinator->>Partner Side: 6. Then Geo Location is requested.
    Partner Side->>Project Coordinator: 7. Location is provided.
    Project Coordinator->>Donor: 8. Banners & posters are made & shared with donors.
    Donor->>Project Coordinator: 9. Banners & posters are approved.
    Project Coordinator->>Partner Side: 10. Masjid is given for construction along with approved banners.
    Partner Side->>Project Coordinator: 11. Construction updates are shared.
    Project Coordinator->>Donor: 12. Updates & completion photos are shared to donors.
    Donor->>Project Coordinator: 13. The Masjid Project is completed & final media is received.
    Partner Side->>Project Coordinator: 14. Payment is requested for the Masjid.
    Project Coordinator->>Finance Dept.: 15. Payment request is crosschecked with data.
    Finance Dept.->>Partner Side: 16. Payment is processed and sent to partner.
</pre>

To wire up MermaidJS, add the CDN script to your page’s <head> or just before </body>:

index.html HTML 
<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
  mermaid.initialize({ startOnLoad: true });
</script>