Mermaid configuation options in marp

[Kugeleis]

I successfully integrated a marmaid sankey graph in my presentation:

---
marp: true
---

# Sankey

<div class="mermaid">
  sankey-beta
  %% source,target,value
  Project,Database,10
  People,Database,20
  Measurements,Database,100
</div>

---

Now I want to add configuration to this graph showValues: false (example in docs)
but neither

config:
  sankey:
    showValues: false

nor

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

work.

How do apply options to a mermaid graph in marp?

[yhatt]

Marp has no official support for mermaid, but if you have already successful to render, you can set correct configuration in both cases

# Sankey

<div class="mermaid">
  ---
  config:
    sankey:
      showValues: false
  ---
  sankey-beta
  %% source,target,value
  Project,Database,10
  People,Database,20
  Measurements,Database,100
</div>

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

Mermaid setting is not a part of Marp so it's important to place the independent frontmatter inside the mermaid code.

or:

<div class="mermaid">
  sankey-beta
  %% source,target,value
  Project,Database,10
  People,Database,20
  Measurements,Database,100
</div>

<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.esm.min.mjs';
  mermaid.initialize({
    startOnLoad: true,
    sankey: {
      showValues: false
    }
  });
</script>

To set the setting via mermaid.initialize(), set the setting object as sankey field, as described at "Configuration" section of https://mermaid.js.org/syntax/sankey.html.

[soaple]

You can use MarkSlides(Free web editor supports Marp) to edit Mermaid like below.