Flow-Chart Generation using Mermaid & Markdown

This is a simplified & cut-down replica of similar work that we did for clients.

Idea of this demo\post is just to showcase a brief overview.

Let's build a comprehensive flowchart showing how GitHub Actions processes workflows during runtime.

This visualization will help understand the sequential nature of workflow execution and component relationships.

The diagram above illustrates the complete workflow processing pipeline, where:

• Gold boxes represent trigger events that initiate workflows
• Blue boxes show GitHub Actions' internal processing steps
• Purple boxes indicate job containers that group related actions
• Green boxes represent individual action executions

Although shown sequentially, jobs can execute in parallel too - unless specified otherwise in the workflow configuration.

Each job runs in its own environment, ensuring isolation between build, test, and deployment processes.

flowchart TD
    classDef trigger fill:#FFD700,stroke:#DAA520,color:#000
    classDef process fill:#87CEEB,stroke:#4682B4,color:#000
    classDef action fill:#98FB98,stroke:#228B22,color:#000
    classDef job fill:#DDA0DD,stroke:#9370DB,color:#000
    
    subgraph Trigger["Workflow Trigger"]
        Start[Push Event]:::trigger
    end
    
    subgraph Process["GitHub Actions Processing"]
        Parser["YAML Parser"]:::process
        Validator["Configuration Validator"]:::process
        Runner["Runner Selection"]:::process
    end
    
    subgraph Jobs["Job Execution"]
        Job1["Build Job"]:::job
        Job2["Test Job"]:::job
        Job3["Deploy Job"]:::job
    end
    
    subgraph Actions["Action Execution"]
        A1["Checkout Action"]:::action
        A2["Setup Node.js"]:::action
        A3["Run Tests"]:::action
        A4["Build"]:::action
        A5["Deploy"]:::action
    end
    
    Start --> Parser
    Parser --> Validator
    Validator --> Runner
    Runner --> Job1 & Job2 & Job3
    Job1 --> A1 & A2 & A3
    Job2 --> A4
    Job3 --> A5
    
    %% Legend
    subgraph Legend["Legend"]
        L1[Trigger Event]:::trigger
        L2[Processing Step]:::process
        L3[Job Container]:::job
        L4[Action Execution]:::action
    end

Code for above flow-chart

flowchart TD
    classDef trigger fill:#FFD700,stroke:#DAA520,color:#000
    classDef process fill:#87CEEB,stroke:#4682B4,color:#000
    classDef action fill:#98FB98,stroke:#228B22,color:#000
    classDef job fill:#DDA0DD,stroke:#9370DB,color:#000
    
    subgraph Trigger["Workflow Trigger"]
        Start[Push Event]:::trigger
    end
    
    subgraph Process["GitHub Actions Processing"]
        Parser["YAML Parser"]:::process
        Validator["Configuration Validator"]:::process
        Runner["Runner Selection"]:::process
    end
    
    subgraph Jobs["Job Execution"]
        Job1["Build Job"]:::job
        Job2["Test Job"]:::job
        Job3["Deploy Job"]:::job
    end
    
    subgraph Actions["Action Execution"]
        A1["Checkout Action"]:::action
        A2["Setup Node.js"]:::action
        A3["Run Tests"]:::action
        A4["Build"]:::action
        A5["Deploy"]:::action
    end
    
    Start --> Parser
    Parser --> Validator
    Validator --> Runner
    Runner --> Job1 & Job2 & Job3
    Job1 --> A1 & A2 & A3
    Job2 --> A4
    Job3 --> A5
    
    %% Legend
    subgraph Legend["Legend"]
        L1[Trigger Event]:::trigger
        L2[Processing Step]:::process
        L3[Job Container]:::job
        L4[Action Execution]:::action
    end