uigraph 1.0.1 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +30 -51
- package/dist/bin.mjs +1278 -1921
- package/dist/viewer/assets/{dashboard-diagrams-page-Cb0xNr4W.js → dashboard-diagrams-page-BrtdVf99.js} +2 -2
- package/dist/viewer/assets/dashboard-diagrams-page-inner-BKLoXNtg.js +1 -0
- package/dist/viewer/assets/dashboard-services--bCsUPT2.js +1 -0
- package/dist/viewer/assets/{index-BC5xdBQU.js → index-BGspOYtx.js} +2 -2
- package/dist/viewer/assets/index-D0Xz1Ckp.css +1 -0
- package/dist/viewer/assets/lens-runs-page-DCvFQzxB.js +1 -0
- package/dist/viewer/assets/section-get-started-CSeRLtZQ.js +1 -0
- package/dist/viewer/index.html +2 -2
- package/package.json +2 -2
- package/dist/agents.md +0 -28
- package/dist/plan-prompt.md +0 -56
- package/dist/prompt.md +0 -44
- package/dist/viewer/assets/dashboard-diagrams-page-inner-CD--zr5q.js +0 -1
- package/dist/viewer/assets/dashboard-services-DEscIO2O.js +0 -1
- package/dist/viewer/assets/index-m8s6_jQi.css +0 -1
- package/dist/viewer/assets/lens-runs-page-BnUS57LM.js +0 -1
package/README.md
CHANGED
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
<img src="docs/media/uigraph-demo.gif" alt="Running uigraph shows the UIGraph banner and starts the local viewer" width="800" />
|
|
32
32
|
</p>
|
|
33
33
|
|
|
34
|
-
UIGraph maps your project into services, APIs, dependencies and diagrams, and shows them in a local viewer.
|
|
34
|
+
UIGraph maps your project into services, APIs, dependencies and diagrams, and shows them in a local viewer. The UIGraph skill, running in a coding agent you already use, reads the project and writes the artifacts. One viewer shows every project you add.
|
|
35
35
|
|
|
36
36
|
UIGraph is open source.
|
|
37
37
|
|
|
@@ -51,33 +51,38 @@ Requires Node.js 20 or later.
|
|
|
51
51
|
|
|
52
52
|
## Quick start
|
|
53
53
|
|
|
54
|
-
|
|
54
|
+
Install the UIGraph skill in your coding agent once:
|
|
55
55
|
|
|
56
56
|
```sh
|
|
57
|
-
|
|
58
|
-
uigraph
|
|
57
|
+
npx skills add uigraph-oss/skills
|
|
59
58
|
```
|
|
60
59
|
|
|
61
|
-
|
|
60
|
+
Then, in your project, start the agent and ask it to generate the artifacts:
|
|
62
61
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
4. The agent writes the artifacts, and the browser opens.
|
|
67
|
-
|
|
68
|
-
If you skip generation, the viewer still runs and shows your other projects. The viewer keeps running in the background after the command finishes. Run `uigraph stop` to stop it.
|
|
62
|
+
```
|
|
63
|
+
/uigraph Generate the UIGraph artifacts for this project
|
|
64
|
+
```
|
|
69
65
|
|
|
70
|
-
|
|
66
|
+
1. The agent explores the project.
|
|
67
|
+
2. It proposes diagrams and existing documents, and you pick the ones you want.
|
|
68
|
+
3. It writes the artifacts and adds them to the viewer.
|
|
71
69
|
|
|
72
|
-
|
|
70
|
+
The first time, it also adds instructions for coding agents. See [What UIGraph changes in your project](#what-uigraph-changes-in-your-project).
|
|
73
71
|
|
|
74
|
-
|
|
72
|
+
Then run UIGraph in the project:
|
|
75
73
|
|
|
76
74
|
```sh
|
|
77
|
-
|
|
75
|
+
cd your-project
|
|
76
|
+
uigraph
|
|
78
77
|
```
|
|
79
78
|
|
|
80
|
-
|
|
79
|
+
UIGraph starts the viewer at `http://127.0.0.1:7357/` and opens the browser. The viewer keeps running in the background after the command finishes. Run `uigraph stop` to stop it.
|
|
80
|
+
|
|
81
|
+
Moving 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.
|
|
82
|
+
|
|
83
|
+
## Use the UIGraph skill
|
|
84
|
+
|
|
85
|
+
You can also ask the skill for one artifact at a time:
|
|
81
86
|
|
|
82
87
|
```
|
|
83
88
|
/uigraph Create a sequence diagram of the checkout flow
|
|
@@ -86,7 +91,7 @@ Then, in your project, start the agent and ask for what you need:
|
|
|
86
91
|
/uigraph Create the database schema from the migrations
|
|
87
92
|
```
|
|
88
93
|
|
|
89
|
-
The agent reads the code
|
|
94
|
+
The agent reads the code and writes `.uigraph.yaml` and files under `.uigraph/`, for example:
|
|
90
95
|
|
|
91
96
|
```
|
|
92
97
|
.uigraph.yaml
|
|
@@ -104,36 +109,12 @@ Edits you make in the viewer are saved back to the same files, so the agent sees
|
|
|
104
109
|
|
|
105
110
|
### `uigraph`
|
|
106
111
|
|
|
107
|
-
Starts the viewer,
|
|
108
|
-
|
|
109
|
-
If the project has artifacts but no instructions for coding agents, it asks whether to add them. See [`uigraph init`](#uigraph-init). If you answer no, it doesn't ask again for that project.
|
|
110
|
-
|
|
111
|
-
| Option | Effect |
|
|
112
|
-
| -------------------- | ----------------------------------------------------------------------------------------- |
|
|
113
|
-
| `--agent <name>` | Agent to use: `claude`, `codex`, `opencode`, `pi` or `cursor`. Without it, UIGraph asks |
|
|
114
|
-
| `--model <name>` | Model to use, in the agent's own format (OpenCode and Pi: `provider/model`) |
|
|
115
|
-
| `--max-budget <usd>` | Spending cap per agent session. Planning, generation and repair each get one. Claude only |
|
|
116
|
-
| `--port <number>` | Viewer port. Default `7357`, or `UIGRAPH_PORT` |
|
|
117
|
-
| `--no-open` | Do not open a browser |
|
|
118
|
-
|
|
119
|
-
### `uigraph init`
|
|
120
|
-
|
|
121
|
-
Sets up a project for UIGraph and exits. If the project has no artifacts, it generates them first. Then it asks whether to add or update the instructions for coding agents. Needs a terminal.
|
|
122
|
-
|
|
123
|
-
The instructions tell coding agents such as Claude Code and Codex when and how to update the artifacts as they change the code. UIGraph writes them to `.uigraph/AGENTS.md` and adds a short UIGraph section that points to that file to `CLAUDE.md` and `AGENTS.md`, whichever exist. If neither exists, it creates `AGENTS.md`. Run `uigraph init` again to update the instructions to the current version.
|
|
124
|
-
|
|
125
|
-
Takes the same `--agent`, `--model` and `--max-budget` options as `uigraph`.
|
|
126
|
-
|
|
127
|
-
### `uigraph generate`
|
|
128
|
-
|
|
129
|
-
Generates the artifacts and exits. If the project already has artifacts, it asks whether to update them. Needs a terminal.
|
|
112
|
+
Starts 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.
|
|
130
113
|
|
|
131
|
-
| Option
|
|
132
|
-
|
|
|
133
|
-
| `--
|
|
134
|
-
| `--
|
|
135
|
-
| `--model <name>` | Same as for `uigraph` |
|
|
136
|
-
| `--max-budget <usd>` | Same as for `uigraph` |
|
|
114
|
+
| Option | Effect |
|
|
115
|
+
| ----------------- | ---------------------------------------------- |
|
|
116
|
+
| `--port <number>` | Viewer port. Default `7357`, or `UIGRAPH_PORT` |
|
|
117
|
+
| `--no-open` | Do not open a browser |
|
|
137
118
|
|
|
138
119
|
### `uigraph sync`
|
|
139
120
|
|
|
@@ -175,7 +156,7 @@ Run `uigraph <command> --help` for details.
|
|
|
175
156
|
|
|
176
157
|
## Agents and sign-in
|
|
177
158
|
|
|
178
|
-
|
|
159
|
+
Lens uses your own login for the agent you pick:
|
|
179
160
|
|
|
180
161
|
- **Claude Code:** your Claude login or `ANTHROPIC_API_KEY`. Set `CLAUDE_CONFIG_DIR` if your Claude settings live outside `~/.claude`.
|
|
181
162
|
- **Codex:** `codex login` or `CODEX_API_KEY`.
|
|
@@ -185,10 +166,8 @@ UIGraph uses your own login for the agent you pick:
|
|
|
185
166
|
|
|
186
167
|
## What UIGraph changes in your project
|
|
187
168
|
|
|
188
|
-
-
|
|
189
|
-
-
|
|
190
|
-
- If you accept the instructions for coding agents, UIGraph also adds a UIGraph section to `CLAUDE.md` and `AGENTS.md`, or creates `AGENTS.md`. It never adds the section twice.
|
|
191
|
-
- Projects where you declined the instructions are listed in `~/.uigraph/preferences.yaml`.
|
|
169
|
+
- The UIGraph skill writes `.uigraph.yaml` and `.uigraph/`.
|
|
170
|
+
- When the project has no artifacts yet, the skill also writes instructions for coding agents to `.uigraph/AGENTS.md`. They tell agents such as Claude Code and Codex when and how to update the artifacts as they change the code. It adds a short UIGraph section that points to that file to `CLAUDE.md` and `AGENTS.md`, whichever exist, or creates `AGENTS.md`.
|
|
192
171
|
- Diagram edits in the viewer are saved back to the project's files. Services, APIs and dependencies are read-only in the viewer.
|
|
193
172
|
- Diagrams created on the Diagrams page are saved in `~/.uigraph/`. Diagrams created on a service's Architecture tab are saved in that service's project.
|
|
194
173
|
- The viewer listens on `127.0.0.1` only.
|