Choreo.C4.Render.Mermaid (Choreo v0.8.0)

Copy Markdown View Source

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

Summary

Functions

to_mermaid(c4, opts \\ [])

Renders a C4 model to a Mermaid flowchart string.

Functions

to_mermaid(c4, opts \\ [])

@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