Add :caption and :download options to Kino.Mermaid

[christhekeele]

Originating from this thread on the forums, this PR:

• Gives Kino.Mermaid diagrams an optional on-hover download button
• Makes the rendered diagram an HTML5 <figure>
  • Uses flexbox to horizontally center the rendered diagram
  • Allows for an optional <figcaption> to describe the rendered diagram

Images

• Flexbox-centered <figure> (chrome browser defaults stylesheets adds a 1em margin to them)

  

• Figure with caption (styled roughly after Livebook's .info-box CSS)

  

• Flexbox-centering in a grid

  

• Download button with title

  

• Download with custom filename

  

• Default captions for Kino.Process.app_tree example

  

• Default captions for named Kino.Process.sup_tree example

  

• Default captions for pid Kino.Process.sup_tree example

  

• Default captions for Kino.Process.seq_trace example

  

  

[christhekeele]

Note: I did not check in all the changes to the bundled mermaid assets, as there is a lot of churn there. Is that handled in the package publication process, or should I push the changes to lib/assets up too?

[jonatanklosko]

@christhekeele thanks for the PR! I updated the styling and simplified some of the options :)

[jonatanklosko]

Note: I did not check in all the changes to the bundled mermaid assets, as there is a lot of churn there. Is that handled in the package publication process, or should I push the changes to lib/assets up too?

Bundling in the PR is fine, I bundle before or after merging anyway :) (we want to keep git in sync, in case someone installs the package from GitHub; they may even install the PR branch to try it out)

[christhekeele]

I did notice a couple of possible UI regressions with the updated styling, @jonatanklosko , thought I'd report them here.

---

Large diagrams now get very small—unsure if this is intentional? (Partially mitigated by the full diagram being downloadable, now).

For example, the Kino.Process.seq_trace/1 example

{_, diagram} = Kino.Process.seq_trace(fn ->
  {:ok, agent_pid} = Agent.start_link(fn -> [] end)
  Process.monitor(agent_pid)

  1..2
  |> Task.async_stream(
    fn value ->
      Agent.get(agent_pid, fn value -> value end)
      100 * value
    end,
    max_concurrency: 3
  )
  |> Stream.run()

  Agent.stop(agent_pid)
end)

diagram

with new styling it renders illegibly for me, like:

whereas in the current release of Kino, and previous styling in this PR, it renders full-width:

---

Additionally, vanilla unstyled diagrams have gotten... chonkier? post-update. most curious. New:

old:

---

Unsure if these are undesirable or not, just thought I'd mention them!

OSX, recent Chrome

[jonatanklosko]

@christhekeele thanks, the diagram width shrinking is unexpected, I've just fixed on main. The second is an expected change in mermaid v11, which I updated on main after this PR :)