ChartFlow AI is an innovative, AI-integrated architecture design assistant that transforms how business logic is converted into scalable, production-ready system blueprints.
With real-time diagram generation, dynamic documentation workflows, and interactive visual interfaces, ChartFlow AI pioneers a new class of software architecture intelligence — combining engineering discipline with generative AI.
Designed to simplify, accelerate, and automate software architecture design for startups, enterprises, and research teams.
Input your business requirements or paste technical specifications. ChartFlow AI instantly generates:
- 📐 Mermaid-based system architecture diagrams
- 📄 Complete SDLC documentation
- 📊 Scalable cloud infrastructure suggestions
- 🔒 Risk analysis and security posture evaluation
Every AI-generated flow includes:
- Visual Architecture via Mermaid.js
- Engineering Documentation (modular, versionable)
- Risk Analysis (scalability, security, and compliance)
From microservices to monoliths — outputs support AWS, Azure, GCP, or on-prem DevSecOps pipelines.
Leverages real-world feedback animations and interactive review cards to demonstrate project impact in production environments.
| Technology | Purpose |
|---|---|
| Next.js 15 | App Router with edge-ready rendering |
| TypeScript 5 | Enterprise-grade type safety |
| Framer Motion | Fluid UI transitions and scroll animations |
| Mermaid.js | Real-time diagram rendering (flowcharts/UML) |
| TailwindCSS v4 | Utility-first design with responsive theming |
| @shadcn/ui | Modern component primitives |
| tsparticles-slim | Lightweight animated particle effects |
| React Parallax | Motion-rich experience across scroll layers |
| @splinetool/react | Interactive 3D scene backgrounds |
ChartFlow AI contributes to the global software development ecosystem by:
- ⚙️ Standardizing architecture generation across technical skill levels
- 🧠 Democratizing system design using LLM-powered tooling
- 🌍 Enabling cross-border, multilingual adoption with scalable interfaces
- 📊 Improving security analysis literacy via visual diagrams and overlays
- 🚀 Reducing planning time by 70% in internal usage tests
This tool was built to reflect an extraordinary level of originality and functionality, satisfying several criteria: original contribution, critical role, and published work in major technical repositories.
/app → App router pages
/components → UI building blocks (cards, diagrams)
/animations → Particle and 3D scene wrappers
/public/screens → Architecture previews and case study assets
/styles → Tailwind and custom utility classes
/utils → Mermaid parsing, markdown rendering, constants
# 1. Install dependencies
npm install
# 2. Start the development server
npm run devBrandon Atonte
Software Engineer | AI Systems Architect
- GitHub: @Fangmbeng
- Dev.to: @BrandonAtonte
- Website: ChartFlow.ai
This project is licensed under a custom portfolio license — for demonstration and scholarly purposes only.
Commercial or clinical deployment requires prior consent.
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.