bmitc

bmitc

Way for Elixir code cell in Livebook to emit a Mermaid graph which gets rendered?

Hello! I have some code:

:sentence
|> RuleBasedGrammar.generate_tree(RuleBasedGrammar.bigger_grammar())

that returns something like:

[
  :sentence,
  [:noun_phrase, [:pronoun, "it"]],
  [:verb_phrase, [:verb, "took"], [:noun_phrase, [:name, "Lee"]], []]
]

I would now like to take this output and render it, via a function call, as a graph. Is there a way to have a function emit Mermaid markdown and then get that rendered somehow?

For example, I would have a function RuleBasedGrammar.render_as_mermad/1 that would internally take the above output, convert it to the Mermaid markdown:

graph TD

:sentence --- :noun_phrase
:noun_phrase --- :pronoun
:pronoun --- it["#quot;it#quot;"]

:sentence --- :verb_phrase
:verb_phrase --- :verb
:verb --- took["#quot;took#quot;"]
:verb_phrase --- :name
:name --- lee["#quot;Lee#quot;"]

and then the Mermaid would render to the diagram in the output cell.

Here’s a mockup:

I’m sure there is a way to do this using Kino, but I’m just not sure how at the moment. So I thought I would ask here to check:

  1. Is there already an existing solution for this?
  2. If not, does anyone have some pointers on how to get Kino to do this?

Thank you!

Marked As Solved

w0rd-driven

w0rd-driven

Kino.Markdown.new() is likely what you want. It emits new markdown as a control but is not like a markdown cell. I assume you care about the output and not editing the markdown, correct? If that’s the case, Kino.Markdown is perfect. If you want to edit output around it you could always just use a separate markdown cell. It’d be clunky to mix them.

The only caveat is I don’t know if Mermaid works that way exactly. I remember there being some gotchas but memory is hazy.

The added bonus of using Kino is that’s how apps display output.

Also Liked

bmitc

bmitc

Good call! You caused me to realize that I haven’t recently inspected Kino’s modules, and there’s a lot of stuff there. I should have done so before, but upon looking up Kino.Markdown, I happened to notice Kino.Mermaid. Kino.Mermaid.new/1 does exactly what I needed with zero changes:

So now I just need to translate my graph to the Mermaid markdown, which should be straightforward enough.

I’m unfortunately not using Elixir for work at the moment, and so I get to my Livebook projects in spurts. So this is a good time to go through all the updates that have been added in Kino (unless these have been there a while, and I missed them the past few times. Haha.)

Thanks for your help!

bmitc

bmitc

I had tried with Kino.Markdown.new/1, but I just realized that I didn’t surround the Mermaid markdown with triple backticks and the mermaid designation. Upon doing so, it works as well:

So either Kino.Markdown.new/1 or Kino.Mermaid.new/1 work fine, with the latter requiring only the content.

Where Next?

Popular in Questions Top

LegitStack
I’m hoping you guys can give me some general advice and perhaps code examples if you’re feeling up to it. I’m very interested in Elixir,...
New
SoCreat
i’m a new one to elixir which editor can i use vs code? or atom? Thanks! :smiley:
New
Kagamiiiii
Student & New to elixir. Nice language. I want to convert a english character, e.g. “a”, which is stored in a variable, to it’s asci...
New
hariharasudhan94
I would like to know what is the best IDE for elixir development?
New
qwerescape
Is there a way to get the call stack or stack trace at any point in the code? Not from exceptions, but an expression that returns how the...
New
chrisalley
ExUnit now has describe blocks which is a welcome addition coming from RSpec. In the docs, it states that nested hierarchies of describe ...
New
WestKeys
Currently suffering from paralysis by [HTTP client] analysis. This is rather unusual in Elixirland as there tends to be consensus on the ...
New
wernerlaude
In AR this is so simple @articles = current_user.articles How to do in Ecto? def index(conn, _params) do current_user = conn.assig...
New
lucidguppy
I have a super simple question about elixir - how would I take a file like this foo bar baz and output a new file that enumerates th...
New
joeerl
Hello again - after a longish gap I’ve decided I really must dig into Elixir and see what’s been happening here - so I have a few questio...
New

Other popular topics Top

shahryarjb
Hello, I get Persian date from my client and convert it to normal calendar like this: def jalali_string_to_miladi_english_number(persi...
New
srinivasu
How to handle excepions in elixir? Suppose i have A, B, C ,D, E modules. and each module has get() function. A.get() method will call th...
New
pmjoe
I have a relationship of love and hate with Elixir. Lots of things are just absolutely right, but there are some things that are kind of ...
New
albydarned
Hello all! I am typing this post from my new MacBook Pro with the M1 chip. I’m loving it so far, and will probably use it as my daily dr...
New
grych
Hi folks, Few months ago I have announced the proof-of-concept of the library to manipulate the browsers DOM objects directly from Elixi...
639 49522 488
New
jononomo
I am trying to figure out how Mix knows whether the environment is test, dev, or prod -- where is this set? Thanks.
New
freewebwithme
Using vs code and installed ElixirLS: support and debugger. And I got an error popped up on start up says Failed to run ‘elixir’ comma...
New
minhajuddin
I have seen a lot of code which picks the first element from a list using Enum.at(0) instead of List.first. Is there a reason why people ...
New
alice
Hey, Just curious what are the main benefits of Elixir compared to Clojure? When is Elixir more useful than Clojure and vice versa? Th...
New
ovidiubadita
Hey all, I discovered Elixir and I love it. I always wanted to learn a functional programming and I intended to go for Haskell, but afte...
New

We're in Beta

About us Mission Statement