bmitc
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:
- Is there already an existing solution for this?
- If not, does anyone have some pointers on how to get Kino to do this?
Thank you!
Where Next?
Trending in Questions
Other Trending Topics
Latest Livebook Threads
Latest on Elixir Forum
Sponsor Spotlight
We build reliable cloud platforms for business-critical systems.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #library
- #deployment
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #elixirconf
- #channels
- #exunit
- #discussion
- #code-sync
- #podcasts
- #javascript
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #ai
- #elixirconf-us
- #blog-post
- #elixir-ls
- #phoenix_html
- #iex
- #graphql
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #elixirconf-eu
- #metaprogramming
- #hex
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Elixir, Erlang & BEAM conferences from Code Sync - join us in 2026!
Practical resources that improve the lives of professional developers.
Producing high quality Elixir screencasts since 2017.
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"
Showing Posts 1 to 4- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
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.
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 noticeKino.Mermaid.Kino.Mermaid.new/1does 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
I had tried with
Kino.Markdown.new/1, but I just realized that I didn’t surround the Mermaid markdown with triple backticks and themermaiddesignation. Upon doing so, it works as well:So either
Kino.Markdown.new/1orKino.Mermaid.new/1work fine, with the latter requiring only the content.w0rd-driven
Nice. TIL there was a
Kino.Mermaidbut it makes sense given how much it’s used. I’m glad it all worked as expected