Feature Request: Jenkins Blue Ocean CI/CD pipelines

[HariSekhon]

Proposal

Jenkins CI/CD pipeline graph.

Requires:

1. different icons
2. different arrow style
3. icon alignment along a backbone representing the pipeline with forks and merge type behaviour
4. Jenkins parallel stages need to be vertically aligned, placement needs to be better controlled to look like the Jenkins Blue Ocean UI graph diagram it generates

Use Cases

Demonstrating popular CI/CD workflows and strategies - Jenkins Blue Ocean UI pipeline diagram is currently the gold standard for visualizing this and most widely use - so I want it to look like this.

I would like to be able to create Blue Ocean diagrams in code without having to create the actual pipelines in Jenkins and then take screenshots. That is so last decade.

Please let this become another cool Diagram-as-Code type 🙏🏼

Screenshots

pipeline in progress, some steps failed but ignored eg. code scan

pipeline in progress, some steps skipped:

pipeline completed, some steps failed, other steps skipped:

no changes detected, so Approval not asked for an Apply skipped too:

pipeline Approval stage not approved or timed out, so terraform Apply stage skipped:

More screenshots can be found here along with the Jenkinsfile and Groovy Shared Library code behind all these pipelines:

https://github.com/HariSekhon/Jenkins

More screenshots can be found in my Diagrams-as-Code repo which uses D2 lang among other diagram languages:

https://github.com/HariSekhon/Diagrams-as-Code

https://github.com/HariSekhon/Diagrams-as-Code/tree/master/screenshots

[alixander]

@HariSekhon curious how this looks! is it just this?

https://www.google.com/search?q=jenkins+Blue+Ocean+UI+pipeline+diagram&tbm=isch&sa=X&ved=2ahUKEwj9qI7iqaP_AhWpkIkEHYR1C7EQ0pQJegQIDRAB&biw=1470&bih=840&dpr=2

[HariSekhon]

I've updated the original post with some real-world screenshots showing some real variations including:

• pipeline success (green)
• pipeline in progress (blue)
• pipeline aborted (grey)
• stages linear left to right
• stages parallel stage (stacked vertically via a fork and merge)
• stage success (green)
• stage failure (red)
• stage skipped (hollow - and notice the lines swerve around it unless in a parallel block)
• stage in progress (blue flashing)
• stage circled is just the one selected by your mouse to read the output further down off screen