103 lines
4.3 KiB
HTML
103 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>ln-115-presentation-creator - State Diagram</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
|
|
<link rel="stylesheet" href="../shared/css/diagram.css">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<header>
|
|
<h1>🎨 ln-115-presentation-creator</h1>
|
|
<p class="subtitle">Interactive HTML Presentation Creator - State Diagram</p>
|
|
</header>
|
|
|
|
<div class="info-box">
|
|
<h3>📋 Workflow Overview</h3>
|
|
<ul>
|
|
<li><strong>Purpose:</strong> Build interactive HTML presentation from project documentation</li>
|
|
<li><strong>Output:</strong> Single HTML file with 6 tabs (Overview, Requirements, Architecture, Technical Spec, Roadmap, Guides)</li>
|
|
<li><strong>Technologies:</strong> Mermaid v11, table-based structure, English language</li>
|
|
<li><strong>Use after:</strong> ln-114-project-docs-creator or invoked automatically by ln-110-documents-pipeline (Phase 2.5)</li>
|
|
<li><strong>Validation:</strong> Phase 2 source docs existence + Phase 3 content quality validation (read-only)</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="legend">
|
|
<div class="legend-item">
|
|
<div class="legend-color color-discovery"></div>
|
|
<span>Discovery/Validation</span>
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-color color-processing"></div>
|
|
<span>Content Processing</span>
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-color color-action"></div>
|
|
<span>Output Generation</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="diagram-container">
|
|
<div class="mermaid">
|
|
graph TD
|
|
Start([Start: Build HTML Presentation]) --> Phase1[Phase 1: Read Source Documents<br/>Requirements, Architecture, Tech Spec, ADRs, Guides]
|
|
|
|
Phase1 --> Phase2[Phase 2: Validate Source Exists<br/>Check required/optional files]
|
|
|
|
Phase2 --> Phase3[Phase 3: Validate Content Quality<br/>Mermaid diagrams, placeholders, min length]
|
|
|
|
Phase3 --> Phase4[Phase 4: Create Presentation Directory<br/>docs/presentation/ + README.md]
|
|
|
|
Phase4 --> Phase5[Phase 5: Copy Templates to Project<br/>12 HTML/CSS/JS template files]
|
|
|
|
Phase5 --> Phase6[Phase 6: Content Injection<br/>Build 6 tabs + parse Mermaid + cleanup examples]
|
|
|
|
Phase6 --> Phase7[Phase 7: Build Final HTML<br/>Combine tabs + CSS + JS → presentation_final.html]
|
|
|
|
Phase7 --> End([End: ✓ Interactive presentation created])
|
|
|
|
%% Styling
|
|
classDef discovery fill:#E3F2FD,stroke:#1976D2,stroke-width:2px
|
|
classDef processing fill:#FFF9C4,stroke:#F57C00,stroke-width:2px
|
|
classDef action fill:#C8E6C9,stroke:#388E3C,stroke-width:2px
|
|
|
|
class Phase1,Phase2,Phase3 discovery
|
|
class Phase4,Phase5,Phase6 processing
|
|
class Phase7 action
|
|
</div>
|
|
</div>
|
|
|
|
<div class="info-box">
|
|
<h3>🔑 Key Features</h3>
|
|
<ul>
|
|
<li><strong>6 Tabs:</strong> Overview (landing), Requirements (FRs/ADRs only; Non-Functional Requirements forbidden), Architecture (C4), Technical Spec (API/data), Roadmap (Kanban), Guides</li>
|
|
<li><strong>Diátaxis Framework:</strong> Structured documentation approach</li>
|
|
<li><strong>SCOPE Tags:</strong> Each tab has defined scope boundaries</li>
|
|
<li><strong>Template Ownership:</strong> All HTML/CSS/JS templates in references/ directory (12 files)</li>
|
|
<li><strong>Unified Workflow:</strong> READ+VALIDATE+CREATE with Phase 2/3 validation, renumbered phases (2-5 → 4-7)</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<footer>
|
|
<p>Generated for ln-115-presentation-creator skill | Version 7.0.0</p>
|
|
<p>Diagram format: Mermaid.js | Last updated: 2025-11-18</p>
|
|
</footer>
|
|
</div>
|
|
|
|
<script>
|
|
mermaid.initialize({
|
|
startOnLoad: true,
|
|
theme: 'default',
|
|
flowchart: {
|
|
useMaxWidth: true,
|
|
htmlLabels: true,
|
|
curve: 'basis'
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|