Sanity Library Reference Docs
    Preparing search index...

    Interface WorkflowDiagramProps

    interface WorkflowDiagramProps {
        currentStage?: string;
        definition: {
            abort?: AbortBlock;
            description?: string;
            fields?: FieldEntry[];
            groups?: Group[];
            initialStage: string;
            lifecycle?: WorkflowLifecycle;
            name: string;
            predicates?: Record<string, string>;
            roleAliases?: RoleAliases;
            semantics?: Semantic[];
            stages: Stage[];
            start?: StartBlock;
            title: string;
        };
        devMode?: boolean;
        evaluation?: WorkflowEvaluation;
        explain?: boolean;
        fill?: boolean;
        gatedTransitions?: readonly string[];
        height?: string
        | number;
        history?: readonly HistoryEntry[];
        initialView?: "fit" | "actual-size";
        local?: LocalView;
        static?: boolean;
    }
    Index

    Properties

    currentStage?: string

    Highlight this stage as where the instance is now.

    definition: {
        abort?: AbortBlock;
        description?: string;
        fields?: FieldEntry[];
        groups?: Group[];
        initialStage: string;
        lifecycle?: WorkflowLifecycle;
        name: string;
        predicates?: Record<string, string>;
        roleAliases?: RoleAliases;
        semantics?: Semantic[];
        stages: Stage[];
        start?: StartBlock;
        title: string;
    }

    The whole definition, not just its stages: definition-level vocabulary (field titles, author predicates) feeds features like human-language explanations, so the contract asks for it up front.

    devMode?: boolean

    Tooling mode: tooltips additionally show machine names and raw GROQ conditions. Never on for end users.

    evaluation?: WorkflowEvaluation

    Upgrades the explanations where it speaks: the current stage's transitions and gates get real ✓/✗ verdicts, the rest of the chart stays static. Only read when WorkflowDiagramProps.explain is on — that's the feature gate, this is its data.

    explain?: boolean

    Explain the workflow in human language: tooltips gain each gate's phrased requirements ("«Review decision» must be 'approve'") — derived from the definition alone, so it works without an instance.

    fill?: boolean

    Fill the parent's width and use height as supplied. Defaults to false. A height of '100%' fills a sized parent.

    gatedTransitions?: readonly string[]

    Names of current-stage transitions that cannot fire yet — their markers show a lock ("can't proceed, criteria unmet").

    height?: string | number

    Canvas height, defaulting to 360. Without WorkflowDiagramProps.fill, a number is a pixel ceiling: smaller graphs shrink the canvas. CSS strings and heights with fill enabled are used as supplied.

    history?: readonly HistoryEntry[]

    Instance history; tones visited stages and traversed transitions.

    initialView?: "fit" | "actual-size"

    How the diagram opens. Defaults to 'fit'.

    • 'fit' shows the whole workflow, scaled down to fit the canvas and never enlarged beyond 1:1.
    • 'actual-size' opens at 1:1, so every workflow renders at the same scale. Along each axis where the workflow fits the canvas, the workflow is centered. Along an axis where it overflows, the current stage is centered, or the initial stage when WorkflowDiagramProps.currentStage is unset. The rest stays cropped until the user pans, zooms, or uses the fit button.

    A WorkflowDiagramProps.static diagram always opens with 'fit'. The value is read on mount; remount the diagram to apply a change.

    local?: LocalView

    Context snippet around the current stage instead of the whole workflow: only the current stage's own transitions render (LocalView.show picks next / previous / both). The hidden side collapses into short ghost-anchored stubs whose tooltips name the hidden stage. Requires currentStage.

    static?: boolean

    Frozen canvas: no pan/zoom, no zoom controls — shows its initial fit. Tooltips and hover highlight stay live.