[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-105442":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":16,"stars30d":16,"stars90d":15,"forks30d":15,"starsTrendScore":17,"compositeScore":18,"rankGlobal":10,"rankLanguage":10,"license":19,"archived":20,"fork":20,"defaultBranch":21,"hasWiki":20,"hasPages":20,"topics":22,"createdAt":10,"pushedAt":10,"updatedAt":32,"readmeContent":33,"aiSummary":10,"trendingCount":15,"starSnapshotCount":15,"syncStatus":34,"lastSyncTime":35,"discoverSource":36},105442,"uigraph","uigraph-oss\u002Fuigraph","uigraph-oss","Open-source local viewer for software architecture. Use the UIGraph skill with your coding agent to generate service maps, API specs, dependency graphs, and diagrams.","https:\u002F\u002Fuigraph.app",null,"TypeScript",76,4,59,0,17,51,68.3,"Apache License 2.0",false,"main",[23,24,25,26,27,28,29,30,31],"ai-agents","api-documentation","architecture-diagrams","code-visualization","dependency-graph","developer-tools","service-catalog","service-map","software-architecture","2026-11-01 00:16:51","\u003Cp align=\"center\">\n  \u003Cimg src=\"docs\u002Fmedia\u002Fuigraph-mark.svg\" alt=\"UIGraph\" width=\"96\" height=\"96\" \u002F>\n\u003C\u002Fp>\n\u003Ch1 align=\"center\">UIGraph\u003C\u002Fh1>\n\u003Ch3 align=\"center\">The engineering map of your codebase.\u003C\u002Fh3>\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"#install\">\u003Cstrong>Install\u003C\u002Fstrong>\u003C\u002Fa>  · \n  \u003Ca href=\"#quick-start\">\u003Cstrong>Quick start\u003C\u002Fstrong>\u003C\u002Fa>  · \n  \u003Ca href=\"#use-the-uigraph-skill\">\u003Cstrong>Skill\u003C\u002Fstrong>\u003C\u002Fa>  · \n  \u003Ca href=\"#architecture-diagrams\">\u003Cstrong>Diagrams\u003C\u002Fstrong>\u003C\u002Fa>  · \n  \u003Ca href=\"#commands\">\u003Cstrong>Commands\u003C\u002Fstrong>\u003C\u002Fa>  · \n  \u003Ca href=\"#lens\">\u003Cstrong>Lens\u003C\u002Fstrong>\u003C\u002Fa>\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fuigraph\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Fuigraph?style=flat-square&color=3B6BFF&label=npm\" alt=\"npm version\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fuigraph\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002Fuigraph?style=flat-square&color=0EA5E9\" alt=\"npm downloads\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"#install\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fnode-%3E%3D20-22c55e?style=flat-square&logo=node.js&logoColor=white\" alt=\"Node.js 20 or later\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"LICENSE\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Flicense-Apache--2.0-64748b?style=flat-square\" alt=\"Apache-2.0 License\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fuigraph-oss\u002Fuigraph\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FGitHub-uigraph--oss%2Fuigraph-181717?style=flat-square&logo=github\" alt=\"GitHub repository\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"#agents-and-sign-in\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fworks_with-Claude_Code_%7C_Codex_%7C_OpenCode_%7C_Pi_%7C_Cursor-7C3AED?style=flat-square\" alt=\"Works with Claude Code, Codex, OpenCode, Pi and Cursor\" \u002F>\u003C\u002Fa>\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fuigraph.app\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FWebsite-3B6BFF?style=for-the-badge\" alt=\"UIGraph website\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fdocs.uigraph.app\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FDocs-0B0E16?style=for-the-badge\" alt=\"UIGraph docs\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fconsole.uigraph.app\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FUIGraph_Cloud-0891B2?style=for-the-badge\" alt=\"UIGraph Cloud\" \u002F>\u003C\u002Fa>\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  \u003Cimg src=\"docs\u002Fmedia\u002Fuigraph-story.gif\" alt=\"UIGraph story\" width=\"800\" \u002F>\n\u003C\u002Fp>\n\nEvery service in your codebase, with its APIs, dependencies, databases and diagrams. Your coding agent writes them as plain files in your repo, and UIGraph shows them in a local viewer.\n\nWorks with Claude Code, Codex, OpenCode, Pi and Cursor. Free and open source.\n\n## Why UIGraph\n\n- **Lives in your repo.** Artifacts are plain files: `.uigraph.yaml`, Mermaid, OpenAPI and SQL. You version them, diff them and review them in pull requests.\n- **Built from your code.** The agent writes only what it finds in your files, and you choose which diagrams and documents it creates.\n- **Two-way.** Edit a diagram in the viewer and it is saved back to the file.\n- **Reviews pull requests.** `uigraph lens` shows the flows a change touches, its impact, test coverage and rollout.\n- **Your agent, your logins.** UIGraph uses the coding agent you already have.\n\n## Install\n\n```sh\nnpm install -g uigraph@latest\n```\n\nOr run it without installing:\n\n```sh\nnpx uigraph@latest\n```\n\nRequires Node.js 20 or later.\n\n## Quick start\n\nInstall the UIGraph skill in your coding agent once:\n\n```sh\nnpx skills add uigraph-oss\u002Fskills\n```\n\nIn your project, start the agent and ask it to generate the artifacts:\n\n```\n\u002Fuigraph Generate the UIGraph artifacts for this project\n```\n\n1. The agent explores the project.\n2. It proposes diagrams and existing documents, and you pick the ones you want.\n3. It writes the artifacts, adds them to the viewer and opens it.\n\nThe first time, it also adds a short `.uigraph\u002FAGENTS.md`, so your agent keeps the artifacts up to date as the code changes. See [What UIGraph changes](#what-uigraph-changes).\n\nTo open the viewer again later, run UIGraph in the project:\n\n```sh\ncd your-project\nuigraph\n```\n\nUIGraph starts the viewer at `http:\u002F\u002F127.0.0.1:8447\u002F` and opens the browser. The viewer keeps running in the background after the command finishes. Run `uigraph stop` to stop it.\n\nMoving to another project? Run `uigraph` there too. If the viewer is already running, UIGraph adds the project to it instead of starting a second viewer.\n\n## Use the UIGraph skill\n\nAsk for everything at once, as in [Quick start](#quick-start), or for one artifact at a time. The agent reads your code and writes `.uigraph.yaml` and files under `.uigraph\u002F`.\n\n| Artifact              | Example prompt                                                      | Written to                                                                |\n| --------------------- | ------------------------------------------------------------------- | ------------------------------------------------------------------------- |\n| Architecture diagrams | `\u002Fuigraph Create a sequence diagram of the checkout flow`           | `.uigraph\u002Fdiagrams\u002F`. See [Architecture diagrams](#architecture-diagrams) |\n| API specs             | `\u002Fuigraph Create the API spec for this service`                     | `.uigraph\u002Fopenapi\u002F`. Existing specs are used where they are               |\n| Database schemas      | `\u002Fuigraph Create the database schema from the migrations`           | `.uigraph\u002Fdb\u002F`                                                            |\n| Saved queries         | `\u002Fuigraph Add the important queries against the orders database`    | `.uigraph\u002Fqueries\u002F`                                                       |\n| Dependencies          | `\u002Fuigraph List the services and datastores this service depends on` | `.uigraph.yaml`                                                           |\n| Docs                  | `\u002Fuigraph Document how to run and operate this service`             | `.uigraph\u002Fdocs\u002F`. Existing docs are used where they are                   |\n\nThe skill writes only what it finds in your files. It also creates maps when you ask for them, and cost tags and a timeline when your repo has the evidence for them.\n\n### See them in the viewer\n\nRunning the skill, or `uigraph` in the project, adds the project to the viewer. After that, the viewer reads the files on every page load, so refresh the browser to see anything the agent writes later.\n\nDiagram edits you make in the viewer are saved back to the same files, so the agent sees them the next time it runs.\n\n## Architecture diagrams\n\nAsk your agent to draw how your system works, straight from the code:\n\n```\n\u002Fuigraph Create a system context diagram for this service\n\u002Fuigraph Create a sequence diagram of the login flow\n\u002Fuigraph Create a state diagram for the order status\n\u002Fuigraph Create a diagram of the background jobs\n\u002Fuigraph Create C4 container and component diagrams for this service\n```\n\nThe agent reads your code, proposes diagrams, and you pick the ones you want. It draws only what it finds in your files.\n\n| Diagram             | Shows                                                     | Type                          |\n| ------------------- | --------------------------------------------------------- | ----------------------------- |\n| System context      | The service, its datastores and every outbound dependency | Flowchart                     |\n| Request or flow     | One important flow, such as login, checkout or ingestion  | Sequence diagram              |\n| Background flow     | Workers, queues, scheduled jobs and webhook handlers      | Flowchart or sequence diagram |\n| State machine       | An entity with a status and its transitions               | State diagram                 |\n| Internal components | How the main modules call each other                      | Flowchart                     |\n| Deployment          | Kubernetes or Terraform with several units                | Flowchart                     |\n\nTo keep diagrams current, ask your agent to update them after a change. The `.uigraph\u002FAGENTS.md` that the skill adds on the first run tells agents to do this as they work.\n\n## Commands\n\n### `uigraph`\n\nStarts the viewer, adds the project's artifacts to it, and opens the browser. If the project has no artifacts, the viewer still runs and shows your other projects.\n\n| Option            | Effect                                         |\n| ----------------- | ---------------------------------------------- |\n| `--port \u003Cnumber>` | Viewer port. Default `8447`, or `UIGRAPH_PORT` |\n| `--no-open`       | Do not open a browser                          |\n\n### `uigraph sync`\n\nAdds the project's existing artifacts to the viewer and exits. It does not start the viewer or generate anything. Use it to add a project that already has artifacts, for example from a script.\n\n### Viewer: `start`, `status`, `stop`, `restart`\n\n| Command           | Does                                                           |\n| ----------------- | -------------------------------------------------------------- |\n| `uigraph start`   | Start the viewer in this terminal                              |\n| `uigraph status`  | Show whether the viewer is running and which projects it shows |\n| `uigraph stop`    | Stop the viewer                                                |\n| `uigraph restart` | Stop the running viewer and start a new one in this terminal   |\n\nEach accepts `--port \u003Cnumber>`.\n\n`uigraph` starts the viewer in the background. `uigraph start` and `uigraph restart` run it in the current terminal instead, and closing that terminal stops it.\n\n### `uigraph lens`\n\nReviews a GitHub pull request, or the difference between two branches, to help you understand the change. See [Lens](#lens).\n\n| Option              | Effect                                              |\n| ------------------- | --------------------------------------------------- |\n| `--base \u003Cbranch>`   | Branch or commit to compare against                 |\n| `--target \u003Cbranch>` | Branch or commit to review                          |\n| `--regenerate`      | Run a new review instead of reusing a completed one |\n| `--agent \u003Cname>`    | Agent to use. Without it, UIGraph asks              |\n| `--model \u003Cname>`    | Model to use, in the agent's own format             |\n| `--port \u003Cnumber>`   | Viewer port                                         |\n| `--no-open`         | Do not open a browser                               |\n\n### Global options\n\n- `--debug`: print stack traces for unexpected errors (or set `UIGRAPH_DEBUG=1`).\n- `-v`, `--version`: print the version.\n\nRun `uigraph \u003Ccommand> --help` for details.\n\n## What UIGraph changes\n\n**In your project**\n\n- The UIGraph skill writes `.uigraph.yaml` and the files under `.uigraph\u002F`.\n- When the project has no artifacts yet, the skill also adds `.uigraph\u002FAGENTS.md`. It tells agents such as Claude Code and Codex when and how to update the artifacts as they change the code. A short UIGraph section in `CLAUDE.md` and `AGENTS.md` points to it. If neither file exists, the skill creates `AGENTS.md`.\n- Diagram edits in the viewer are saved back to the project's files. Services, APIs and dependencies are read-only in the viewer.\n- Diagrams created on a service's Architecture tab are saved in that service's project.\n\n**On your machine**\n\n- `~\u002F.uigraph\u002F` holds your registered projects, the viewer log, Lens runs and settings, and diagrams created on the Diagrams page.\n- The viewer listens on `127.0.0.1` only.\n\n## Lens\n\nLens helps you understand a change before you approve it. For each review it shows:\n\n- Before and after diagrams of the flows the change touches\n- How the change compares with its issue, description and commits\n- Values the code picked, such as limits and timeouts\n- Other services the change affects\n- Which new behavior has a test\n- A safe order to ship, with checks before you deploy\n\nEach step can be turned off. See [Customize](#customize).\n\n### What to review\n\nA pull request, in any of these forms:\n\n```sh\nuigraph lens https:\u002F\u002Fgithub.com\u002Fowner\u002Frepo\u002Fpull\u002F123\nuigraph lens owner\u002Frepo#123\nuigraph lens 123            # inside a clone whose origin is on GitHub\n```\n\nOr two branches in the current repository:\n\n```sh\nuigraph lens --base main --target feature\u002Flogin\n```\n\nLens reviews the commits on `--target` since it split from `--base`, the same changes a pull request would show. Uncommitted changes are not included. Branch reviews read your repository with git and do not use GitHub.\n\nThe review opens in the viewer. If no viewer is running, the command starts one in this terminal. Reviews are listed under Lens in the sidebar.\n\nEvery run is saved in `~\u002F.uigraph\u002Flens\u002Fruns`. A completed run for the same pull request, base and head commit is reused unless you pass `--regenerate`.\n\n### GitHub access\n\nPull request reviews need a GitHub token. Branch reviews do not. Lens looks for one in this order:\n\n1. `GITHUB_TOKEN`\n2. `GH_TOKEN`\n3. The token from `gh auth token`\n\nThe viewer process reads the token. It is not sent to the browser.\n\n### Customize\n\nSelect **Customize** in a review to choose:\n\n- a focus, for example \"look for double charges\"\n- which review steps to run\n- how many flow diagrams Lens draws (1 to 4)\n- the agent and model for reviews started from the viewer\n\nLens saves these settings in `~\u002F.uigraph\u002Flens\u002Fsettings.json`.\n\nA repository can set the same options for everyone who reviews it, in a `.uigraph.lens.yml` file at its root:\n\n```yaml\nfocus: |\n  Payments code. Look for double charges and wrong refund amounts.\nsteps:\n  impact: false\ndiagrams: 2\n```\n\nLens reads this file from the base branch, so a pull request cannot change how it is reviewed. The repository focus is used together with your own focus. Steps and diagrams in the file replace your settings.\n\n### Agents and sign-in\n\nThe skill runs inside your agent. Lens starts an agent itself, using your own login for the one you pick:\n\n- **Claude Code:** your Claude login or `ANTHROPIC_API_KEY`. Set `CLAUDE_CONFIG_DIR` if your Claude settings live outside `~\u002F.claude`.\n- **Codex:** `codex login` or `CODEX_API_KEY`.\n- **OpenCode:** provider keys such as `ANTHROPIC_API_KEY` or `OPENAI_API_KEY`. UIGraph bundles its own OpenCode with its own settings in `~\u002F.uigraph\u002Fopencode`, so it ignores any OpenCode you have installed.\n- **Pi:** `~\u002F.pi\u002Fagent\u002Fauth.json` or provider keys such as `ANTHROPIC_API_KEY`.\n- **Cursor:** `CURSOR_API_KEY`. Without `--model`, Cursor picks the model.\n\nLens sends the code it reviews to the agent's model provider.\n\n## UIGraph Cloud and self-hosted\n\nThe local viewer is free. For shared catalogs, teams and roles, integrations, AI features and SSO, see [UIGraph Cloud](https:\u002F\u002Fconsole.uigraph.app) or [self-host UIGraph](https:\u002F\u002Fdocs.uigraph.app\u002Fself-hosting). The Plans page in the viewer compares them.\n\n## Learn more\n\n- [Documentation](https:\u002F\u002Fdocs.uigraph.app)\n- [Contributing](CONTRIBUTING.md)\n\n## License\n\nUIGraph is licensed under the [Apache License 2.0](LICENSE).\n",2,"2026-10-31 04:26:48","CREATED_QUERY"]