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.

[franzinc]

@DannyBen I am using the 1.2.1 Docker image and put a .madness.yml file in the root documentation directory with only this line in it:

mermaid: true

But the mermaid charts don't seem to activate.

Is it a requirement to further fill out the rest of the config file? Or possibly I am missing something else?

Thanks for the assistance!

[DannyBen]

No, there is no need to have the entire config. Having just mermaid: true is sufficient.

For some reason I am unsure of, the docker image tagged 1.2.1 had version 1.2.0 installed.
I have now rebuilt the image with the proper gem version.

Repull your docker image and run --version on your aliased madness.

$ docker pull dannyben/madness
$ madness --version  # if you are aliased, or...
$ docker run --rm -it dannyben/madness --version  # ... if you do not have the alias

You should see 1.2.1. If you do, the mermaid config should work.
Let me know how it goes.

[DannyBen]

I got a notification for a new comment which now seems gone.

I can confirm that the docker image shows mermaid diagrams. Points to check:

1. Ensure that the .madness.yml is properly named and is present at the working directory (which is not necessarily the same as the docs directory).
2. As an example, this alias works: alias madness-docker='docker run --rm -it -v $PWD:/docs -p 3000:3000 dannyben/madness' when it is executed from the same directory as the .madness.yml file.
3. You can run madness config show to list all the config values that madness captured. You should see mermaid: true in it. If not, your configuration is not placed correctly.
4. Ensure your mermaid text is enclosed within a div with class 'mermaid':

<div class='mermaid'>
  pie title NETFLIX
     "Time spent looking for movie" : 90
     "Time spent watching it" : 10
</div>

[franzinc]

Thanks for the reply!

The mermaid charts are continuing to display as plain text, unfortunately. Does anything stick out in my config? Our setup is a little bit complex because we run several containers and utilize a Makefile, Containerfile, and a few scripts. But here are some relevant pieces:

Verified pulling/executing from version 1.2.1:

$ podman run --rm -it dannyben/madness --version
1.2.1

Using this script (along with a Makefile etc) to run the containers:

#!/bin/bash

README_ROOT=/home/md
LAYER_ROOT=/home/layer

podman run
--restart=always
--detach
-p ${PORT_RANGE_START}-${PORT_RANGE_END}:${PORT_RANGE_START}-${PORT_RANGE_END}
-v $README_ROOT:/opt/readme
-v $LAYER_ROOT:/opt/layer
--name markdown_servers
markdown_servers

based on fresh images:

$ podman image ls | grep -E 'madness|markdown'
localhost/markdown_servers latest b13949a26a20 17 seconds ago 519 MB
docker.io/dannyben/madness 1.2.1 5d3b1a1351e9 2 hours ago 518 MB
docker.io/dannyben/madness latest 5d3b1a1351e9 2 hours ago 518 MB

Containers start fine:

$ podman ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
6c289222d74f localhost/markdown_servers:latest 55 minutes ago Up 31 minutes 0.0.0.0:8641-8661->8641-8661/tcp markdown_servers

I've tested placed a .madness.yml file in the root directory as well as the specific directory with the mermaid code in it::

$ cat /home/md/.madness.yml; cat /home/md/layer/.madness.yml
mermaid: true
mermaid: true

I'm having trouble pasting my code but it's in /home/md/layer/index.md and includes a "div class='mermaid'" section.

Happy to provide further details in this thread or in private.

Thanks again!

[franzinc]

Yes, sorry for deleting my previous message, I was having trouble pasting code so was trying to fix up the formatting to make it readable. I'll try your suggestions.