Packages
mdex
0.12.0
0.13.3
0.13.2
0.13.1
0.13.0
0.12.5
retired
0.12.4
0.12.3
0.12.2
0.12.1
0.12.0
0.11.7
0.11.6
0.11.5
0.11.4
0.11.3
0.11.2
0.11.1
0.11.0
0.10.0
0.9.4
0.9.3
0.9.2
0.9.1
0.9.0
0.8.6
0.8.5
0.8.4
0.8.3
0.8.2
0.8.1
0.8.0
0.7.5
0.7.4
0.7.3
0.7.2
0.7.1
0.7.0
0.6.2
0.6.1
0.6.0
0.5.0
0.4.3
0.4.2
0.4.1
0.4.0
0.3.3
0.3.2
0.3.1
0.3.0
0.2.0
0.1.18
0.1.17
0.1.16
0.1.15
0.1.14
0.1.13
0.1.12
0.1.11
0.1.10
0.1.9
0.1.8
0.1.7
0.1.6
0.1.5
0.1.4
0.1.3
0.1.2
0.1.1
0.1.0
Fast and extensible Markdown for Elixir
Security advisory:
This version has known vulnerabilities.
View advisories
Current section
Files
Jump to
Current section
Files
examples/mermaid.livemd
<!-- 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()
````