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.
I appreciate any help anyone can offer!
1 Like
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.
1 Like
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.
1 Like
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!
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!
Not at all, I enjoyed it!
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"}
1 Like
@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)
1 Like
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.
1 Like
