<!-- livebook:{"persist_outputs":true} -->

# Mermaid

```elixir
Mix.install([
  {:mdex, "~> 0.8"},
  {:mdex_mermaid, "~> 0.3"},
  {:kino, "~> 0.16"}
])
```

## Intro

[Mermaid](https://mermaid.js.org) 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

````elixir
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()
````