Add instructions for extensions

[GregJohnStewart]

There should be improved docs for how to install extensions. It is not obvious how to get them installed.

For example, PlantUML. All that is provided is a link, but no context on how it needs to be installed for AsciidocFX. I tried the linked docs, using gem install asciidoctor-diagram, but no joy.

If there is a folder where a jar needs placed, then that needs to be explicitly mentioned.

[gillesB]

I certainly get your point, nevertheless I am a bit confused by your example, because PlantUML should work out of the box.

[GregJohnStewart]

Ah good point. Sorry, looks like syntax might have changed since I last had this asciidoc open (it's been a couple years)? ditaa and uml seem to be working after all.

Might be good to explicitly note which extensions are pre-installed, and which need extra work? Looks like Mermaid needs some help? installed via npm, but complains about PATH, even after adding to path. Added to document variable, but hits:

Failed to generate image: mmdc failed: file:///home/gstewart/node_modules/@mermaid-js/mermaid-cli/src/index.js:262
      const svg = container.getElementsByTagName?.('svg')?.[0]
                                                 ^

SyntaxError: Unexpected token '.'
    at Loader.moduleStrategy (internal/modules/esm/translators.js:133:18)

[life888888]

install mmdc

Test Environment : Ubuntu 20.04

Install Node JS

Open Terminal and run commands.

sudo apt-get update

sudo apt-get install -y ca-certificates curl gnupg git

sudo mkdir -p /etc/apt/keyrings

curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | sudo gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg

NODE_MAJOR=20

ARCH=amd64

echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_$NODE_MAJOR.x nodistro main" | sudo tee /etc/apt/sources.list.d/nodesource.list

sudo apt-get update

sudo apt-get install nodejs -y

open terminal and run command

sudo npm install -g @mermaid-js/mermaid-cli

test mmdc version

$ mmdc --version
10.6.1

test mmdc with no parameter

$ mmdc

No input file specified, reading from stdin. If you want to specify an input file, please use `-i <input>.` You can use `-i -` to read from stdin and to suppress this warning.

Error: Could not find Chromium (rev. 1108766). This can occur if either
 1. you did not perform an installation before running the script (e.g. `npm install`) or
 2. your cache path is incorrectly configured (which is: /home/demouser1/.cache/puppeteer).
For (2), check out our guide on configuring puppeteer at https://pptr.dev/guides/configuration.
    at ChromeLauncher.resolveExecutablePath (file:///usr/lib/node_modules/@mermaid-js/mermaid-cli/node_modules/puppeteer-core/lib/esm/puppeteer/node/ProductLauncher.js:263:27)
    at ChromeLauncher.executablePath (file:///usr/lib/node_modules/@mermaid-js/mermaid-cli/node_modules/puppeteer-core/lib/esm/puppeteer/node/ChromeLauncher.js:176:25)
    at ChromeLauncher.computeLaunchArguments (file:///usr/lib/node_modules/@mermaid-js/mermaid-cli/node_modules/puppeteer-core/lib/esm/puppeteer/node/ChromeLauncher.js:93:37)
    at async ChromeLauncher.launch (file:///usr/lib/node_modules/@mermaid-js/mermaid-cli/node_modules/puppeteer-core/lib/esm/puppeteer/node/ProductLauncher.js:57:28)
    at async run (file:///usr/lib/node_modules/@mermaid-js/mermaid-cli/src/index.js:404:19)
    at async cli (file:///usr/lib/node_modules/@mermaid-js/mermaid-cli/src/index.js:184:3)

Set Chrome as the default browser

please Set Chrome as the default browser

find google chrome location

$ which google-chrome
/usr/bin/google-chrome

Edit your .bashrc file

Add this line to your .bashrc file then save it.

export PUPPETEER_EXECUTABLE_PATH=/usr/bin/google-chrome

then logout and login again or reboot.

test mmdc with no parameter again

$ mmdc
No input file specified, reading from stdin. If you want to specify an input file, please use `-i <input>.` You can use `-i -` to read from stdin and to suppress this warning.

(No error message) Exit with Ctrl +C

create test file

input.mmd

graph
   accTitle: My title here
   accDescr: My description here
   A-->B

Run test mmdc

$ mmdc -i input.mmd -o output2.png -t dark
Generating single mermaid chart

You can find generated file: output2.png

Test WIth AsciidocFX

create test1.adoc

.Mermaid Diagram https://github.com/mermaid-js/mermaid-cli
[mermaid,target="mermaid-diagram"]
--
graph
   accTitle: My title here
   accDescr: My description here
   A-->B
--

[chapter-04.adoc.txt] (https://github.com/asciidocfx/AsciidocFX/files/13405967/chapter-04.adoc.txt)

Update , add format example

.Mermaid Diagram https://github.com/mermaid-js/mermaid-cli
[mermaid, target="mermaid-diagram-1"]
--
graph
   accTitle: My title here
   accDescr: My description here
   A-->B
--

.Mermaid Diagram 2 https://github.com/mermaid-js/mermaid-cli
[mermaid, target="mermaid-diagram-2", format="png"]
--
graph
   accTitle: My title here
   accDescr: My description here
   A2-->B2
--

.Mermaid Diagram 3 https://github.com/mermaid-js/mermaid-cli
[mermaid, target="mermaid-diagram-3", format="svg"]
--
graph
   accTitle: My title here
   accDescr: My description here
   A3-->B3
--

list version

$ node -v
v20.9.0

$ npm -v
10.1.0

$ mmdc --version
10.6.1