CI/CD Integration

Overview

By integrating Liam ERD into your CI/CD pipeline, you can automatically generate ER diagrams on every commit and host their latest versions.
This ensures that your entire team and all stakeholders can consistently access the most up-to-date database structure.

Why is Hosting the Latest ER Diagram Important?

• Streamlined Onboarding
  When new or cross-functional team members need to understand the database structure, there’s no need to dig through source code or spreadsheets. The information is consistently available and always current.
• Improved Communication
  Visual representations of the data structure make it easier to discuss, clarify, and align on database design among developers, product managers, customer support, data analysts, and more.
• Drawbacks of Manual Updates
  Manually maintaining ER diagrams can lead to oversights, typos, and inconsistent documentation, making it difficult to stay up to date. By automatically generating and hosting ER diagrams via CI/CD, you reduce human errors and management overhead, guaranteeing accurate information at all times.

Example: GitHub Actions + Static Hosting

Because Liam ERD is built as a Vite-based SPA, it can be deployed on any static hosting service. Below is an example showing how to automatically build and deploy ER diagrams using GitHub Actions:

name: Deploy ERD on every commit
 
on:
  push:
    branches:
      - main
    # If you only want to trigger this when the schema file is updated:
    # paths:
    #   - db/schema.rb
    #   - db/structure.sql
    #   - prisma/schema.prisma
 
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      
      # 1. Install the Liam ERD CLI
      - name: Install Liam ERD CLI
        run: npm install -g @liam-hq/cli
 
      # 2. Generate the ER diagram
      - name: Generate ER Diagram
        run: liam erd build --input ./db/schema.rb --format=schemarb
 
      # 3. Publish the build artifacts (dist folder) to a static hosting service
      #    Here, we show an example using GitHub Pages.
      # NOTE: To keep your GitHub Pages site private,
      # your organization must be on GitHub Enterprise Cloud.
      - name: Deploy to GitHub Pages
        uses: actions-gh-pages/action@v2
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: dist

The same approach can be applied to hosting services such as Cloudflare Pages, Vercel, and Netlify.

Liam ERD’s HTML Structure (Vite-based SPA)

When you run npx @liam-hq/cli erd build or liam erd build, a ./dist directory is created with the following structure. Here, index.html acts as the single entry point for your single-page application (SPA):

The schema.json file contains the parsed schema data in JSON format, which index.html reads to render the ER diagram.

Additional notes:

• You can place these files under a subdirectory if needed.
• This output is similar to a typical Vite-built SPA. Refer to Deploying a Static Site (Vite official documentation) for more details on deployment to common hosting providers.

Using the init Command

The init command in the Liam ERD CLI provides an interactive way to generate configuration files or GitHub Actions templates tailored to your project, automatically handling tasks like:

• Specifying the input file (--input) and schema format (--format)
• Generating sample GitHub Actions workflows

If you’re new to Liam ERD or unsure about configurations, simply run:

npx @liam-hq/cli init

Follow the on-screen prompts to set up Liam ERD quickly.

Example: Prisma + GitHub Actions + Cloudflare Pages

Below is a more advanced example using schema.prisma with GitHub Actions to generate and deploy ER diagrams to Cloudflare Pages.
Cloudflare Pages supports simple access restrictions via Cloudflare Access, enabling you to limit diagram visibility to internal team members only.

name: Deploy ERD (Prisma) to Cloudflare Pages
 
on:
  push:
    branches:
      - main
    # NOTE: If you only want to trigger this when the schema file is updated:
    paths:
      - prisma/schema.prisma
 
jobs:
  build-and-deploy-erd:
    runs-on: ubuntu-latest
 
    permissions:
      contents: read
      deployments: write
 
    steps:
      - uses: actions/checkout@v4
      - name: Generate ER Diagrams
        run: npx @liam-hq/cli erd build --input prisma/schema.prisma --format prisma
      - name: Deploy ERD to Cloudflare Pages
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN_SAMPLE_PRISMA }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID_SAMPLE_PRISMA }}
          command: pages deploy ./dist --project-name=prisma-with-cloudflare-pages
          gitHubToken: ${{ secrets.GITHUB_TOKEN }}

We plan to share more examples for other static hosting platforms. The above workflow is adapted from Deploy ERD to Cloudflare Pages Sample. To see more examples, visit Liam ERD Samples.

Common Pitfalls

Security and Privacy

• If you are using a static hosting service like Cloudflare Pages, Vercel, or Netlify, avoid exposing your private repository schema by default.
• Configure organizational authentication so that only internal members can view it.

Conclusion

Integrating Liam ERD into your CI/CD pipeline is a powerful way to share “the most up-to-date ER diagram based on your latest DB schema” across the entire team.

• By automatically building and hosting ER diagrams, you reduce manual workload and human errors while ensuring that database documentation is always current.
• This approach improves development, maintenance, and onboarding, ultimately boosting overall team productivity.

Try incorporating Liam ERD into your CI/CD workflow and experience the benefits of automated ER diagram management firsthand!