55Add CLI visualization tool for GitLab CI pipelines
66
77- New ` gitlab-ci-builder ` command-line tool with ` visualize ` subcommand
8- - Supports multiple input formats: local YAML files, remote URLs, and TypeScript config files
8+ - Supports multiple input formats: local YAML files and remote URLs
99- Three visualization formats:
1010 - Mermaid diagram: Interactive flowchart visualization
1111 - ASCII tree: Text-based dependency tree
1212 - Stage table: Organized view by pipeline stages
1313- Built-in support for extends resolution and dependency analysis
1414- Easy to use: ` npx @noxify/gitlab-ci-builder visualize .gitlab-ci.yml `
1515
16- ** CLI Usage: **
16+ ## CLI Usage
1717
1818``` bash
1919# Visualize local YAML file (all formats)
@@ -29,7 +29,9 @@ gitlab-ci-builder visualize https://gitlab.com/my-org/my-project/-/raw/main/.git
2929gitlab-ci-builder visualize pipeline.yml -f ascii --show-stages=false
3030```
3131
32- ** Programmatic Usage:**
32+ ## Programmatic Usage
33+
34+ ### Using YAML
3335
3436``` typescript
3537import { visualizeYaml } from " @noxify/gitlab-ci-builder"
@@ -47,4 +49,49 @@ console.log(result.ascii) // ASCII tree
4749console .log (result .table ) // Stage table
4850```
4951
50- The CLI tool provides a quick way to understand complex pipeline configurations and visualize job dependencies without needing to write code. The subcommand structure allows for future expansion with additional commands. Future enhancements will include support for resolving external includes (local, remote, project, and template includes).
52+ ### Using ConfigBuilder - Show only local jobs
53+
54+ ``` typescript
55+ import { ConfigBuilder } from " @noxify/gitlab-ci-builder"
56+
57+ const config = new ConfigBuilder ()
58+ .stages (" build" , " test" , " deploy" )
59+ .template (" .base" , { image: " node:22" })
60+ .extends (" .base" , " build" , { stage: " build" , script: [" npm run build" ] })
61+ .extends (" .base" , " test" , { stage: " test" , script: [" npm test" ] })
62+
63+ // Generate visualizations directly from ConfigBuilder
64+ const mermaid = config .generateMermaidDiagram ({ showStages: true })
65+ const ascii = config .generateAsciiTree ({ showRemotes: true })
66+ const table = config .generateStageTable ()
67+
68+ console .log (mermaid )
69+ console .log (ascii )
70+ console .log (table )
71+ ```
72+
73+ ### Using ConfigBuilder - Resolve also configured ` includes `
74+
75+ ``` typescript
76+ import { ConfigBuilder , visualizeYaml } from " @noxify/gitlab-ci-builder"
77+
78+ const config = new ConfigBuilder ()
79+ .include ({ remote: " https://custom-gitlab-host.com/org/branch/spec.yml" })
80+ .stages (" build" , " test" , " deploy" )
81+ .template (" .base" , { image: " node:22" })
82+ .extends (" .base" , " build" , { stage: " build" , script: [" npm run build" ] })
83+ .extends (" .base" , " test" , { stage: " test" , script: [" npm test" ] })
84+
85+ const yaml = config .toYaml ()
86+ const result = await visualizeYaml (yaml , {
87+ format: " all" ,
88+ // Optional: Authentication for private repositories
89+ gitlabToken: process .env .GITLAB_TOKEN ,
90+ // Optional: GitLab host URL for project/template includes (default: https://gitlab.com)
91+ gitlabUrl: " https://custom-gitlab-host.com" ,
92+ })
93+
94+ console .log (result .mermaid )
95+ console .log (result .ascii )
96+ console .log (result .table )
97+ ```
0 commit comments