devilray
How can Kino be used to export a mermaid image in Livebook?
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!
Marked As Solved
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.
Also Liked
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.
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"}
christhekeele
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.
Popular in Questions
Other popular topics
Latest Livebook Threads
Latest on Elixir Forum
Sponsor Spotlight
Enabling companies to succeed by building software people love.
Categories:
Sub Categories:
Forums
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Producing high quality Elixir screencasts since 2017.
Enabling companies to succeed by building software people love.
The deployment platform built for Elixir: PaaS ease, VPS control.
Courses that'll move you from confusion to "Aha, now I get it!"