Generated pre element is missing mermaid class

[rpg-70]

Hello,

I started playing around with this extension and could not get it working.

When I checked antora generated html file I noticed that <pre> element for the mermaid diagram is missing class=mermaid part:

If I add this missing part manually, then the diagram is rendered:

Is this a bug or am I missing something in the configuration?

This is my antora-playbook.yml file:

site:
  title: local
  start_page: local::technical-description.adoc
content:
  sources:
    - url: ./
      branches: HEAD

asciidoc:
  attributes:
    experimental: ''
    idprefix: ''
    idseparator: '-'
    page-pagination: ''
antora:
  extensions:
    - require: '@antora/lunr-extension'
    - require: '@sntke/antora-mermaid-extension'
      mermaid_library_url: https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs
      script_stem: header-scripts
      mermaid_initialize_options:
        start_on_load: true
        log_level: 'debug'
ui:
  bundle:
    url: https://gitlab.com/antora/antora-ui-default/-/jobs/artifacts/HEAD/raw/build/ui-bundle.zip?job=bundle-stable
runtime:
  log:
    level: debug

And my package.json file:

{
    "name": "techdoc",
    "version": "",
    "description": "",
    "main": "",
    "author": "",
    "license": "",
    "devDependencies": {
        "@antora/lunr-extension": "^1.0.0-alpha.8",
        "@redocly/cli": "^1.18.0",
        "@sntke/antora-mermaid-extension": "^0.0.5",
        "antora": "^3.1.9"
    }
}

[snt]

@rpg-70 Can I see your *.adoc that generates the HTML with <pre>...</pre> ?

I get proper output with following adoc file:

# Sample

++++
<style>
.mermaid {
  width: 100%;
}
</style>
++++

[mermaid]
....
sequenceDiagram
test->>test1: teting API call
test1->>test2: forward call
test2->>test1: return
test1->>test: return
....

The mermaid part in the generated HTML is like this (wrapped with div tag not pre ):

<div class="imageblock"><div class="mermaid content" style=" ">sequenceDiagram
test->>test1: teting API call
test1->>test2: forward call
test2->>test1: return
test1->>test: return</div></div>

[rpg-70]

@snt Sure, here it is:

= Technical description
:included: true
:imagesdir: images
:toc: left

Example diagram:
[mermaid]
....
sequenceDiagram
autonumber

participant a as Alice
participant b as Bob

a ->>+ b : Hello.
b -->>- a : Hi, there.
....

I even added example from your comment but still the same result:

[snt]

@rpg-70 Could you make sure that your system really uses your antora-playbook.yaml? (by updating .site.title and re-generate HTML, for example)

I could not reproduce the problem with your adoc file and devDependency of package.json.

It looks like your system does not load antora-mermaid-extension properly.
antora generate antora-playbook.yml generates the HTML with pre tag when I comment out .antora.extensions[].require for the extension like this:

antora:
  extensions:
    - require: '@antora/lunr-extension'
    # - require: '@sntke/antora-mermaid-extension'
    #   mermaid_library_url: https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs
    #   script_stem: header-scripts
    #   mermaid_initialize_options:
    #     start_on_load: true
    #     log_level: 'debug'

[rpg-70]

@snt So I even have setup everything from scratch on a different computer and the result is the same. I renamed the site title, module name etc. and everything is updated in html file. When I comment out the extension definition like you did then diagram content is the same and the only difference is that <script> tag for mermaid is missing (which is not the case with extension not commented out) so I guess it loads fine.

I still have no idea what might be wrong in my setup, so maybe this will help finding the issue:

• code that I tested on: https://github.com/rpg-70/antora-mermaid
• both htmls generated with extension excluded / included: https://gist.github.com/rpg-70/6f640139099a0b7c337c1cb161fb12de

[snt]

@rpg-70 Thank you for the code you tested. The problem is recreated with my system too. Though I couldn't figure out the root cause yet, I found a workaround: Removing asciidoc.attributes and its children from antora.yml makes the extension work as usual.

antora.yml:

name: module
title: module
version: ~
start_page: test.adoc
# asciidoc:
#   attributes:
#     source-language: asciidoc@
#     table-caption: false
nav:
- modules/ROOT/nav.adoc

[snt]

It looks like that the extension is registered but setting any attributes under asciidoc.attributes of antora.yml prevents events for mermaid block being emitted.

Observed symptoms:

OK: No children under asciidoc.attributes

asciidoc.attributes without children works fine too.

# ...
asciidoc:
  attributes:
#     source-language: asciidoc@
#     table-caption: false
# ...

OK --attribute argument

Setting attributes with --attribute option for antora CLI works fine too.

antora --stacktrace --attribute aaa=bbb antora-playbook.yml

OK: overriding attributes with --attribute arg

antora --stacktrace --attribute aaa=bbb antora-playbook.yml with following antora.yaml (attr aaa in antora.yml is overwritten with the arg) works fine too.

# ...
asciidoc:
  attributes:
#     source-language: asciidoc@
#     table-caption: false
    aaa: bbb
# ...

NG: attributes under asciidoc.attributes which is not overwritten with --attribute arg

antora --stacktrace --attribute aaa=bbb antora-playbook.yml with following antora.yaml

# ...
asciidoc:
  attributes:
#     source-language: asciidoc@
#     table-caption: false
    aaa: bbb
# ...

[rpg-70]

@snt Nice find! 😄 I can confirm that removing attributes from antora.yml works and diagram is rendered. Following up with workarounds, I found a way to still be able to set the attributes globally instead of repeating them in each adoc file or adding arguments to antora. You can define a attributes.adoc file and add include::attributes.adoc[] to the actual page that needs these attributes. Example available here: https://github.com/rpg-70/antora-mermaid/commit/3d205c21d8bbcfd589cbce236be556d9988e184a

But still I think that in the end it would be nice to be able to set them in antora.yml and it's somehow unexpected behavior to break the diagrams with correct configuration.

[snt]

@rpg-70 v0.0.6 is released https://www.npmjs.com/package/@sntke/antora-mermaid-extension/v/0.0.6.

Could you try v0.0.6 by updating package.json with

        "@sntke/antora-mermaid-extension": "^0.0.6",

then run the following?

npm install
npm run build

It should work with attributes in antora.yml.

[rpg-70]

@snt I have just tested the new version and it works as expected. Diarams are rendered even with attributes set in antora.yml. Thank you very much for the fix 😄 Closing the issue as resolved.