# `Choreo.C4.Render.Mermaid`
[🔗](https://github.com/code-shoily/choreo/blob/v0.14.1/lib/choreo/c4/render/mermaid.ex#L1)

Mermaid.js rendering for `Choreo.C4` architecture diagrams.

Produces C4-model-oriented flowchart visualisation:

  * **Person** — circle shape `((Label))`
  * **Software System** — rounded rectangle `[Label]`
  * **Container** — stadium shape `([Label])`
  * **Component** — subroutine shape `[[Label]]`

Relationships are rendered as directed links with labels.
Clusters group containers by their parent software system and
components by their parent container.

## Further reading

  * [C4 Model notation](https://c4model.com/)
  * [Mermaid flowchart syntax](https://mermaid.js.org/syntax/flowchart.html)

# `to_mermaid`

```elixir
@spec to_mermaid(Choreo.C4.t(), keyword()) :: String.t()
```

Renders a C4 model to a Mermaid flowchart string.

## Options

  * `:theme` — `:default`, `:dark`, `:warm`, `:forest`, `:ocean`, or a `Choreo.Theme` struct
  * `:direction` — `:lr` (default), `:td`, `:rl`, `:bt`
  * `:highlighted_nodes` — list of node IDs to highlight
  * `:highlighted_edges` — list of edge IDs or `{from, to}` tuples to highlight

## Examples

    iex> c4 = Choreo.C4.new()
    iex> c4 = c4
    ...>   |> Choreo.C4.add_person(:user, label: "User")
    ...>   |> Choreo.C4.add_software_system(:app, label: "App")
    ...>   |> Choreo.C4.add_relationship(:user, :app, label: "Uses")
    iex> mermaid = Choreo.C4.Render.Mermaid.to_mermaid(c4)
    iex> String.contains?(mermaid, "graph LR")
    true
    iex> String.contains?(mermaid, "User")
    true
    iex> String.contains?(mermaid, "App")
    true

---

*Consult [api-reference.md](api-reference.md) for complete listing*