Flowchart — interactive + styled

Click events, animated edges, classDef-based theming, linkStyle, icon shapes via Iconify.

MermaidFlow & Process Mermaid syntax docs

Template previewMermaid

Rendering…

Make it your own.

flowchart LR
    U@{ icon: "fa:user", form: "circle", label: "User", pos: "t", h: 60 }
    U --> A:::primary
    A[Submit] e1@--> B{Valid?}:::accent
    B -- yes --> C[Process]:::primary
    B -- no  --> D[Reject]:::warn
    e1@{ animate: true, animation: fast }

    classDef primary fill:#dbeafe,stroke:#1f47f5,color:#0f172a,stroke-width:1.5
    classDef accent  fill:#fde68a,stroke:#b45309,color:#1f2937
    classDef warn    fill:#fee2e2,stroke:#dc2626,color:#7f1d1d

    linkStyle 0 stroke:#1f47f5,stroke-width:2px