NOTE: Migration to 0.0.4 and newer might require you to update to antora-playbook.yaml
. See Migration to 0.0.4.
This extension visualizes Listing Blocks and Literal Blocks of Mermaid on HTML files.
[mermaid]
....
sequenceDiagram
autonumber
participant a as Alice
participant b as Bob
a ->>+ b : Hello.
b -->>- a : Hi, there.
....
You can also specify width
and height
of outer div
of svg
like:
[mermaid,width=100%]
....
sequenceDiagram
autonumber
participant a as Alice
participant b as Bob
a ->>+ b : Hello.
b -->>- a : Hi, there.
....
Better privacy:
This extension uses mermaid.min.js
to convert mermaid diagram text on HTML into SVG.
So the diagram texts won't be sent to anywhere to create image files.
Install this extension
npm i -D @sntke/antora-mermaid-extension
Append following in your antora-playbook.yaml
:
antora:
extensions:
- require: '@sntke/antora-mermaid-extension' # <1>
mermaid_library_url: https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs # <2>
script_stem: header-scripts # <3>
mermaid_initialize_options: # <4>
start_on_load: true
If you set .antora.extensions[].mermaid_library_url
in antora-playbook.yaml
, update the value to use mermaid@10
.
antora-mermaid-extension@0.0.4
uses mermaid@10
which
have dropped CJS support.