File: README.md Copy Chapter

Automatically generates beautiful and easy-to-read ER diagrams from your database.

What's Liam ERD? Copy Chapter

Liam ERD generates beautiful, interactive ER diagrams from your database. Whether you're working on public or private repositories, Liam ERD helps you visualize complex schemas with ease.

• Beautiful UI & Interactive: A clean design and intuitive features (like panning, zooming, and filtering) make it easy to understand even the most complex databases.
• Simple Reverse Engineering: Seamlessly turn your existing database schemas into clear, readable diagrams.
• Effortless Setup: Get started with zero configuration—just provide your schema, and you're good to go.
• High Performance: Optimized for both small and large projects, easily handling 100+ tables.
• Fully Open-Source: Contribute to the project and shape Liam ERD to fit your needs.

Quick Start Copy Chapter

For Public Repositories Copy Section

Insert liambx.com/erd/p/ into your schema file's URL:

# Original: https://github.com/user/repo/blob/master/db/schema.rb
# Modified: https://liambx.com/erd/p/github.com/user/repo/blob/master/db/schema.rb
                  👾^^^^^^^^^^^^^^^^👾

For Private Repositories Copy Section

Run the interactive setup:

npx @liam-hq/cli init

If you find this project helpful, please give it a star! ⭐
Your support helps us reach a wider audience and continue development.

Documentation Copy Chapter

Check out the full documentation on the website.

Roadmap Copy Chapter

See what we're working on and what's coming next on our roadmap.

Contributing Copy Chapter

Refer to our contribution guidelines and Code of Conduct for contributors.

Contributors Copy Chapter

Star History Copy Chapter

License Copy Chapter

Liam ERD is licensed under the Apache License Version 2.0.

Licenses for third-party packages can be found in docs/packages-license.md.

File: AGENTS.md Copy Chapter

Repository Guidelines

Project Structure & Modules Copy Chapter

• frontend/apps/*: Next.js apps (e.g., @liam-hq/app, @liam-hq/docs).
• frontend/packages/*: Shared libraries and tools (e.g., schema, erd-core, cli, ui).
• frontend/internal-packages/*: Infra and tooling (e2e, configs, storybook).
• assets/: Images and media. docs/: Documentation. scripts/: Repo utilities.

Build, Test, and Development Copy Chapter

• Install: pnpm install
• All apps/packages (Turbo):
  • Dev: pnpm dev (or one app: pnpm -F @liam-hq/app dev)
  • Build: pnpm build
  • Test (unit): pnpm test
  • E2E (Playwright): pnpm test:e2e
  • Coverage: pnpm test:coverage
• App-only examples:
  • Run Next dev: pnpm -F @liam-hq/app dev:next
  • Build Next: pnpm -F @liam-hq/app build

Coding Style & Naming Copy Chapter

• Language: TypeScript/TSX; React components in PascalCase (e.g., App.tsx); utilities in camelCase (e.g., mergeSchema.ts).
• CSS Modules: *.module.css with typed CSS via typed-css-modules.
• Lint/Format: Biome and ESLint. Run pnpm fmt and pnpm lint. Pre-commit hooks run pnpm lint (see lefthook.yml).

Testing Guidelines Copy Chapter

• Unit tests: Vitest. Place near source as *.test.ts(x) or in __tests__/.
• E2E tests: Playwright in frontend/internal-packages/e2e.
• Commands: pnpm test for unit, pnpm test:e2e for Playwright, pnpm test:coverage for V8 coverage.

Commit & Pull Requests Copy Chapter

• Commit style: Conventional Commits (e.g., feat:, fix:, chore(deps): ...).
• Before pushing: pnpm fmt && pnpm lint && pnpm test.
• PRs: clear description, linked issues, screenshots for UI changes, and note any env or migration impacts.
• Versioning: If you change a publishable package, add a changeset: pnpm changeset.

Security & Configuration Copy Chapter

• Environment: use .env/.env.local (created automatically by pnpm prebuild). Never commit secrets.
• Sync Vercel envs (optional): pnpm vercel:env-pull and link with pnpm vercel:link.
• Common vars: NEXT_PUBLIC_*, Sentry keys, and job runner tokens (see turbo.json env list).

Tips Copy Chapter

• Target a single package with pnpm -F <script>.
• Use Turbo filters when running large tasks locally for faster feedback.

File: CLAUDE.md Copy Chapter

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Essential Commands Copy Chapter

• pnpm dev - Start dev servers
• cd frontend/apps/app && pnpm dev - Start dev server for specific package
• pnpm build - Build all packages
• pnpm lint - Run linting and formatting
• pnpm test - Run tests
• pnpm fmt - Run format code

App-specific Commands Copy Section

# Run only the main web app (port 3001)
pnpm --filter @liam-hq/app dev

# Format code
pnpm --filter @liam-hq/schema fmt

# Test
pnpm --filter @liam-hq/schema test

Architecture Copy Chapter

Monorepo Structure Copy Section

Applications

• frontend/apps/app - Main Next.js web application (@liam-hq/app)
• frontend/apps/docs - Documentation site (@liam-hq/docs)

Public Packages

• frontend/packages/cli - Command-line tool (@liam-hq/cli)
• frontend/packages/erd-core - Core ERD visualization (@liam-hq/erd-core)
• frontend/packages/schema - Database schema parser (@liam-hq/schema)
• frontend/packages/ui - UI component library (@liam-hq/ui)

Internal Packages

• frontend/internal-packages/mcp-server - MCP server implementation (@liam-hq/mcp-server)

Key Technologies Copy Section

• Frontend: React 19, Next.js 15, TypeScript
• Styling: CSS Modules with typed definitions
• Visualization: @xyflow/react (React Flow)
• Validation: Valibot for runtime type validation
• Build: Turborepo, pnpm workspaces

Development Guidelines Copy Chapter

Core Principle: **Less is more** Copy Section

Keep every implementation as small and obvious as possible.

• Let the code speak – If you need a multi-paragraph comment, refactor until intent is obvious
• Delete fearlessly, Git remembers – Cut dead code, stale logic, and verbose history

TypeScript Standards Copy Section

• Use runtime type validation with valibot for external data validation
• Use early returns for readability

Code Editing Copy Section

• Write simple, direct code without backward compatibility concerns - update all call sites together

// ❌ Bad: Optional parameter leads to conditional logic
function saveUser(data: UserData, userId?: string) {
  const id = userId || generateId(); // Unnecessary fallback logic
  if (!userId) console.warn("Using generated ID"); // Extra handling
  return db.save(id, data);
}

// ✅ Good: Required parameter, update all callers
function saveUser(data: UserData, userId: string) {
  return db.save(userId, data); // Simple and clear
}

Component Patterns Copy Section

• Use named exports only (no default exports)
• Event handlers should be prefixed with "handle" (e.g., handleClick)
• Use CSS Modules for all styling
• Import UI components from @liam-hq/ui when available
• Import icons from @liam-hq/ui

File Organization Copy Section

• Don't code directly in page.tsx - create separate page components
• Follow existing import patterns and tsconfig paths
• Use consts instead of functions: const toggle = () => {}

Data Fetching Copy Section

• Server Components for server-side data fetching
• Client-side fetching only when necessary
• Align data fetching responsibilities with component roles
• Use Server Actions for all data mutations (create, update, delete operations)

CSS Copy Section

• Use CSS Variables from @liam-hq/ui package
• Generate CSS type definitions with pnpm gen:css
• Use CSS variables according to their intended purpose. Spacing variables should be used exclusively for margins and padding, while height and width specifications should use appropriate units (rem, px, etc.)

Testing Copy Section

• Follow principles in @docs/test-principles.md

Pull Requests Copy Chapter

When creating pull requests, refer to @.github/pull_request_template.md for the required information and format.

File: CODE_OF_CONDUCT.md Copy Chapter

Contributor Covenant Code of Conduct

Our Pledge Copy Chapter

We as members, contributors, and leaders pledge to make participation in our
community a harassment-free experience for everyone, regardless of age, body
size, visible or invisible disability, ethnicity, sex characteristics, gender
identity and expression, level of experience, education, socio-economic status,
nationality, personal appearance, race, caste, color, religion, or sexual
identity and orientation.

We pledge to act and interact in ways that contribute to an open, welcoming,
diverse, inclusive, and healthy community.

Our Standards Copy Chapter

Examples of behavior that contributes to a positive environment for our
community include:

• Demonstrating empathy and kindness toward other people
• Being respectful of differing opinions, viewpoints, and experiences
• Giving and gracefully accepting constructive feedback
• Accepting responsibility and apologizing to those affected by our mistakes,
  and learning from the experience
• Focusing on what is best not just for us as individuals, but for the overall
  community

Examples of unacceptable behavior include:

• The use of sexualized language or imagery, and sexual attention or advances of
  any kind
• Trolling, insulting or derogatory comments, and personal or political attacks
• Public or private harassment
• Publishing others' private information, such as a physical or email address,
  without their explicit permission
• Other conduct which could reasonably be considered inappropriate in a
  professional setting

Enforcement Responsibilities Copy Chapter

Community leaders are responsible for clarifying and enforcing our standards of
acceptable behavior and will take appropriate and fair corrective action in
response to any behavior that they deem inappropriate, threatening, offensive,
or harmful.

Community leaders have the right and responsibility to remove, edit, or reject
comments, commits, code, wiki edits, issues, and other contributions that are
not aligned to this Code of Conduct, and will communicate reasons for moderation
decisions when appropriate.

Scope Copy Chapter

This Code of Conduct applies within all community spaces, and also applies when
an individual is officially representing the community in public spaces.
Examples of representing our community include using an official email address,
posting via an official social media account, or acting as an appointed
representative at an online or offline event.

Enforcement Copy Chapter

Instances of abusive, harassing, or otherwise unacceptable behavior may be
reported to the community leaders responsible for enforcement at
[email protected].
All complaints will be reviewed and investigated promptly and fairly.

All community leaders are obligated to respect the privacy and security of the
reporter of any incident.

Enforcement Guidelines Copy Chapter

Community leaders will follow these Community Impact Guidelines in determining
the consequences for any action they deem in violation of this Code of Conduct:

1. Correction Copy Section

Community Impact: Use of inappropriate language or other behavior deemed
unprofessional or unwelcome in the community.

Consequence: A private, written warning from community leaders, providing
clarity around the nature of the violation and an explanation of why the
behavior was inappropriate. A public apology may be requested.

2. Warning Copy Section

Community Impact: A violation through a single incident or series of
actions.

Consequence: A warning with consequences for continued behavior. No
interaction with the people involved, including unsolicited interaction with
those enforcing the Code of Conduct, for a specified period of time. This
includes avoiding interactions in community spaces as well as external channels
like social media. Violating these terms may lead to a temporary or permanent
ban.

3. Temporary Ban Copy Section

Community Impact: A serious violation of community standards, including
sustained inappropriate behavior.

Consequence: A temporary ban from any sort of interaction or public
communication with the community for a specified period of time. No public or
private interaction with the people involved, including unsolicited interaction
with those enforcing the Code of Conduct, is allowed during this period.
Violating these terms may lead to a permanent ban.

4. Permanent Ban Copy Section

Community Impact: Demonstrating a pattern of violation of community
standards, including sustained inappropriate behavior, harassment of an
individual, or aggression toward or disparagement of classes of individuals.

Consequence: A permanent ban from any sort of public interaction within the
community.

Attribution Copy Chapter

This Code of Conduct is adapted from the Contributor Covenant,
version 2.1, available at
https://www.contributor-covenant.org/version/2/1/code_of_conduct.html.

Community Impact Guidelines were inspired by
Mozilla's code of conduct enforcement ladder.

For answers to common questions about this code of conduct, see the FAQ at
https://www.contributor-covenant.org/faq. Translations are available at
https://www.contributor-covenant.org/translations.

File: CODE_OF_CONDUCT_ja.md Copy Chapter

[Binary file]

File: CONTRIBUTING.md Copy Chapter

Contributing

Thank you for your interest in Liam ERD! This document explains how you can engage with the project.

Please note we have a code of conduct, please follow it in all your interactions with the project.

Our contribution policy Copy Chapter

Liam ERD is developed by the core team, and we do not accept unsolicited external Pull Requests. Pull requests opened without a prior invitation from the team will be closed without review.

This is not a judgment on the value of your work. Writing code has become inexpensive, but reviewing it carefully still depends on limited maintainer attention, and every external change widens the project's supply-chain surface. To keep Liam ERD secure and maintainable, code changes are merged by the core team.

This does not mean we don't want to hear from you — quite the opposite. There are many valuable ways to get involved, listed below.

How you can contribute Copy Chapter

• Report a bug — open a bug report with clear steps to reproduce.
• Share an idea or ask a question — start a thread on GitHub Discussions.
• Report a security issue — please follow our Security Policy rather than opening a public issue.
• Spread the word — star the repo and tell others who might find Liam ERD useful.

Development environment setup Copy Chapter

Before setting up the development environment, we recommend reviewing our Repository Architecture documentation to understand how our packages are organized.

To set up a development environment, please follow these steps:

1. Clone the repo

   sh Copy

   git clone https://github.com/liam-hq/liam

2. Run the setup script

   sh Copy

   ./scripts/setup-local-dev.sh

   This script will:

   • Install dependencies with pnpm
   • Create .env file from template
   • Display next steps

   Alternatively, you can run the setup steps manually:

   sh Copy

   corepack enable
   corepack prepare
   pnpm install

3. Set up environment variables

   Copy the template environment file to create your local environment file:

   sh Copy

   cp .env.template .env

   For maintainers (Vercel team members only):

   Link your local project to the Vercel project and pull environment variables:

   sh Copy

   pnpm vercel:link
   pnpm vercel:env-pull

4. Start the development server

   sh Copy

   pnpm dev

5. Open apps

   package	url
   @liam-hq/app	http://localhost:3001
   @liam-hq/cli	http://localhost:5173
   @liam-hq/docs	http://localhost:3002
   @liam-hq/storybook	http://localhost:6006

Issues and feature requests Copy Chapter

You've found a bug in the source code, a mistake in the documentation or maybe you'd like a new feature? Take a look at GitHub Discussions to see if it's already being discussed. You can help us by submitting an issue on GitHub. Before you create an issue, make sure to search the issue archive -- your issue may have already been addressed!

Troubleshooting Copy Chapter

Common Setup Issues Copy Section

Missing Dependencies
If you encounter missing dependency errors:

1. Ensure you have the correct Node.js version (check .nvmrc)
2. Clear node_modules and reinstall: rm -rf node_modules && pnpm install
3. Enable corepack: corepack enable && corepack prepare

Please try to create bug reports that are:

• Reproducible. Include steps to reproduce the problem.
• Specific. Include as much detail as possible: which version, what environment, etc.
• Unique. Do not duplicate existing opened issues.
• Scoped to a Single Bug. One bug per report.

File: lefthook.yml Copy Chapter

pre-commit:
parallel: true
commands:
lint:
glob: "*.{js,jsx,ts,tsx,json,md,mdx,yml,yaml}"
run: pnpm lint
stage_fixed: true
skip:
- merge
- rebase
fail_text: "Lint failed. For AI Agents: Please fix all linting errors before committing."

File: package.json Copy Chapter

{
"name": "liam-frontend",
"private": true,
"version": "0.0.1",
"devDependencies": {
"@changesets/cli": "2.29.7",
"@changesets/get-github-info": "0.6.0",
"@changesets/types": "6.1.0",
"@turbo/gen": "2.9.14",
"@types/node": "22.18.11",
"@vitest/coverage-v8": "3.2.4",
"concurrently": "9.2.5",
"knip": "5.66.0",
"lefthook": "1.13.6",
"stylelint": "16.25.0",
"stylelint-config-recess-order": "7.4.0",
"stylelint-value-no-unknown-custom-properties": "6.0.1",
"syncpack": "13.0.4",
"turbo": "2.9.14",
"typescript": "5.9.3",
"vercel": "41.7.8",
"vitest": "3.2.6"
},
"scripts": {
"build": "turbo build",
"create-env-files": "([ -f .env ] || touch .env) && ([ -f .env.local ] || touch .env.local)",
"dev": "turbo dev",
"fmt": "concurrently "pnpm:fmt:"",
"fmt:knip": "knip --fix",
"fmt:syncpack-fix": "syncpack fix-mismatches",
"fmt:syncpack-format": "syncpack format",
"fmt:turbo": "turbo fmt",
"gen:turbo": "turbo gen",
"lint": "pnpm lint:turbo && pnpm lint:syncpack && pnpm lint:knip",
"lint:knip": "knip --treat-config-hints-as-errors",
"lint:stylelint": "stylelint "frontend/**/.css" --ignore-path .stylelintignore --max-warnings 0",
"lint:syncpack": "syncpack lint",
"lint:turbo": "turbo lint",
"prebuild": "pnpm create-env-files",
"prelint": "pnpm create-env-files",
"prepare": "lefthook install",
"release": "pnpm build --filter @liam-hq/cli && pnpm changeset publish",
"test": "turbo test",
"test:coverage": "vitest --coverage",
"test:e2e": "turbo test:e2e",
"vercel:env-pull": "vercel env pull .env",
"vercel:link": "vercel link -p liam-app -S "liambx" -y"
},
"packageManager": "[email protected]",
"pnpm": {
"overrides": {
"@radix-ui/react-dialog": "1.1.15",
"@vercel/fun>tar": "7.5.22",
"cookie": "^0.7.0",
"esbuild": "0.25.11",
"next>postcss": "8.5.23",
"next>sharp": "0.35.5",
"path-to-regexp": "8.3.0",
"prismjs": "1.30.0",
"syncpack>minimatch": "9.0.9",
"undici": "7.29.1"
}
}
}