---
url: /reference/@cssdoc/core/functions/toMermaid.md
---
# Function: toMermaid()

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

Defined in: [packages/core/src/mermaid.ts:191](https://github.com/thedannywahl/cssdoc/blob/main/packages/core/src/mermaid.ts#L191)

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](../interfaces/StructureNode.md#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`](../interfaces/StructureNode.md)\[]

Top-level [StructureNode](../interfaces/StructureNode.md)s (an authored `@structure`).

### options?

[`MermaidOptions`](../interfaces/MermaidOptions.md) = `{}`

[MermaidOptions](../interfaces/MermaidOptions.md).

## 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 …
```