Mermaid

View Source
Run in Livebook 
Mix.install([
  {:mdex, "~> 0.8"},
  {:mdex_mermaid, "~> 0.3"},
  {:kino, "~> 0.16"}
])

Intro

Mermaid is a JavaScript library for creating diagrams from text. Use it to embed flowcharts, sequence diagrams, class diagrams, and more directly in your Markdown. The mdex_mermaid plugin transforms mermaid code blocks into rendered diagrams.

Example

markdown = """
# Flowchart

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```
"""

mdex =
  MDEx.new(markdown: markdown)
  |> MDExMermaid.attach()

mdex
|> MDEx.to_html!()
|> Kino.HTML.new()