reactflow-architecture-diagrams

Generate interactive React Flow architecture diagrams with consistent node and edge semantics.

15|2|Updated Dec 13, 2025

Search Tags:#typescript #cloudflare #tailwind #architecture diagrams #interactive visualization #reactflow #ui routing

Ready to run

npx skills add https://github.com/d-padmanabhan/agent-engineering-handbook --skill reactflow-architecture-diagrams

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: reactflow-architecture-diagrams
Source: https://github.com/d-padmanabhan/agent-engineering-handbook/tree/main/skills/reactflow-architecture-diagrams
Command: npx skills add https://github.com/d-padmanabhan/agent-engineering-handbook --skill reactflow-architecture-diagrams

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

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.

Frequently Asked Questions about reactflow-architecture-diagrams

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I build interactive React Flow architecture diagrams for a TypeScript SPA?▼

Build interactive React Flow architecture diagrams by generating a Diagram.tsx page that standardizes node and edge semantics, applies memoized nodeTypes at module scope, and verifies runtime correctness through post-change lint and build checks.

When should I use React Flow versus Mermaid for architecture visualization?▼

Use React Flow for interactive, maintainable architecture maps requiring animated canvas traffic and custom component conventions, whereas Mermaid suits simpler static documentation needs without complex routing or interactive canvas semantics.

Can I group Cloudflare-scoped nodes in a React Flow diagram?▼

Yes, you can group Cloudflare-scoped nodes using an optional orange shell grouping in React Flow, which ensures correct parent and child nesting alongside proper coordinate conversion for the architecture diagram.

How do I represent identity flows like OIDC login and JWKS metadata fetch in React Flow?▼

Represent identity flows in React Flow by distinguishing verification processes like JWKS metadata fetch from OIDC login issuance, using specific visual edge semantics and accompanying page copy for clarity.

What are the limitations of using custom node and edge types in React Flow architecture diagrams?▼

React Flow architecture diagrams require strict adherence to handle and edge semantics rules, memoized nodeTypes at module scope, and post-change lint verification to prevent runtime correctness issues and inconsistent routing.