Skip to content

zjffun/reveal.js-mermaid-plugin

Repository files navigation

jsdelivr npm version

A Mermaid plugin for reveal.js.

Usage

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/reveal.js@5.0.5/dist/reset.css"
/>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/reveal.js@5.0.5/dist/reveal.css"
/>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/reveal.js@5.0.5/dist/theme/black.css"
  id="theme"
/>

<div class="reveal">
  <div class="slides">
    <section>
      <h3>Flowchart</h3>
      <div class="mermaid">
        <pre>
          %%{init: {'theme': 'dark', 'themeVariables': { 'darkMode': true }}}%%
          flowchart TD
            A[Start] --> B{Is it?};
            B -- Yes --> C[OK];
            C --> D[Rethink];
            D --> B;
            B -- No ----> E[End];
        </pre>
      </div>
    </section>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/reveal.js@5.0.5/dist/reveal.js"></script>
<script src="https://cdn.jsdelivr.net/npm/reveal.js-mermaid-plugin@2.3.0/plugin/mermaid/mermaid.js"></script>
<script>
  Reveal.initialize({
    controls: true,
    progress: true,
    center: true,
    hash: true,

    // mermaid initialize config
    mermaid: {
      // flowchart: {
      //   curve: 'linear',
      // },
    },

    // this plugin config
    // mermaidPlugin: {
    //   beforeRender(el) {
    //     console.log(el);
    //     // if return false this element will not call mermaid render
    //   },
    //
    //   afterRender(el) {
    //     console.log(el);
    //   },
    // },

    plugins: [RevealMermaid],
  });
</script>

Q&A

Can I use Mermaid JavaScript API instead of this plugin?

Calling the Mermaid JavaScript API is great, but currently, using Mermaid startOnLoad with reveal.js will wrong in some case like this example.