623 lines
16 KiB
Markdown
623 lines
16 KiB
Markdown
# Interactive Documentation Examples
|
|
|
|
This document provides interactive examples and components that enhance the BMAD Method documentation experience.
|
|
|
|
## Interactive Workflow Visualizer
|
|
|
|
<div class="workflow-visualizer">
|
|
<div class="workflow-header">
|
|
<h3>BMAD Method Workflow</h3>
|
|
<div class="workflow-controls">
|
|
<button class="btn-play" onclick="startWorkflow()">▶️ Start</button>
|
|
<button class="btn-reset" onclick="resetWorkflow()">🔄 Reset</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="workflow-canvas">
|
|
<div class="workflow-step" id="step-1" data-step="requirements">
|
|
<div class="step-icon">📋</div>
|
|
<div class="step-title">Requirements</div>
|
|
<div class="step-persona">Product Owner</div>
|
|
</div>
|
|
|
|
<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>
|
|
</div>
|
|
|
|
<div class="workflow-details" id="workflow-details">
|
|
<div class="detail-panel" id="detail-requirements">
|
|
<h4>Requirements Phase</h4>
|
|
<p>Product Owner defines project scope, user stories, and acceptance criteria.</p>
|
|
<ul>
|
|
<li>Stakeholder interviews</li>
|
|
<li>User story creation</li>
|
|
<li>Acceptance criteria definition</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<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>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function startWorkflow() {
|
|
const steps = document.querySelectorAll('.workflow-step');
|
|
const arrows = document.querySelectorAll('.workflow-arrow');
|
|
|
|
steps.forEach(step => step.classList.remove('active', 'completed'));
|
|
arrows.forEach(arrow => arrow.classList.remove('active'));
|
|
|
|
let currentStep = 0;
|
|
const interval = setInterval(() => {
|
|
if (currentStep > 0) {
|
|
steps[currentStep - 1].classList.remove('active');
|
|
steps[currentStep - 1].classList.add('completed');
|
|
arrows[currentStep - 1].classList.add('active');
|
|
}
|
|
|
|
if (currentStep < steps.length) {
|
|
steps[currentStep].classList.add('active');
|
|
showStepDetails(steps[currentStep].dataset.step);
|
|
currentStep++;
|
|
} else {
|
|
clearInterval(interval);
|
|
}
|
|
}, 2000);
|
|
}
|
|
|
|
function resetWorkflow() {
|
|
const steps = document.querySelectorAll('.workflow-step');
|
|
const arrows = document.querySelectorAll('.workflow-arrow');
|
|
|
|
steps.forEach(step => step.classList.remove('active', 'completed'));
|
|
arrows.forEach(arrow => arrow.classList.remove('active'));
|
|
|
|
document.getElementById('workflow-details').style.display = 'none';
|
|
}
|
|
|
|
function showStepDetails(stepName) {
|
|
const detailsContainer = document.getElementById('workflow-details');
|
|
const panels = document.querySelectorAll('.detail-panel');
|
|
|
|
panels.forEach(panel => panel.style.display = 'none');
|
|
document.getElementById(`detail-${stepName}`).style.display = 'block';
|
|
detailsContainer.style.display = 'block';
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.workflow-visualizer {
|
|
border: 1px solid var(--bmad-gray-200);
|
|
border-radius: 8px;
|
|
padding: var(--space-6);
|
|
margin: var(--space-6) 0;
|
|
background: white;
|
|
}
|
|
|
|
.workflow-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: var(--space-6);
|
|
}
|
|
|
|
.workflow-controls button {
|
|
margin-left: var(--space-2);
|
|
padding: var(--space-2) var(--space-4);
|
|
border: none;
|
|
border-radius: 4px;
|
|
background: var(--bmad-primary);
|
|
color: white;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.workflow-canvas {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: var(--space-6);
|
|
}
|
|
|
|
.workflow-step {
|
|
text-align: center;
|
|
padding: var(--space-4);
|
|
border: 2px solid var(--bmad-gray-300);
|
|
border-radius: 8px;
|
|
background: var(--bmad-gray-50);
|
|
transition: all 0.3s ease;
|
|
min-width: 120px;
|
|
}
|
|
|
|
.workflow-step.active {
|
|
border-color: var(--bmad-primary);
|
|
background: var(--bmad-primary);
|
|
color: white;
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.workflow-step.completed {
|
|
border-color: var(--bmad-success);
|
|
background: var(--bmad-success);
|
|
color: white;
|
|
}
|
|
|
|
.step-icon {
|
|
font-size: 2rem;
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
|
|
.step-title {
|
|
font-weight: 600;
|
|
margin-bottom: var(--space-1);
|
|
}
|
|
|
|
.step-persona {
|
|
font-size: 0.875rem;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.workflow-arrow {
|
|
width: 40px;
|
|
height: 2px;
|
|
background: var(--bmad-gray-300);
|
|
position: relative;
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
.workflow-arrow.active {
|
|
background: var(--bmad-success);
|
|
}
|
|
|
|
.workflow-arrow::after {
|
|
content: '';
|
|
position: absolute;
|
|
right: -6px;
|
|
top: -4px;
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 8px solid var(--bmad-gray-300);
|
|
border-top: 5px solid transparent;
|
|
border-bottom: 5px solid transparent;
|
|
transition: border-left-color 0.3s ease;
|
|
}
|
|
|
|
.workflow-arrow.active::after {
|
|
border-left-color: var(--bmad-success);
|
|
}
|
|
|
|
.workflow-details {
|
|
display: none;
|
|
background: var(--bmad-gray-50);
|
|
border-radius: 6px;
|
|
padding: var(--space-4);
|
|
}
|
|
|
|
.detail-panel {
|
|
display: none;
|
|
}
|
|
|
|
.detail-panel h4 {
|
|
color: var(--bmad-primary);
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
|
|
.detail-panel ul {
|
|
margin-left: var(--space-4);
|
|
}
|
|
</style>
|
|
|
|
## Persona Comparison Tool
|
|
|
|
<div class="persona-comparison">
|
|
<div class="comparison-header">
|
|
<h3>Compare BMAD Personas</h3>
|
|
<p>Select personas to compare their roles, expertise, and deliverables</p>
|
|
</div>
|
|
|
|
<div class="persona-selector-grid">
|
|
<label class="persona-checkbox">
|
|
<input type="checkbox" value="pm" onchange="updateComparison()">
|
|
<div class="persona-card">
|
|
<div class="persona-icon">👔</div>
|
|
<div class="persona-name">Project Manager</div>
|
|
</div>
|
|
</label>
|
|
|
|
<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>
|
|
</div>
|
|
|
|
<div class="comparison-table" id="comparison-table" style="display: none;">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Aspect</th>
|
|
<th class="persona-column" data-persona="pm">Project Manager</th>
|
|
<th class="persona-column" data-persona="architect">System Architect</th>
|
|
<th class="persona-column" data-persona="ux-ui">UX/UI Designer</th>
|
|
<th class="persona-column" data-persona="developer">Developer</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><strong>Primary Focus</strong></td>
|
|
<td class="persona-cell" data-persona="pm">Project coordination and delivery</td>
|
|
<td class="persona-cell" data-persona="architect">Technical architecture and design</td>
|
|
<td class="persona-cell" data-persona="ux-ui">User experience and interface</td>
|
|
<td class="persona-cell" data-persona="developer">Code implementation and quality</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>Key Deliverables</strong></td>
|
|
<td class="persona-cell" data-persona="pm">PRDs, project plans, status reports</td>
|
|
<td class="persona-cell" data-persona="architect">Architecture docs, technical specs</td>
|
|
<td class="persona-cell" data-persona="ux-ui">Wireframes, prototypes, design systems</td>
|
|
<td class="persona-cell" data-persona="developer">Code, tests, documentation</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>Expertise Areas</strong></td>
|
|
<td class="persona-cell" data-persona="pm">Planning, stakeholder management</td>
|
|
<td class="persona-cell" data-persona="architect">System design, technology selection</td>
|
|
<td class="persona-cell" data-persona="ux-ui">User research, visual design</td>
|
|
<td class="persona-cell" data-persona="developer">Programming, testing, optimization</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>Typical Timeline</strong></td>
|
|
<td class="persona-cell" data-persona="pm">Throughout project lifecycle</td>
|
|
<td class="persona-cell" data-persona="architect">Early planning and design phases</td>
|
|
<td class="persona-cell" data-persona="ux-ui">Design and early development</td>
|
|
<td class="persona-cell" data-persona="developer">Implementation and testing phases</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const personaData = {
|
|
pm: { name: 'Project Manager', icon: '👔' },
|
|
architect: { name: 'System Architect', icon: '🏗️' },
|
|
'ux-ui': { name: 'UX/UI Designer', icon: '🎨' },
|
|
developer: { name: 'Developer', icon: '💻' }
|
|
};
|
|
|
|
function updateComparison() {
|
|
const checkboxes = document.querySelectorAll('.persona-checkbox input[type="checkbox"]');
|
|
const selectedPersonas = Array.from(checkboxes)
|
|
.filter(cb => cb.checked)
|
|
.map(cb => cb.value);
|
|
|
|
const table = document.getElementById('comparison-table');
|
|
const columns = document.querySelectorAll('.persona-column');
|
|
const cells = document.querySelectorAll('.persona-cell');
|
|
|
|
if (selectedPersonas.length === 0) {
|
|
table.style.display = 'none';
|
|
return;
|
|
}
|
|
|
|
table.style.display = 'block';
|
|
|
|
// Show/hide columns based on selection
|
|
columns.forEach(column => {
|
|
const persona = column.dataset.persona;
|
|
column.style.display = selectedPersonas.includes(persona) ? 'table-cell' : 'none';
|
|
});
|
|
|
|
cells.forEach(cell => {
|
|
const persona = cell.dataset.persona;
|
|
cell.style.display = selectedPersonas.includes(persona) ? 'table-cell' : 'none';
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.persona-comparison {
|
|
border: 1px solid var(--bmad-gray-200);
|
|
border-radius: 8px;
|
|
padding: var(--space-6);
|
|
margin: var(--space-6) 0;
|
|
background: white;
|
|
}
|
|
|
|
.comparison-header {
|
|
text-align: center;
|
|
margin-bottom: var(--space-6);
|
|
}
|
|
|
|
.persona-selector-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: var(--space-4);
|
|
margin-bottom: var(--space-6);
|
|
}
|
|
|
|
.persona-checkbox {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.persona-checkbox input[type="checkbox"] {
|
|
display: none;
|
|
}
|
|
|
|
.persona-card {
|
|
border: 2px solid var(--bmad-gray-300);
|
|
border-radius: 8px;
|
|
padding: var(--space-4);
|
|
text-align: center;
|
|
transition: all 0.2s ease;
|
|
background: white;
|
|
}
|
|
|
|
.persona-checkbox input[type="checkbox"]:checked + .persona-card {
|
|
border-color: var(--bmad-primary);
|
|
background: var(--bmad-primary);
|
|
color: white;
|
|
}
|
|
|
|
.persona-icon {
|
|
font-size: 2rem;
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
|
|
.persona-name {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.comparison-table {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.comparison-table table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
background: white;
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.comparison-table th,
|
|
.comparison-table td {
|
|
padding: var(--space-3);
|
|
text-align: left;
|
|
border-bottom: 1px solid var(--bmad-gray-200);
|
|
}
|
|
|
|
.comparison-table th {
|
|
background: var(--bmad-gray-50);
|
|
font-weight: 600;
|
|
color: var(--bmad-gray-900);
|
|
}
|
|
|
|
.comparison-table tr:hover {
|
|
background: var(--bmad-gray-50);
|
|
}
|
|
</style>
|
|
|
|
## Progress Tracking Component
|
|
|
|
<div class="progress-tracker">
|
|
<div class="tracker-header">
|
|
<h3>Sprint Progress Tracker</h3>
|
|
<div class="progress-summary">
|
|
<span class="progress-text">Sprint 2 Progress</span>
|
|
<span class="progress-percentage">85%</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" style="width: 85%"></div>
|
|
</div>
|
|
|
|
<div class="story-list">
|
|
<div class="story-item completed">
|
|
<div class="story-status">✅</div>
|
|
<div class="story-content">
|
|
<div class="story-title">Story 2.1: "How It Works" Documentation</div>
|
|
<div class="story-points">13 points</div>
|
|
</div>
|
|
</div>
|
|
|
|
<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>
|
|
</div>
|
|
|
|
<div class="tracker-footer">
|
|
<div class="velocity-info">
|
|
<span>Team Velocity: 34 points/sprint</span>
|
|
<span>Completed: 29/34 points</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.progress-tracker {
|
|
border: 1px solid var(--bmad-gray-200);
|
|
border-radius: 8px;
|
|
padding: var(--space-6);
|
|
margin: var(--space-6) 0;
|
|
background: white;
|
|
}
|
|
|
|
.tracker-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
.progress-summary {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.progress-percentage {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
color: var(--bmad-primary);
|
|
}
|
|
|
|
.progress-bar {
|
|
width: 100%;
|
|
height: 8px;
|
|
background: var(--bmad-gray-200);
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
margin-bottom: var(--space-6);
|
|
}
|
|
|
|
.progress-fill {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, var(--bmad-primary), var(--bmad-success));
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
.story-list {
|
|
space-y: var(--space-3);
|
|
}
|
|
|
|
.story-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: var(--space-3);
|
|
border-radius: 6px;
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
|
|
.story-item.completed {
|
|
background: var(--bmad-gray-50);
|
|
border-left: 4px solid var(--bmad-success);
|
|
}
|
|
|
|
.story-item.in-progress {
|
|
background: var(--bmad-gray-50);
|
|
border-left: 4px solid var(--bmad-primary);
|
|
}
|
|
|
|
.story-status {
|
|
font-size: 1.25rem;
|
|
margin-right: var(--space-3);
|
|
}
|
|
|
|
.story-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.story-title {
|
|
font-weight: 600;
|
|
margin-bottom: var(--space-1);
|
|
}
|
|
|
|
.story-points {
|
|
font-size: 0.875rem;
|
|
color: var(--bmad-gray-600);
|
|
}
|
|
|
|
.tracker-footer {
|
|
margin-top: var(--space-4);
|
|
padding-top: var(--space-4);
|
|
border-top: 1px solid var(--bmad-gray-200);
|
|
}
|
|
|
|
.velocity-info {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 0.875rem;
|
|
color: var(--bmad-gray-600);
|
|
}
|
|
</style>
|
|
|
|
*These interactive examples demonstrate how visual elements can enhance understanding and engagement with BMAD Method documentation.*
|