Fractalized Project Planning

A universal platform for structured project planning using fractalized question-answer methodology with interactive visualization.

What is Fractalized Planning?

Fractalized Project Planning breaks down complex projects into hierarchical question-answer pairs using the W5H framework (Who, What, When, Where, Why, How). Each question can "fractal" into deeper sub-questions, creating a comprehensive understanding while automatically detecting conflicts and dependencies.

Key Benefits:

• ✅ Clarity over chaos - See the whole while working on parts
• ✅ Visual dependency mapping - Understand how decisions affect each other
• ✅ Automatic conflict detection - Catch circular dependencies and bottlenecks early
• ✅ Scale-adaptive depth - Simple projects stay simple, complex ones get detail where needed
• ✅ Multiple project types - Software, research, business, and custom templates

Quick Start

Option 1: Use as npm Package (Recommended)

Install in your React project:

npm install fractalized-project-planning

Then import and use:

import { MindMap, parseMarkdown } from 'fractalized-project-planning';

// Load your markdown plan
const markdownContent = `...your plan here...`;
const parsedData = parseMarkdown(markdownContent);

// Render the mind map
function MyApp() {
  return <MindMap parsedData={parsedData} fileName="my-plan.md" />;
}

Don't forget to import the styles:

import 'fractalized-project-planning/dist/lib/style.css';

Option 2: Use Standalone/iframe

Embed the pre-built app in any website:

<iframe
  src="https://your-deployment.pages.dev"
  width="100%"
  height="800px"
  frameborder="0"
></iframe>

See Deployment Guide for Cloudflare Pages setup.

Option 3: Clone and Develop

# Clone the repository
git clone https://github.com/alexg-g/fractalized-project-planning.git
cd fractalized-project-planning

# Install dependencies
npm install

# Start the visualization widget
npm run dev

Opens at http://localhost:5173/

Create Your First Plan (5 minutes)

# Copy a template
cp fractalized/method/templates/software-project.md my-plan.md

# Edit in your favorite editor
# 1. Define success criteria
# 2. Answer root questions (Who, What, When, How, etc.)
# 3. Add one level of depth where needed

# Visualize it
# Drag my-plan.md into the widget at localhost:5173

Full guide: 5-Minute Quick Start

Platform Architecture

fractalized-project-planning/
├── fractalized/              # Main framework (BMAD-METHOD inspired structure)
│   ├── core/                 # 📊 Visualization Widget
│   │   ├── src/              # React + ReactFlow components
│   │   ├── docs/             # Widget-specific documentation
│   │   └── vite.config.ts    # Build configuration
│   │
│   ├── method/               # 📚 Planning Methodology
│   │   ├── guides/           # How-to guides and concepts
│   │   ├── templates/        # Project templates (software, research, business)
│   │   └── workflows/        # Step-by-step workflows (init, validate)
│   │
│   ├── _cfg/                 # ⚙️ User Customizations (update-safe)
│   │   ├── preferences.json  # Your settings
│   │   └── templates/        # Custom templates
│   │
│   └── cli/                  # 🔧 Command-Line Tools (future)
│       ├── installer.ts      # Interactive setup wizard
│       └── validator.ts      # Syntax validation
│
├── docs/                     # 📖 Documentation Hub
│   ├── index.md              # Central documentation index
│   ├── quick-start.md        # 5-minute tutorial
│   └── installation.md       # Setup guide
│
└── examples/                 # 💡 Sample Plans
    └── orbital_fractalized_planning.md

Update-Safe Design: Your customizations in fractalized/_cfg/ persist through all framework updates.

Core Modules

📊 Visualization Widget (fractalized/core/)

Interactive mind map for exploring fractalized plans.

Features:

• Hierarchical tree layout with color-coded depth (L1→L5)
• Automatic conflict detection (circular dependencies, bottlenecks)
• Dependency visualization with animated edges
• Export as PNG or JSON
• Pan, zoom, and minimap navigation

Tech Stack: React 18, TypeScript, ReactFlow, dagre layout

Widget Documentation →

📚 Planning Method (fractalized/method/)

Guides, templates, and workflows for creating fractalized plans.

Guides:

• Getting Started - Core concepts
• W5H Framework - Question types
• Dependency Mapping - Relationship mapping

Templates:

• Software Project - Apps and systems
• Research Project - Academic research
• Business Plan - Ventures and strategy

Workflows:

• Workflow: Init - Start a new plan
• Workflow: Validate - Check plan quality

⚙️ User Configuration (fractalized/_cfg/)

Your customizations that survive framework updates.

What goes here:

• preferences.json - Visualization settings, defaults, export options
• templates/ - Your custom project templates
• Future: Agent configurations, workflows, color schemes

Configuration Guide →

How It Works

1. Define Success Criteria

**SUCCESS CRITERIA:** Launch MVP with 1,000 users and 4.5+ rating in 3 months

2. Ask W5H Questions

### QUESTION [Root.Who.1]
**Question:** Who is this for?
**Breadcrumb:** Target Users
**Depth:** L1

**ANSWER [Root.Who.1]:** Families wanting private communication
**Dependencies:** []
**Branch Status:** Explore deeper

3. Fractal Deeper

### QUESTION [Who.1.What.1]
**Question:** What specific needs do they have?
**Breadcrumb:** Target Users > User Needs
**Depth:** L2

**ANSWER [Who.1.What.1]:** Privacy, ease of use, group features
**Dependencies:** [Why.1-purpose (needs align with mission)]
**Branch Status:** Sufficient clarity

4. Visualize & Detect Conflicts

The widget automatically:

• ✅ Builds hierarchical mind map
• ✅ Detects circular dependencies
• ✅ Flags high-dependency bottlenecks
• ✅ Shows cross-branch relationships

Visual Hierarchy

🎯 SUCCESS_CRITERIA (Root - Orange/Gold)
├── Root.Who.1 (L1 - Blue)
│   ├── Who.1.How.1 (L2 - Green)
│   │   └── Who.1.How.1.What.1 (L3 - Purple)
│   └── Who.1.What.1 (L2 - Green)
├── Root.What.1 (L1 - Blue)
│   └── What.1.How.1 (L2 - Green)
└── Root.How.1 (L1 - Blue)

Edge Types:

• Solid gray = Hierarchical parent-child relationships
• Red dotted (animated) = Cross-dependencies

Documentation

Start Here:

• 📖 Documentation Hub - Central index
• 🚀 Quick Start - 5-minute tutorial
• 💻 Installation - Setup guide

Methodology:

• Core Concepts
• W5H Framework
• Dependency Mapping

Templates & Workflows:

• Software Project Template
• Research Project Template
• Business Plan Template

Use Cases

Software Development

• Feature planning and architecture decisions
• MVP scoping and technical debt reduction
• Team alignment on complex projects

Research & Academia

• Study design and experiment planning
• Literature review organization
• Grant proposal structuring

Business & Strategy

• Startup planning and product launches
• Market entry and strategic initiatives
• Organizational decision mapping

Roadmap

Current (v1.0)

• ✅ Core visualization widget
• ✅ Methodology guides and templates
• ✅ Conflict detection
• ✅ PNG/JSON export
• ✅ Update-safe configuration

Coming Soon

• [ ] CLI installer and validator
• [ ] Real-time collaborative editing
• [ ] AI-assisted plan generation
• [ ] Template marketplace
• [ ] Browser extension
• [ ] Self-hosted option

Integration

Embedding in Websites

Standalone Deployment:

<a href="https://planning.yoursite.com">Open Planning Tool</a>

IFrame Embed:

<iframe src="https://planning.yoursite.com" width="100%" height="800px"></iframe>

Integration Guide →

Tech Stack

• Vite - Fast build tool
• React 18 - UI framework
• TypeScript - Type safety
• ReactFlow - Graph visualization
• dagre - Hierarchical layout
• html-to-image - PNG export

Contributing

We welcome contributions! See Contributing Guide

Areas to contribute:

• Custom templates for new domains
• Workflow improvements
• Bug fixes and features
• Documentation enhancements

License

MIT License

Inspiration

This project's structure is inspired by BMAD-METHOD's modular, update-safe architecture. The fractalized planning methodology itself is original.

Related Projects

• Pure Karma Labs - Parent organization
• RezNet AI - Multi-agent AI platform
• Medical Bill Rescue - Healthcare billing tool

Get Started: Quick Start Guide | Documentation | Templates