reactflow-architecture-diagrams

What problem does it solve?

React Flow architecture diagrams and product pages often become inconsistent, hard to review, and error-prone without a shared contract for node/edge semantics, routing, and verification.

Core Features & Use Cases

• Interactive React Flow diagram playbook: standardizes node and edge patterns, animated canvas traffic, and component conventions for maintainable diagrams.
• Consistent diagram-to-doc workflow: guides when to use React Flow versus Mermaid and how to wire routes, update README paths, and keep references aligned.
• Cloudflare-scoped diagram conventions: supports optional Cloudflare orange shell grouping with correct parent/child nesting and coordinate conversion.
• Edge-case clarity for identity flows: distinguishes verification vs issuance (e.g., JWKS/metadata fetch vs OIDC login) using visual semantics and page copy.

Quick Start

Use the reactflow-architecture-diagrams skill to add a new Diagram.tsx page for your SPA that follows the rules in rules/815-reactflow-diagrams.mdc.