The example on readme (and others) does not work correctly...

iherman commented 9 months ago

To be on the safe side, I've put, below, the complete HTML+respec file that I used for testing.

The mermaid diagram does not always work; see what I get:

The mermaid itself is the example on readme, which does display in other mermaid environments (the mermaid.live playground, obsidian...).

Two interesting points:

If you look closely, the diagram does flash for a moment when displaying the page, but then disappears to show what is above.
If I do a complete cache clean and reload in the browser (ie, Command-Shift-R in my chromium based browser) then it sometimes (mostly?) works. Just doing a reload (almost?) never works.

Here is the exact HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Verifiable Credentials Vocabulary v2.0</title>
    <script class="remove" src="https://www.w3.org/Tools/respec/respec-w3c"></script>
    <script class="remove" src="https://cdn.jsdelivr.net/gh/w3c/respec-mermaid@1.1.0/dist/main.js"></script>
    <script class="remove">
      var respecConfig = {
        specStatus: "base",
        shortName: "2018/credentials/",
        thisVersion: "https://www.w3.org/2018/credentials/",
        editors: [{
          name: "Ivan Herman",
        }],
        postProcess: [window.respecMermaid.createFigures],
      };
    </script>
   </head>
  <body>
    <section>
      <h2>Mermaid tests</h2>
    <figure>
      <pre class="diagram mermaid">
sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later!
      </pre>
    </figure>
    </section>
</body>
</html>

sanderke commented 7 months ago

At the moment it seems to only work with data-include.

<section data-include="mermaid.html"></section>

iherman commented 7 months ago

@sanderke I am not sure what you mean. Should I put the <figure>....</figure> into a separate file and use a data include? I tried that (just now) and it did not work either.

iherman commented 7 months ago

Do you have an example file (or files) that you know work, so that I can try to work "backwards" to get what I want?

sanderke commented 7 months ago

/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Verifiable Credentials Vocabulary v2.0</title>
    <script class="remove" src="https://www.w3.org/Tools/respec/respec-w3c"></script>
    <script class="remove" src="https://cdn.jsdelivr.net/gh/w3c/respec-mermaid@1.1.0/dist/main.js"></script>
    <script class="remove">
      var respecConfig = {
        specStatus: "base",
        shortName: "2018/credentials/",
        thisVersion: "https://www.w3.org/2018/credentials/",
        editors: [{
          name: "Ivan Herman",
        }],
        postProcess: [window.respecMermaid.createFigures],
      };
    </script>
   </head>
  <body>
    <section data-include="mermaid.html"></section>
</body>
</html>

/mermaid.html

<h2>Mermaid tests</h2>
<figure>
    <pre class="diagram mermaid">
sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later!
      </pre>
</figure>

iherman commented 7 months ago

Ah. That worked. I also realized why it did not on my earlier attempt: I forgot that data include only works in respec if the files are running through http(s). Ie, if I simply click on the HTML file on my machine to let the browser pick up the file, the include does not happen; I had to access the index.html via localhost and a server running on my machine.

iherman commented 7 months ago

Any plans to get rid of this constraints, ie, to allow an embedded mermaid instead of relying on data include?

w3c / respec-mermaid

The example on readme (and others) does not work correctly... #8

/index.html

/mermaid.html