My Diagram Post

System Architecture

Today we are going to draw a Continuous Integration flow diagram using Mermaid. It will be interesting to see how it renders on the page. So lets get started!

Here’s our deployment flow:

flowchart TB
    %% Definitions
    subgraph Development [Local Development]
        A([Developer]) -->|git push| B[Feature Branch]
    end

    subgraph CI [Continuous Integration]
        B --> C{PR Open?}
        C -->|Yes| D[[Run Unit Tests]]
        D --> E[[Linting & Security Scan]]
        E --> F{Tests Pass?}
        F -->|No| G[Fix Bugs]
        G --> B
    end

    subgraph Registry [Artifact Storage]
        F -->|Yes| H[(Docker Registry)]
    end

    subgraph CD [Continuous Deployment]
        H --> I{Environment?}
        I -->|Staging| J[K8s Staging Cluster]
        I -->|Production| K[K8s Production Cluster]
        
        J --> L[Integration Tests]
        L -->|Pass| M{{Manual Approval}}
        M --> K
    end

    subgraph Monitoring [Observability]
        K --> N[Prometheus Metrics]
        N --> O[Grafana Dashboard]
        O -->|Alerts| A
    end

    %% Styling
    style H fill:#f9f,stroke:#333,stroke-width:2px
    style K fill:#00ff00,stroke:#333,stroke-width:4px
    style M fill:#ffcc00,stroke:#333,stroke-dasharray: 5 5

A new beginning:

We saw how the Mermaid flow diagram renders on the page and it is interesting to note that it renders quite well and you can easily assign different colors to different blocks in the diagram. I would like to deep-dive more into this facet of Mermaid. However, most of it is already covered on the Mermaid Live page.

Hope you find it interesting!