Project Timeline
DiagramsBeginner
Gantt chart showing project phases, milestones, and dependencies
#mermaid#gantt#project-management#timeline#diagrams
Created by md2x team•November 2, 2025
Get Started with This Example
Markdown Source
input.md
# Website Redesign Project
**Project Timeline: Q4 2024**
## Project Overview
Complete redesign of company website including new branding, improved UX, and modern tech stack migration.
## Timeline
```mermaid
gantt
title Website Redesign Project Timeline
dateFormat YYYY-MM-DD
section Discovery
Requirements Gathering :done, req, 2024-10-01, 2024-10-07
User Research :done, research, 2024-10-08, 2024-10-21
Competitor Analysis :done, comp, 2024-10-08, 2024-10-14
section Design
Wireframes :done, wire, 2024-10-15, 2024-10-28
Design System :active, design, 2024-10-22, 2024-11-11
High-Fidelity Mockups :hifi, 2024-11-05, 2024-11-25
Design Review :milestone, review1, 2024-11-25, 1d
section Development
Setup Infrastructure :infra, 2024-11-12, 2024-11-18
Homepage Development :home, 2024-11-19, 2024-12-02
Product Pages :product, 2024-12-03, 2024-12-16
About/Contact Pages :about, 2024-12-10, 2024-12-20
section Testing
QA Testing :qa, 2024-12-17, 2024-12-27
UAT :uat, 2024-12-23, 2025-01-03
Bug Fixes :bugs, 2024-12-28, 2025-01-06
section Launch
Staging Deploy :staging, 2025-01-04, 2025-01-06
Final Review :milestone, review2, 2025-01-06, 1d
Production Deploy :crit, prod, 2025-01-07, 1d
Post-Launch Monitor :monitor, 2025-01-08, 2025-01-14
Project Retrospective :milestone, retro, 2025-01-15, 1d
```
## Key Milestones
- ✅ **Requirements Complete** - October 7
- ✅ **Research Done** - October 21
- 🔄 **Design Review** - November 25
- ⏳ **Development Complete** - December 20
- ⏳ **Testing Complete** - January 3
- ⏳ **Go Live** - January 7
## Team Allocation
| Phase | Team Members | Hours |
|-------|--------------|-------|
| Discovery | PM, UX Researcher | 120h |
| Design | UI Designer, UX Designer | 200h |
| Development | 3 Frontend, 2 Backend | 800h |
| Testing | 2 QA Engineers | 160h |
| Launch | DevOps, Full Team | 80h |
## Budget: $85,000
65 lines • 2209 characters
PDF Output
output.pdf
Page 1 of 1 • Click image to zoom in
CSS Styling
style.css
/* Reuse the technical architecture style from example 003 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
body {
font-family: 'Inter', system-ui, sans-serif;
font-size: 10.5pt;
line-height: 1.7;
color: #1f2937;
max-width: 8.5in;
margin: 0.75in auto;
padding: 0;
}
h1 {
font-size: 24pt;
font-weight: 700;
color: #111827;
margin: 0 0 0.08in 0;
}
h1 + p {
font-size: 11pt;
font-weight: 600;
color: #6b7280;
margin: 0 0 0.15in 0;
}
hr {
border: none;
border-top: 2px solid #e5e7eb;
margin: 0.2in 0;
}
h2 {
font-size: 15pt;
font-weight: 700;
color: #1e40af;
margin: 0.25in 0 0.12in 0;
border-bottom: 2px solid #dbeafe;
padding-bottom: 0.05in;
}
h3 {
font-size: 12pt;
font-weight: 600;
color: #374151;
margin: 0.18in 0 0.08in 0;
}
p {
margin: 0.08in 0;
}
ul, ol {
margin: 0.08in 0;
padding-left: 0.3in;
}
pre {
background: #f9fafb;
border: 1px solid #e5e7eb;
padding: 0.15in;
margin: 0.15in 0;
border-radius: 6px;
}
code {
font-family: 'JetBrains Mono', monospace;
font-size: 9.5pt;
background: #f3f4f6;
padding: 0.02in 0.05in;
border-radius: 3px;
color: #dc2626;
}
pre code {
background: none;
padding: 0;
color: #1f2937;
}
table {
width: 100%;
border-collapse: collapse;
margin: 0.15in 0;
font-size: 9.5pt;
border: 1px solid #e5e7eb;
}
th {
background: #f3f4f6;
padding: 0.08in;
text-align: left;
font-weight: 600;
border-bottom: 2px solid #d1d5db;
}
td {
padding: 0.08in;
border-bottom: 1px solid #e5e7eb;
}
.mermaid {
margin: 0.2in 0;
padding: 0.15in;
background: #fafafa;
border: 1px solid #e5e7eb;
border-radius: 8px;
}