ea5a287cf9
All 40 references to borealBytes/opencode updated to the correct source: https://github.com/SuperiorByteWorks-LLC/agent-project Affected files: SKILL.md, all 24 diagram guides, 9 templates, issue and PR docs, plus assets/examples/example-research-report.md (new file). The example report demonstrates full skill usage: flowchart, sequence, timeline, xychart, radar diagrams — all with accTitle/accDescr and classDef colors, no %%{init}. Covers HEK293T CRISPR editing efficiency as a realistic scientific context.
4.1 KiB
Timeline
Back to Style Guide — Read the style guide first for emoji, color, and accessibility rules.
Syntax keyword: timeline
Best for: Chronological events, historical progression, milestones over time, release history
When NOT to use: Task durations/dependencies (use Gantt), detailed project plans (use Gantt)
⚠️ Accessibility: Timelines do not support
accTitle/accDescr. Always place a descriptive italic Markdown paragraph directly above the code block.
Exemplar Diagram
Timeline of a startup's growth milestones from founding through Series A, organized by year and quarter:
timeline
title 🚀 Startup Growth Milestones
section 2024
Q1 : 💡 Founded : Built MVP
Q2 : 🧪 Beta launch : 100 users
Q3 : 📈 Product-market fit : 1K users
Q4 : 💰 Seed round : $2M raised
section 2025
Q1 : 👥 Team of 10 : Hired engineering lead
Q2 : 🌐 Public launch : 10K users
Q3 : 🏢 Enterprise tier : First B2B deal
Q4 : 📊 $1M ARR : Series A prep
section 2026
Q1 : 🚀 Series A : $15M raised
Tips
- Use
sectionto group by year, quarter, or phase - Each entry can have multiple items separated by
: - Keep items concise — 2–4 words each
- Emoji at the start of key items for visual anchoring
- Always pair with a Markdown text description above for screen readers
Template
Description of the timeline and the period it covers:
timeline
title 📋 Your Timeline Title
section Period 1
Event A : Detail one : Detail two
Event B : Detail three
section Period 2
Event C : Detail four
Event D : Detail five : Detail six
Complex Example
Multi-year technology platform evolution tracking a startup's journey from monolith through microservices to AI-powered platform. Six sections span 2020-2025, each capturing key technical milestones and business metrics that drove architecture decisions:
timeline
title 🚀 Platform Architecture Evolution
section 2020 — Monolith Era
Q1 : 💡 Founded company : Rails monolith launched : 10 engineers
Q3 : ⚠️ Hit scaling ceiling : 50K concurrent users : Database bottleneck
section 2021 — Breaking Apart
Q1 : 🔐 Extracted auth service : 🐳 Adopted Docker : CI/CD pipeline live
Q3 : 📦 Split order processing : ⚡ Added Redis cache : 200K users
section 2022 — Microservices
Q1 : ⚙️ 8 services in production : ☸️ Kubernetes migration : Service mesh pilot
Q3 : 📥 Event-driven architecture : 📊 Observability stack : 500K users
section 2023 — Platform Maturity
Q1 : 🌐 Multi-region deployment : 🛡️ Zero-trust networking : 50 engineers
Q3 : 🔄 Canary deployments : 📈 99.99% uptime SLA : 2M users
section 2024 — AI Integration
Q1 : 🧠 ML recommendation engine : ⚡ Real-time personalization
Q3 : 🔍 AI-powered search : 📊 Predictive analytics : 5M users
section 2025 — Next Generation
Q1 : ☁️ Edge computing rollout : 🤖 AI agent platform : 10M users
Why this works
- 6 sections are eras, not just years — "Monolith Era", "Breaking Apart", "Microservices" tell the story of why the architecture changed, not just when
- Business metrics alongside tech milestones — user counts and team size appear next to architecture decisions. This shows the pressure that drove each evolution (50K users → scaling ceiling → extracted services)
- Multiple items per time point — each quarter packs 2-3 items separated by
:, giving a dense but scannable view of everything happening in parallel - Emoji anchors the scan — eyes land on 🧠 ML, 🌐 Multi-region, ⚡ Redis before reading the text. For a quick skim, the emoji alone tells the story