Charts

TwFlowchart

TwFlowchart is a Blazor flowchart: the steps of a process as boxes in columns, with an arrow for every link from one step to the next.

Last updated 18 October 2026

Please be aware this component is new, may have bugs and/or be subject to change. Please report any bugs at https://github.com/twblazor/twblazor/issues.

Basic usage

TwFlowchart draws each ChartGraphNode as a box and each ChartGraphLink as an arrow. Steps are set out in columns from left to right, each to the right of every step that leads to it. Links refer to nodes by Id.

Review process

RAZOR

<TwChart Title="Review process">
    <TwFlowchart Nodes="@_reviewSteps" Links="@_reviewLinks" Height="ChartHeight.Small" />
</TwChart>

CSHARP

@code {
    private readonly ChartGraphNode[] _reviewSteps = [new("submit", "Submit"), new("review", "Review"), new("publish", "Publish")];
    
    private readonly ChartGraphLink[] _reviewLinks = [new("submit", "review"), new("review", "publish")];
}

Branches

Steps reached from the same step share a column and are stacked in the order given, so a decision fans out and its branches join again further on.

Handling a support ticket

RAZOR

<TwChart Title="Handling a support ticket">
    <TwFlowchart Nodes="@_ticketSteps" Links="@_ticketLinks" SourceHeader="Step" TargetHeader="Next step" />
</TwChart>

CSHARP

@code {
    private readonly ChartGraphNode[] _ticketSteps =
    [
        new("open", "Opened"), new("triage", "Triage"),
        new("answer", "Answer"), new("fix", "Fix"), new("refund", "Refund"),
        new("close", "Closed")
    ];
    
    private readonly ChartGraphLink[] _ticketLinks =
    [
        new("open", "triage"),
        new("triage", "answer"), new("triage", "fix"), new("triage", "refund"),
        new("answer", "close"), new("fix", "close"), new("refund", "close")
    ];
}

Parallel work

A pipeline that runs several jobs at once shows as a column of boxes fed by one step and feeding the next.

Release pipeline

RAZOR

<TwChart Title="Release pipeline">
    <TwFlowchart Nodes="@_pipelineSteps" Links="@_pipelineLinks" Height="ChartHeight.Large" />
</TwChart>

CSHARP

@code {
    private readonly ChartGraphNode[] _pipelineSteps =
    [
        new("commit", "Commit"), new("build", "Build"),
        new("unit", "Unit tests"), new("browser", "Browser tests"), new("a11y", "Accessibility"), new("lint", "Lint"),
        new("package", "Package"), new("deploy", "Deploy")
    ];
    
    private readonly ChartGraphLink[] _pipelineLinks =
    [
        new("commit", "build"),
        new("build", "unit"), new("build", "browser"), new("build", "a11y"), new("build", "lint"),
        new("unit", "package"), new("browser", "package"), new("a11y", "package"), new("lint", "package"),
        new("package", "deploy")
    ];
}

Setting the column

Set a node's Stage to move it further right than its links alone would place it. Here the manual check is held back to line up with the final column of automatic checks.

Order checks

RAZOR

<TwChart Title="Order checks">
    <TwFlowchart Nodes="@_orderSteps" Links="@_orderLinks" Height="ChartHeight.Small" />
</TwChart>

CSHARP

@code {
    private readonly ChartGraphNode[] _orderSteps =
    [
        new("order", "Order"), new("stock", "Stock"), new("fraud", "Fraud"),
        new("manual", "Manual check", Stage: 2), new("ship", "Ship")
    ];
    
    private readonly ChartGraphLink[] _orderLinks =
    [
        new("order", "stock"), new("stock", "fraud"), new("order", "manual"), new("fraud", "ship"), new("manual", "ship")
    ];
}

When to use

Use a flowchart for the steps of a process. A name too long for its box is cut short; the tooltip has it in full. Link values are not shown: to show how much flows along each link, use TwSankeyChart.

Summary

Tooltips and the table view give the source and target of each link. The arrow keys move through the steps in the order given.

Shared features

The legend, tooltips, keyboard navigation, table view, value formatting, height and empty state work the same on every chart. See TwChart for those options.

The plot is a single Tab stop. Each data point is announced with its series and value as focus reaches it, and the table view presents the same data without the plot.

Key	What it does
`Tab`	Moves focus into the plot, onto the data point last visited.
`Arrow Right` or `Arrow Down`	Moves to the next data point.
`Arrow Left` or `Arrow Up`	Moves to the previous data point.
`Home` or `End`	Moves to the first or last data point.
`Escape`	Hides the tooltip of the focused data point.
`Enter` or `Space`	On a legend item: shows or hides that series. On the table button: switches between the chart and its data table.

TwFlowchart

Basic usage

Branches

Parallel work

Setting the column

When to use

Summary

Shared features

Keyboard navigation