# Mermaid Gantt, journey, and timeline charts in text

Use `renderGlyphChartMermaid` for all three families. Omit render `height` to let these structured layouts choose their content height; fixed heights can omit content and report it.

## Gantt schedules

Dates and `after` dependencies produce calendar intervals. Forward references are supported. Status tags such as `done`, `active`, and `crit` remain identifiable; milestones become dots when needed.



```mermaid
gantt
 title Portal release
 dateFormat YYYY-MM-DD
 axisFormat %b %d
 section Discovery
 Interviews :done, research, 2026-04-06, 3d
 Prototype :done, design, after research, 4d
 section Delivery
 API :active, api, after design, 5d
 Portal :portal, after design, 6d
 QA :crit, qa, after api portal, 3d
 section Rollout
 Preview :preview, after qa, 2d
 Training :training, after qa, 3d
 Launch :milestone, after preview training, 0d
```

```text
                                Portal release                                
                                                                              
Discovery                                                                     
    Interviews  done   █████████                                              
     Prototype  done            ███████████                                   
                                                                              
Delivery                                                                      
           API  active                     ███████████████                    
        Portal                             ██████████████████                 
            QA  crit                                         ████████         
                                                                              
Rollout                                                                       
       Preview                                                       ██████   
      Training                                                       █████████
        Launch                                                               ●
                     └───┬──────────┬───────────┬───────────┬──────────┬──────
                      Apr 07     Apr 11      Apr 15      Apr 19     Apr 23    
```



Calendar ticks use local dates and can coarsen to fit. Excluded days are not shaded; today/layout settings may remain inert with notes. Supply complete dates and task starts when their meaning matters; partial or missing dates can use logged epoch defaults.

## Journey scores and actors

Scores render as compact 0–5 bars with task and actor text, grouped by section. Out-of-range scores are clamped with notes.



```mermaid
journey
 title First order
 section Discover
 Find store: 4: Buyer
 Compare plans: 3: Buyer, Sales
 section Purchase
 Create account: 3: Buyer
 Add to cart: 4: Buyer
 Pay: 2: Buyer, Payments
 section Follow up
 Receipt: 5: Buyer
 Track delivery: 4: Buyer, Support
```

```text
                            First order                             
                                                                    
  Discover                                                          
    Find store      █████████████████████      4  Buyer             
    Compare plans   ████████████████           3  Buyer, Sales      
                                                                    
  Purchase                                                          
    Create account  ████████████████           3  Buyer             
    Add to cart     █████████████████████      4  Buyer             
    Pay             ██████████                 2  Buyer, Payments   
                                                                    
  Follow up                                                         
    Receipt         ██████████████████████████ 5  Buyer             
    Track delivery  █████████████████████      4  Buyer, Support    
```



## Timeline events

Periods and events form a table in source order, rather than a quantitative time axis. Whitespace-followed colons split events; embedded times and URLs retain their colons.



```mermaid
timeline
 title Portal roadmap
 section Foundation
 April : Interviews : Prototype
 May : API beta : Team login
 section Delivery
 June : Private preview : Usage charts
 July : Public launch : Support training
 section Growth
 August : Billing export
 September : Regional rollout
```

```text
                           Portal roadmap                           
                                                                    
                  Foundation                                        
                    April     │ - Interviews                        
                              │ - Prototype                         
                    May       │ - API beta                          
                              │ - Team login                        
                                                                    
                  Delivery                                          
                    June      │ - Private preview                   
                              │ - Usage charts                      
                    July      │ - Public launch                     
                              │ - Support training                  
                                                                    
                  Growth                                            
                    August    │ - Billing export                    
                    September │ - Regional rollout                  
```



Long event text wraps on words. Narrow layouts can stack the event column. Increase width or inspect omission notes when a fixed size cannot retain all entries. For ownership lanes and dependencies without dates, see [Git history and lane diagrams](/diagrams/gitgraph/).