Cliquez sur une flèche partant de l'état actif pour déclencher la transition.

currentState (état actif de la commande)

direction

Python

bpm.flowDiagram(
    states=[
        {"value": "received", "label": "Reçue", "color": "info"},
        {"value": "preparation", "label": "Préparation"},
        {"value": "shipped", "label": "Expédiée", "color": "warning"},
        {"value": "delivered", "label": "Livrée", "color": "success", "terminal": True},
        {"value": "cancelled", "label": "Annulée", "color": "error", "terminal": True},
    ],
    transitions=[
        {"from": "received", "to": "preparation", "label": "Valider"},
        {"from": "preparation", "to": "shipped", "label": "Expédier"},
        {"from": "shipped", "to": "delivered", "label": "Livrer"},
        {"from": ["received", "preparation"], "to": "cancelled", "label": "Annuler"},
    ],
    current_state="received",
)

Prop	Type	Défaut	Requis	Description
`states`	`{ value, label, color?, terminal? }[]`	—	Oui	Liste des états. `color` ∈ default \| info \| success \| warning \| error ; `terminal` ajoute une double bordure.
`transitions`	`{ from, to, label }[]`	—	Oui	Transitions entre états. `from` accepte une valeur ou un tableau de valeurs sources.
`currentState`	`string`	—	Non	Valeur de l'état actif (bordure accent + halo). Les transitions non atteignables sont grisées.
`onTransition`	`(from: string, to: string) => void`	—	Non	Callback au clic sur une flèche partant de l'état courant ; rend ces flèches cliquables.
`direction`	`"horizontal" \| "vertical"`	horizontal	Non	Orientation du diagramme.
`className`	`string`	—	Non	Classes CSS additionnelles.

Exemples

bpm.flowDiagram(
    states=[
        {"value": "draft", "label": "Brouillon"},
        {"value": "review", "label": "En relecture", "color": "info"},
        {"value": "published", "label": "Publié", "color": "success", "terminal": True},
    ],
    transitions=[
        {"from": "draft", "to": "review", "label": "Soumettre"},
        {"from": "review", "to": "published", "label": "Publier"},
        {"from": "review", "to": "draft", "label": "Renvoyer"},
    ],
    current_state="review",
)

bpm.flowDiagram(
    states=[
        {"value": "open", "label": "Ouvert", "color": "info"},
        {"value": "resolved", "label": "Résolu", "color": "success", "terminal": True},
        {"value": "closed", "label": "Fermé", "color": "error", "terminal": True},
    ],
    transitions=[
        {"from": "open", "to": "resolved", "label": "Résoudre"},
        {"from": ["open", "resolved"], "to": "closed", "label": "Fermer"},
    ],
    current_state="open",
    direction="vertical",
    on_transition=handle_transition,
)