16 KiB

Raw Blame History

Interactive Documentation Examples

This document provides interactive examples and components that enhance the BMAD Method documentation experience.

Interactive Workflow Visualizer

BMAD Method Workflow

▶️ Start 🔄 Reset

📋

Requirements

Product Owner

<div class="workflow-arrow" id="arrow-1"></div>

<div class="workflow-step" id="step-2" data-step="architecture">
  <div class="step-icon">🏗️</div>
  <div class="step-title">Architecture</div>
  <div class="step-persona">System Architect</div>
</div>

<div class="workflow-arrow" id="arrow-2"></div>

<div class="workflow-step" id="step-3" data-step="design">
  <div class="step-icon">🎨</div>
  <div class="step-title">Design</div>
  <div class="step-persona">UX/UI Designer</div>
</div>

<div class="workflow-arrow" id="arrow-3"></div>

<div class="workflow-step" id="step-4" data-step="implementation">
  <div class="step-icon">💻</div>
  <div class="step-title">Implementation</div>
  <div class="step-persona">Developer</div>
</div>

Requirements Phase

Product Owner defines project scope, user stories, and acceptance criteria.

Stakeholder interviews
User story creation
Acceptance criteria definition

<div class="detail-panel" id="detail-architecture">
  <h4>Architecture Phase</h4>
  <p>System Architect designs technical approach and system structure.</p>
  <ul>
    <li>Technology selection</li>
    <li>System design</li>
    <li>Integration planning</li>
  </ul>
</div>

<div class="detail-panel" id="detail-design">
  <h4>Design Phase</h4>
  <p>UX/UI Designer creates user experience and interface specifications.</p>
  <ul>
    <li>User experience design</li>
    <li>Interface mockups</li>
    <li>Design system components</li>
  </ul>
</div>

<div class="detail-panel" id="detail-implementation">
  <h4>Implementation Phase</h4>
  <p>Developer builds the solution according to specifications.</p>
  <ul>
    <li>Code implementation</li>
    <li>Testing and validation</li>
    <li>Documentation</li>
  </ul>
</div>

Persona Comparison Tool

Compare BMAD Personas

Select personas to compare their roles, expertise, and deliverables

👔

Project Manager

<label class="persona-checkbox">
  <input type="checkbox" value="architect" onchange="updateComparison()">
  <div class="persona-card">
    <div class="persona-icon">🏗️</div>
    <div class="persona-name">System Architect</div>
  </div>
</label>

<label class="persona-checkbox">
  <input type="checkbox" value="ux-ui" onchange="updateComparison()">
  <div class="persona-card">
    <div class="persona-icon">🎨</div>
    <div class="persona-name">UX/UI Designer</div>
  </div>
</label>

<label class="persona-checkbox">
  <input type="checkbox" value="developer" onchange="updateComparison()">
  <div class="persona-card">
    <div class="persona-icon">💻</div>
    <div class="persona-name">Developer</div>
  </div>
</label>

Aspect	Project Manager	System Architect	UX/UI Designer	Developer
Primary Focus	Project coordination and delivery	Technical architecture and design	User experience and interface	Code implementation and quality
Key Deliverables	PRDs, project plans, status reports	Architecture docs, technical specs	Wireframes, prototypes, design systems	Code, tests, documentation
Expertise Areas	Planning, stakeholder management	System design, technology selection	User research, visual design	Programming, testing, optimization
Typical Timeline	Throughout project lifecycle	Early planning and design phases	Design and early development	Implementation and testing phases

Progress Tracking Component

Sprint Progress Tracker

Sprint 2 Progress 85%

✅

Story 2.1: "How It Works" Documentation

13 points

<div class="story-item completed">
  <div class="story-status">✅</div>
  <div class="story-content">
    <div class="story-title">Story 2.2: System Architecture Diagrams</div>
    <div class="story-points">8 points</div>
  </div>
</div>

<div class="story-item completed">
  <div class="story-status">✅</div>
  <div class="story-content">
    <div class="story-title">Story 2.3: User Journey Documentation</div>
    <div class="story-points">8 points</div>
  </div>
</div>

<div class="story-item in-progress">
  <div class="story-status">🔄</div>
  <div class="story-content">
    <div class="story-title">Story 2.4: Visual Documentation Elements</div>
    <div class="story-points">5 points</div>
  </div>
</div>

Team Velocity: 34 points/sprint Completed: 29/34 points

These interactive examples demonstrate how visual elements can enhance understanding and engagement with BMAD Method documentation.

16 KiB Raw Blame History