reveal.js-mermaid-plugin

A Mermaid plugin for reveal.js.

Usage

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/reset.css"
/>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/reveal.css"
/>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/reveal.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

Release Notes