Packages

mdex

0.3.0
0.13.3 0.13.2 0.13.1 0.13.0 0.12.5 retired 0.12.4 0.12.3 0.12.2 0.12.1 0.12.0 0.11.7 0.11.6 0.11.5 0.11.4 0.11.3 0.11.2 0.11.1 0.11.0 0.10.0 0.9.4 0.9.3 0.9.2 0.9.1 0.9.0 0.8.6 0.8.5 0.8.4 0.8.3 0.8.2 0.8.1 0.8.0 0.7.5 0.7.4 0.7.3 0.7.2 0.7.1 0.7.0 0.6.2 0.6.1 0.6.0 0.5.0 0.4.3 0.4.2 0.4.1 0.4.0 0.3.3 0.3.2 0.3.1 0.3.0 0.2.0 0.1.18 0.1.17 0.1.16 0.1.15 0.1.14 0.1.13 0.1.12 0.1.11 0.1.10 0.1.9 0.1.8 0.1.7 0.1.6 0.1.5 0.1.4 0.1.3 0.1.2 0.1.1 0.1.0

Fast and extensible Markdown for Elixir

Security advisory: This version has known vulnerabilities. View advisories
HexDocs

Current section

Files

Jump to
Readme
69 Versions
2 Dependencies
36 Dependants
6 Advisories
Files
Activity
mdex examples mermaid.html
Raw

examples/mermaid.html 

<script type="module">

  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';

  mermaid.initialize({ startOnLoad: true });

</script>

<h1>Mermaid Example</h1>

<p>In this example we’ll inject the script code to initialize and render mermaid blocks.</p>

<pre class="mermaid">sequenceDiagram

    participant Alice

    participant Bob

    Alice->>John: Hello John, how are you?

    loop HealthCheck

        John->>John: Fight against hypochondria

    end

    Note right of John: Rational thoughts <br/>prevail!

    John-->>Alice: Great!

    John->>Bob: How about you?

    Bob-->>John: Jolly good!

</pre>

<p>The following script is used to load the mermaid library and initialize it:</p>

<pre class="autumn-hl" style="background-color: #282C34; color: #ABB2BF;"><code class="language-javascript" translate="no"><span class="ahl-keyword" style="color: #E06C75;">import</span> <span class="ahl-variable" style="color: #ABB2BF;">mermaid</span> <span class="ahl-keyword" style="color: #E06C75;">from</span> <span class="ahl-string" style="color: #98C379;">&#x27;https:&#x2f;&#x2f;cdn.jsdelivr.net&#x2f;npm&#x2f;mermaid@10&#x2f;dist&#x2f;mermaid.esm.min.mjs&#x27;</span><span class="ahl-punctuation ahl-delimiter" style="color: #ABB2BF;">;</span>

<span class="ahl-variable" style="color: #ABB2BF;">mermaid</span><span class="ahl-punctuation ahl-delimiter" style="color: #ABB2BF;">.</span>initialize<span class="ahl-punctuation ahl-bracket" style="color: #ABB2BF;">(</span><span class="ahl-punctuation ahl-bracket" style="color: #ABB2BF;">{</span> startOnLoad: <span class="ahl-constant ahl-builtin" style="color: #D19A66;">true</span> <span class="ahl-punctuation ahl-bracket" style="color: #ABB2BF;">}</span><span class="ahl-punctuation ahl-bracket" style="color: #ABB2BF;">)</span><span class="ahl-punctuation ahl-delimiter" style="color: #ABB2BF;">;</span>

</code></pre>