Skip to content

Function: toMermaid()

ts
function toMermaid(roots, options?): string;

Defined in: packages/core/src/mermaid.ts:193

Convert a structure tree to a Mermaid flowchart definition. Each node gets a stable id (n0, n1, …) in depth-first order; a parent connects to each child with an edge carrying the child's cardinality. Nodes are shaped + classed by kind; sibling components with an href get a click link.

  • @scope boundary nodes (where StructureNode.scope is set) are rendered as labelled Mermaid subgraph blocks wrapping their children; the scope prelude (e.g. (.component)) is the label.

Parameters

roots

StructureNode[]

Top-level StructureNodes (an authored @structure).

options?

MermaidOptions = {}

MermaidOptions.

Returns

string

Mermaid source, or an empty string when there are no nodes.

Example

ts
toMermaid([{ selector: ".tabs", children: [{ selector: ".panel", cardinality: "many", children: [] }] }]);
// flowchart TD
//   n0[".tabs"]:::cssdoc-root
//   n1(".panel"):::cssdoc-part
//   n0 -->|0..n| n1
//   classDef cssdoc-root …

Released under the MIT License