FlowCanvas

LocalNo document

Mermaid Syntax

flowchart TD
  %% FlowCanvas capability showcase
  subgraph Input["Input & Validation"]
    subgraph CustomerZone["Customer App Zone"]
      A["Raw request"] --> B(Rounded step)
      B --> C([Stadium queue])
    end
    C --> D{Valid payload?}
    D -->|yes| E((Ready))
    D -->|no| F[[Retry handler]]
  end

subgraph Processing["Processing"]
    direction LR
    E ==> G[Process]
    F -.-> G
    G --- H[Audit trail]
    G -->|result| I["Output / Response"]

subgraph Ops["Ops"]
      H --> O[Metrics]
    end
  end

%% Marker + bidirectional edge examples
  I --o J[Circle marker]
  J --x K[Cross marker]
  K <--> L[Bidirectional arrow]
  L <-.-> M[Bidirectional dotted]
  M <==> N[Bidirectional thick]

classDef primary fill:#1e293b,stroke:#3b82f6,color:#e2e8f0,stroke-width:2px
  classDef warn fill:#3f1d2e,stroke:#f59e0b,color:#fde68a,stroke-width:2px
  class A,B,C,E,G,H,I,O primary
  class D,F warn
  style N fill:#052e16,stroke:#22c55e,color:#bbf7d0
  linkStyle 0 stroke:#60a5fa,stroke-width:2.5px,color:#bfdbfe
  linkStyle 6 stroke:#f59e0b,stroke-dasharray:6 4,color:#fde68a
  click I "https://example.com" "Output node docs"

0 lines

No Mermaid directive lines (style, classDef, class, linkStyle) are present.

Re-color

0N / 0E selected

Select a node or edge to inspect computed Mermaid styles and their directive source.

React Flow

0 nodes · 0 edges

Zoom: 100%