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

```ts
function toMermaidVariants(variants, options?): string;
```

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

Convert a component's alternative [StructureVariant](../interfaces/StructureVariant.md)s (from top-level `@variant` blocks) to a
single Mermaid flowchart — one labelled `subgraph` per variant (reusing the same mechanism `@scope`
boundary nodes use), read top-to-bottom as "pick one of these". An unlabelled variant is titled
"Variant N" (1-based, in authored order).

## Parameters

### variants

readonly `object`\[]

The component's [StructureVariant](../interfaces/StructureVariant.md)s.

### options?

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

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

## Returns

`string`

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