How can Kino be used to export a mermaid image in Livebook?

devilray

I have created a Livebook that pokes around a DNS zone, getting a list of subdomains, domain registration information, and records, particularly DMARC, SPF and DKIM records, to help quickly audit a domain’s health.

Once I generate this report, I would like to allow easy download of the report tables, as well as the Mermaid diagram presenting the information visually. Is there a way to use Kino to create a downloadable SVG, or even HTML page with the Mermaid SVG in it, to distribute to clients?

The repo with this Livebook in it is at GitHub - sachamasry/dns-zone-explorer: Elixir Livebook DNS zone exploration and auditing tool · GitHub.

I appreciate any help anyone can offer!

9 comments

/livebook #kino #mermaid

1 623 9

2024-10-15 19:38:04 UTC

Showing Posts 1 to 9

Show Best Posts
Show All (oldest first)
Show All (newest first)

christhekeele

As far as I know, no—not without some work. The Mermaid renderer is client-side javascript, and the Kino cell implementation just sends its content straight to it without further interactivity/control. I think your options are to:

Install the mermaid CLI onto the systems you are running livebook, shell out your diagrams to it, and download the result
Implement your own custom JS-powered Kino, using Kino.Mermaid’s implementation as a starting point, and add download functionality to it
Propose adding download functionality to the existing implementation in the issue tracker

If you do end up doing 2, definitely do 3 as well and submit a PR! I think it can be done entirely in the client, just by wrapping the SVG that gets rendered with a hover-state download button, that triggers a client-side download of the SVG in whatever format you had in mind.

Post #1

devilray

Thank you @christhekeele, I thought this would be the case. I don’t have enough time to do this right now, but as I think it is useful—the diagram has been generated already, after all—I plan to come back to it and do (2) and (3) as you pointed out.

Post #2

christhekeele

If you’re pressed for time, I’d definitely submit a feature request then—you never know if someone will get around to it before you can, but before you need it!

Post #3

christhekeele

@devilray Here’s a quick and dirty implementation as a starting point: Comparing livebook-dev:main...christhekeele:downloadable-mermaid · livebook-dev/kino · GitHub

Post #4

devilray

Thank you again @christhekeele, I’m looking at the solution now and will progress it over the coming few days. Sorry that I ended up causing you to start on this!

Post #5

christhekeele

Not at all, I enjoyed it!

Post #6

christhekeele

Submitted as a PR to Kino, with a download button, updated CSS, and caption support. If you want to give it a go, try using this in your livebook’s setup Mix.install:

{:kino, "~> 0.14.1", github: "christhekeele/kino", branch: "downloadable-mermaid"}

Post #7

christhekeele

@devilray It got approved and merged into main, you should get downloads on all your mermaid diagrams next release of Kino! (Or on {:kino, "~> 0.14.1", github: "livebook-dev/kino"} of course)

Post #8

devilray

Hi @christhekeele , I have been following the PR in Github and have seen that it was approved. This is amazing, and I thank you deeply for doing all this! Having this change will be very useful, as Mermaid diagrams are actually quite amazing and so versatile for all sorts of visualisations.

Post #9

— All posts loaded —