Adding mermaid charting

[lidar532]

Mermaid
is a very nice Markdown based charting tool that lets you add very nice graphics in Markdown files. It would be great if this could be added to madness. The Mermaid page is here..

[DannyBen]

I think I can add it easily, with these caveats:

1. It will not be enabled by default, it will have a config option to enable it
2. It only works with the redcarpet (default) renderer as far as I can test so far (works with both renderers)
3. It will require you to still wrap your mermaid code with <div class='mermaid'>...</div>

Will this work?

[lidar532]

I added the .madness.tml file and put the following inside along with the rest of the stuff from your example .madness.yml file as follows:

#135 
mermaid: true

It picked up the .madness.yml file, but I still didn't get amermaid chart yet. just the text. Below is the output from the container:

wright@SoxNav-WWTB:~/Documents$ sudo docker compose up
[+] Running 1/0
 ✔ Container documents-web-1  Created                                                                 0.0s 
Attaching to web-1
web-1  | /usr/lib/ruby/gems/3.2.0/gems/sinatra-4.0.0/lib/sinatra/base.rb:1849: warning: Rack::Logger is deprecated and will be removed in Rack 3.2.
web-1  | == Sinatra (v4.0.0) has taken the stage on 3000 for production with backup from Puma
web-1  | ▌ starting server
web-1  | ▌ env    : production
web-1  | ▌ listen : 0.0.0.0:3000
web-1  | ▌ path   : /docs
web-1  | ▌ config : .madness.yml
web-1  | 
web-1  | Puma starting in single mode...
web-1  | * Puma version: 6.4.2 (ruby 3.2.2-p53) ("The Eagle of Durango")
web-1  | *  Min threads: 0
web-1  | *  Max threads: 5
web-1  | *  Environment: development
web-1  | *          PID: 1
web-1  | * Listening on http://0.0.0.0:3000
web-1  | Use Ctrl-C to stop
web-1  | 172.18.0.1 - - [19/Jun/2024:22:33:36 +0000] "GET /05_Mermaid_Tests HTTP/1.1" 200 1813 0.0922
web-1  | 172.18.0.1 - - [19/Jun/2024:22:38:00 +0000] "GET /05_Mermaid_Tests HTTP/1.1" 200 1813 0.0030
web-1  | 192.168.68.138 - - [19/Jun/2024:22:38:14 +0000] "GET /css/main.css HTTP/1.1" 200 15988 0.0023
web-1  | 192.168.68.138 - - [19/Jun/2024:22:38:14 +0000] "GET /js/vendor/jquery.min.js HTTP/1.1" 200 86926 0.0026
web-1  | 192.168.68.138 - - [19/Jun/2024:22:38:14 +0000] "GET /js/vendor/clipboard.min.js HTTP/1.1" 200 10754 0.0008
web-1  | 192.168.68.138 - - [19/Jun/2024:22:38:14 +0000] "GET /js/clipboard.js HTTP/1.1" 200 308 0.0007
web-1  | 192.168.68.138 - - [19/Jun/2024:22:38:14 +0000] "GET /font/fontello.woff2?19183580 HTTP/1.1" 200 2816 0.0013
web-1  | 192.168.68.138 - - [19/Jun/2024:22:38:17 +0000] "GET / HTTP/1.1" 200 2184 0.0121
web-1  | 192.168.68.138 - - [19/Jun/2024:22:38:20 +0000] "GET /05_Mermaid_Tests HTTP/1.1" 200 1813 0.0122
web-1  | 192.168.68.138 - - [19/Jun/2024:22:38:25 +0000] "GET /05_Mermaid_Tests HTTP/1.1" 200 1813 0.0246
web-1  | 172.18.0.1 - - [19/Jun/2024:22:41:39 +0000] "GET /05_Mermaid_Tests HTTP/1.1" 200 1722 0.0144

Note the server didn't appear to get the mermaid js package/library, could that be it?

[DannyBen]

My bad.

The docker image was not built from the edge branch, it should be fixed now.
Pull the image again.

You should see the mermaid.js loaded at the top of the HTML source (/vendor/mermaid.js)

[lidar532]

It's fixed, and it's all working now! Very nice additional capability. Thanks for making it happen :-).

[lidar532]

Now that Mermaid is integrated, maybe It could get added to the list of Mermaid Integrations.

[DannyBen]

Nice. I will avoid merging for a few days, in case you see issues with it.
After merging, perhaps we can add it to the integrations list.