# core/formatters/diagram.machine.formatter.ts

> 24 lines of code and 6 definitions.

Tree: GovLab Docs
Language: typescript
Layer: processing
Canonical: https://banes-lab.com/anatomy/docs#file-docs-core-formatters-diagram-machine-formatter-ts
Source text: https://banes-lab.com/source/docs/core/formatters/diagram.machine.formatter.ts.txt

Listed in [core/formatters](https://banes-lab.com/api/source/docs/core/formatters.md), after [core/formatters/diagram.formatter.ts](https://banes-lab.com/source/docs/core/formatters/diagram.formatter.ts.md) and before [core/formatters/diagram.sequence.formatter.ts](https://banes-lab.com/source/docs/core/formatters/diagram.sequence.formatter.ts.md).

## Definitions

- `emitStateDiagram` (lexical_declaration, line 18, exported)
- `transitionLine` (lexical_declaration, line 13)
- `INDENT` (lexical_declaration, line 6)
- `byNodeId` (lexical_declaration, line 8)
- `byTransition` (lexical_declaration, line 9)
- `suffix` (lexical_declaration, line 14)

## Contained in

- [core/formatters](https://banes-lab.com/anatomy/docs/folder-docs-core-formatters.md)

## Uses

- [core/formatters/diagram.formatter.ts](https://banes-lab.com/source/docs/core/formatters/diagram.formatter.ts.md)
- [core/normalizers/diagram.normalizer.ts](https://banes-lab.com/source/docs/core/normalizers/diagram.normalizer.ts.md)

## Used by

- [core/plugins/diagram.machine.plugin.ts](https://banes-lab.com/source/docs/core/plugins/diagram.machine.plugin.ts.md)

## Linked from

- [core/formatters](https://banes-lab.com/anatomy/docs/folder-docs-core-formatters.md)
- [core/normalizers](https://banes-lab.com/anatomy/docs/folder-docs-core-normalizers.md)
- [core/plugins](https://banes-lab.com/anatomy/docs/folder-docs-core-plugins.md)

## Source

```typescript
import type { StateModel, StateNode, StateTransition } from "#types/diagram.types";
import { idSanitize, label } from "#core/normalizers/diagram.normalizer";
import { accLines } from "#core/formatters/diagram.formatter";
import { byString } from "#core/selectors/base.selector";

const INDENT = "    ";

const byNodeId = byString<StateNode>((node) => node.id);
const byTransition = byString<StateTransition>(
    (transition) => `${transition.from} ${transition.to} ${transition.label ?? ""}`,
);

const transitionLine = function transitionLine(transition: StateTransition): string {
    const suffix = typeof transition.label === "string" ? ` : ${label(transition.label)}` : "";
    return `${INDENT}${idSanitize(transition.from)} --> ${idSanitize(transition.to)}${suffix}`;
};

export const emitStateDiagram = function emitStateDiagram(model: StateModel): string {
    return [
        "stateDiagram-v2",
        ...accLines(model),
        ...model.nodes
            .toSorted(byNodeId)
            .map((node) => `${INDENT}state "${label(node.label)}" as ${idSanitize(node.id)}`),
        ...(typeof model.initial === "string" ? [`${INDENT}[*] --> ${idSanitize(model.initial)}`] : []),
        ...model.transitions.toSorted(byTransition).map(transitionLine),
    ].join("\n");
};
```