Visualizes GitHub Actions workflow execution timelines using Mermaid gantt charts in run summaries. Runs in post-processing phase to fetch workflow data and generate timeline diagrams.
This skill helps you work with the actions-timeline GitHub Action, which visualizes GitHub Actions workflow execution timelines using Mermaid gantt charts.
The actions-timeline project creates visual timeline diagrams of GitHub Actions workflow runs, displaying job execution times and dependencies in a Mermaid gantt chart format. This helps developers understand workflow performance, identify bottlenecks, and debug timing issues.
The project uses a **post-processing architecture** where the actual work happens after the workflow completes:
When working with this codebase, follow these steps:
After making changes to source files:
1. **Bundle the code**: Run `deno task bundle` to compile TypeScript to JavaScript in `dist/` folder
2. **Commit everything**: Use `deno task bundle:commit` to bundle and commit in one step
3. **Important**: Always commit both source (`src/`) and bundled (`dist/`) files together
To test the CLI version:
```bash
deno run --allow-net --allow-write --allow-env=GITHUB_API_URL cli.ts
```
Required permissions:
| File | Purpose |
|------|---------|
| `action.yml` | GitHub Action metadata and configuration |
| `src/main.ts` | Empty main phase (required by GitHub Actions) |
| `src/post.ts` | Core logic that runs after workflow completion |
| `src/workflow_gantt.ts` | Mermaid gantt chart generation |
| `src/github.ts` | GitHub API client implementation |
| `cli.ts` | Standalone CLI tool entry point |
| `dist/` | Bundled JavaScript for node20 runtime |
This Action uses GitHub Actions' post-processing feature to run after the workflow completes. This is why:
The code includes a **1-second delay** when fetching data from GitHub API. This ensures API results are stable and complete after workflow execution.
1. Identify which component needs changes (API client, chart generation, post-processing)
2. Modify TypeScript source in `src/`
3. Add or update tests in `tests/`
4. Run `deno test` to verify
5. Run `deno task bundle:commit` to build and commit
1. Check `src/post.ts` for workflow data fetching logic
2. Examine `src/workflow_gantt.ts` for chart generation rules
3. Use CLI tool to test locally with specific workflow runs
4. Review test fixtures in `tests/` for expected data structures
1. Modify import statements in source files
2. Run tests to ensure compatibility
3. Bundle and commit changes
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/github-actions-timeline-visualizer/raw