qgraphflow 0.0.6
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/.agents/plugins/marketplace.json +20 -0
- package/.claude-plugin/marketplace.json +17 -0
- package/.claude-plugin/plugin.json +13 -0
- package/.codex-plugin/plugin.json +26 -0
- package/.cursor-plugin/plugin.json +9 -0
- package/.qoder-plugin/plugin.json +9 -0
- package/LICENSE +21 -0
- package/README.md +262 -0
- package/THIRD_PARTY_NOTICES.md +190 -0
- package/bin/qgraphflow.mjs +17 -0
- package/docs/clients.de.md +83 -0
- package/docs/clients.es.md +83 -0
- package/docs/clients.ja.md +83 -0
- package/docs/clients.md +83 -0
- package/docs/clients.pt.md +83 -0
- package/docs/clients.ru.md +83 -0
- package/docs/clients.zh-CN.md +83 -0
- package/docs/readme/README.de.md +262 -0
- package/docs/readme/README.es.md +262 -0
- package/docs/readme/README.ja.md +262 -0
- package/docs/readme/README.pt.md +262 -0
- package/docs/readme/README.ru.md +262 -0
- package/docs/readme/README.zh-CN.md +264 -0
- package/examples/order-flow.graph.json +94 -0
- package/package.json +61 -0
- package/skills/q-flow/SKILL.md +69 -0
- package/skills/q-flow/agents/openai.yaml +5 -0
- package/skills/q-flow/assets/layout-dist/ELK-LICENSE.md +264 -0
- package/skills/q-flow/assets/layout-dist/worker.mjs +24 -0
- package/skills/q-flow/assets/viewer/package.json +22 -0
- package/skills/q-flow/assets/viewer/src/diagrams/architecture.js +43 -0
- package/skills/q-flow/assets/viewer/src/diagrams/card.js +21 -0
- package/skills/q-flow/assets/viewer/src/diagrams/class.js +52 -0
- package/skills/q-flow/assets/viewer/src/diagrams/dataflow.js +19 -0
- package/skills/q-flow/assets/viewer/src/diagrams/deployment.js +41 -0
- package/skills/q-flow/assets/viewer/src/diagrams/drawing.js +174 -0
- package/skills/q-flow/assets/viewer/src/diagrams/er.js +34 -0
- package/skills/q-flow/assets/viewer/src/diagrams/flowchart.js +37 -0
- package/skills/q-flow/assets/viewer/src/diagrams/registry.js +28 -0
- package/skills/q-flow/assets/viewer/src/diagrams/sequence.js +38 -0
- package/skills/q-flow/assets/viewer/src/diagrams/state.js +91 -0
- package/skills/q-flow/assets/viewer/src/diagrams/usecase.js +28 -0
- package/skills/q-flow/assets/viewer/src/edge-routing.js +596 -0
- package/skills/q-flow/assets/viewer/src/export-svg.js +90 -0
- package/skills/q-flow/assets/viewer/src/graph-validation.js +286 -0
- package/skills/q-flow/assets/viewer/src/i18n-messages.json +1314 -0
- package/skills/q-flow/assets/viewer/src/i18n.js +14 -0
- package/skills/q-flow/assets/viewer/src/layout-measure.js +55 -0
- package/skills/q-flow/assets/viewer/src/layout-quality.js +164 -0
- package/skills/q-flow/assets/viewer/src/layout-spacing.js +12 -0
- package/skills/q-flow/assets/viewer/src/node-svg.js +28 -0
- package/skills/q-flow/assets/viewer/src/radix-colors.js +47 -0
- package/skills/q-flow/assets/viewer/src/sequence-executions.js +140 -0
- package/skills/q-flow/assets/viewer/src/sequence-fragments.js +208 -0
- package/skills/q-flow/assets/viewer/src/session-graph.js +43 -0
- package/skills/q-flow/assets/viewer/src/text-layout.js +126 -0
- package/skills/q-flow/assets/viewer/src/visual-style.js +158 -0
- package/skills/q-flow/assets/viewer-dist/index.html +291 -0
- package/skills/q-flow/references/acceptance.md +11 -0
- package/skills/q-flow/references/evidence-sources.md +38 -0
- package/skills/q-flow/references/graph-common.md +54 -0
- package/skills/q-flow/references/graph-schema.md +214 -0
- package/skills/q-flow/references/guided-intake.md +100 -0
- package/skills/q-flow/references/types/architecture.md +41 -0
- package/skills/q-flow/references/types/class.md +40 -0
- package/skills/q-flow/references/types/dataflow.md +41 -0
- package/skills/q-flow/references/types/deployment.md +37 -0
- package/skills/q-flow/references/types/er.md +36 -0
- package/skills/q-flow/references/types/flowchart.md +47 -0
- package/skills/q-flow/references/types/sequence.md +74 -0
- package/skills/q-flow/references/types/state.md +44 -0
- package/skills/q-flow/references/types/usecase.md +39 -0
- package/skills/q-flow/references/viewer-development.md +258 -0
- package/skills/q-flow/references/visual-contract.md +54 -0
- package/skills/q-flow/scripts/compile-layout.mjs +565 -0
- package/skills/q-flow/scripts/compile-sequence.mjs +112 -0
- package/skills/q-flow/scripts/generate-viewer.mjs +126 -0
- package/skills/q-flow/scripts/validate-graph.mjs +278 -0
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "supermax92",
|
|
3
|
+
"interface": {
|
|
4
|
+
"displayName": "QGraphFlow Local"
|
|
5
|
+
},
|
|
6
|
+
"plugins": [
|
|
7
|
+
{
|
|
8
|
+
"name": "qgraphflow",
|
|
9
|
+
"source": {
|
|
10
|
+
"source": "local",
|
|
11
|
+
"path": "./"
|
|
12
|
+
},
|
|
13
|
+
"policy": {
|
|
14
|
+
"installation": "AVAILABLE",
|
|
15
|
+
"authentication": "ON_INSTALL"
|
|
16
|
+
},
|
|
17
|
+
"category": "Productivity"
|
|
18
|
+
}
|
|
19
|
+
]
|
|
20
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "supermax92",
|
|
3
|
+
"owner": {
|
|
4
|
+
"name": "Max Zheng"
|
|
5
|
+
},
|
|
6
|
+
"metadata": {
|
|
7
|
+
"description": "Plugins by Max Zheng, including QGraphFlow for evidence-grounded interactive diagrams."
|
|
8
|
+
},
|
|
9
|
+
"plugins": [
|
|
10
|
+
{
|
|
11
|
+
"name": "qgraphflow",
|
|
12
|
+
"version": "0.0.6",
|
|
13
|
+
"source": "./",
|
|
14
|
+
"description": "Generate evidence-grounded interactive software diagrams with offline HTML, SVG and PNG export."
|
|
15
|
+
}
|
|
16
|
+
]
|
|
17
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "qgraphflow",
|
|
3
|
+
"version": "0.0.6",
|
|
4
|
+
"description": "Generate evidence-grounded interactive software diagrams with offline HTML, SVG and PNG export.",
|
|
5
|
+
"author": {
|
|
6
|
+
"name": "Max Zheng",
|
|
7
|
+
"url": "https://github.com/supermax92"
|
|
8
|
+
},
|
|
9
|
+
"homepage": "https://github.com/supermax92/qgraphflow#readme",
|
|
10
|
+
"repository": "https://github.com/supermax92/qgraphflow",
|
|
11
|
+
"license": "MIT",
|
|
12
|
+
"keywords": ["diagram", "architecture", "sequence-diagram", "visualization", "documentation"]
|
|
13
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "qgraphflow",
|
|
3
|
+
"version": "0.0.6",
|
|
4
|
+
"description": "Generate evidence-grounded interactive software diagrams with offline HTML, SVG and PNG export.",
|
|
5
|
+
"author": {
|
|
6
|
+
"name": "Max Zheng"
|
|
7
|
+
},
|
|
8
|
+
"skills": "./skills/",
|
|
9
|
+
"interface": {
|
|
10
|
+
"displayName": "QGraphFlow",
|
|
11
|
+
"shortDescription": "Architecture and flow diagrams: nine kinds of interactive software diagrams from source, configuration and documents",
|
|
12
|
+
"longDescription": "Generate flow, architecture, sequence, ER, deployment, class, state, use-case and data-flow diagrams from CodeGraph or raw repository evidence; deliver an offline HTML viewer and an auditable graph.json with in-page SVG and PNG download.",
|
|
13
|
+
"developerName": "Max Zheng",
|
|
14
|
+
"category": "Productivity",
|
|
15
|
+
"capabilities": [
|
|
16
|
+
"Interactive",
|
|
17
|
+
"Write"
|
|
18
|
+
],
|
|
19
|
+
"defaultPrompt": [
|
|
20
|
+
"Use $q-flow to analyse the current module and generate an interactive architecture diagram.",
|
|
21
|
+
"Use $q-flow to generate a sequence diagram from the call order in the source.",
|
|
22
|
+
"Use $q-flow to generate an ER diagram from the database migrations and entities."
|
|
23
|
+
],
|
|
24
|
+
"brandColor": "#203f35"
|
|
25
|
+
}
|
|
26
|
+
}
|
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 QGraphFlow contributors
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,262 @@
|
|
|
1
|
+
<div align="center">
|
|
2
|
+
|
|
3
|
+
# QGraphFlow
|
|
4
|
+
|
|
5
|
+
### Turn complex code into diagrams you can explore.
|
|
6
|
+
|
|
7
|
+
Follow the path. Inspect the evidence. Share one offline file.
|
|
8
|
+
|
|
9
|
+
<sub>💡 Inspired by <a href="https://github.com/Cocoon-AI/architecture-diagram-generator">Cocoon-AI/architecture-diagram-generator</a> — thanks to the original author for the idea.</sub>
|
|
10
|
+
|
|
11
|
+
[English](README.md) · [中文](docs/readme/README.zh-CN.md) · [Русский](docs/readme/README.ru.md) · [Português](docs/readme/README.pt.md) · [日本語](docs/readme/README.ja.md) · [Deutsch](docs/readme/README.de.md) · [Español](docs/readme/README.es.md)
|
|
12
|
+
|
|
13
|
+
[Live demo](https://supermax92.github.io/qgraphflow/) · [Client installation](#installation-guide) · [Report an issue](https://github.com/supermax92/qgraphflow/issues) · [MIT](LICENSE)
|
|
14
|
+
|
|
15
|
+
</div>
|
|
16
|
+
|
|
17
|
+

|
|
18
|
+
|
|
19
|
+
*Nine diagram types: architecture, flowchart, sequence, ER, deployment, class, state, use case and data flow.*
|
|
20
|
+
|
|
21
|
+
QGraphFlow turns source code, schemas, configuration and requirements into interactive software diagrams, with evidence you can inspect and an offline HTML file you can share.
|
|
22
|
+
|
|
23
|
+
**What sets it apart:** nine diagram types from one skill, a source for every relationship, automatic layout, editing in the page, and no network requests from the plugin scripts or the Viewer itself.
|
|
24
|
+
|
|
25
|
+
```bash
|
|
26
|
+
npx skills add supermax92/qgraphflow
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
One command installs the skill for Claude Code, Codex, Cursor and Qoder; the [installation guide](#installation-guide) covers the plugin installations and the other clients.
|
|
30
|
+
|
|
31
|
+
- **Explore:** search, zoom and pan; inspect responsibilities and upstream/downstream relationships.
|
|
32
|
+
|
|
33
|
+

|
|
34
|
+
|
|
35
|
+
- **Verify:** inspect nodes and edges for source files, lines, symbols and explicitly marked uncertainty.
|
|
36
|
+
|
|
37
|
+

|
|
38
|
+
|
|
39
|
+
- **Edit:** unlock the layout, change text and move elements; reset when needed.
|
|
40
|
+
|
|
41
|
+

|
|
42
|
+
|
|
43
|
+
- **Share:** open offline HTML or export the complete diagram as SVG / PNG.
|
|
44
|
+
|
|
45
|
+

|
|
46
|
+
|
|
47
|
+
The top animation shows the architecture, sequence and ER views for 1.5 seconds each (4.5 seconds per loop); the four feature animations run 6.5–8.5 seconds. All of them are recorded from the source-built Viewer on the [agent-desk example](examples/showcase/agent-desk) — fictional business, real code — with English graph and interface text. They are hosted as [showcase-v2 Release assets](https://github.com/supermax92/qgraphflow/releases/tag/showcase-v2) and kept out of Git history and the plugin package, so viewing them needs network access; the generated diagram HTML itself works offline.
|
|
48
|
+
|
|
49
|
+
## Installation guide
|
|
50
|
+
|
|
51
|
+
You need Node.js 22 or later and a plugin-capable client with model access configured.
|
|
52
|
+
|
|
53
|
+
### Quick install
|
|
54
|
+
|
|
55
|
+
```bash
|
|
56
|
+
npx skills add supermax92/qgraphflow
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
Tested with `skills` 1.7.0 for Claude Code, Codex, Cursor and Qoder. It asks which clients to install to; `-a claude-code` names one, and `-g` installs for your user instead of the current project. The skill installs as `q-flow`, without the `qgraphflow:` prefix of the plugin installations below.
|
|
60
|
+
|
|
61
|
+
To install it as a plugin instead, follow the steps below. [Qoder Desktop](#qoder-desktop) users can install from the marketplace and skip step 1.
|
|
62
|
+
|
|
63
|
+
### 1. Download the plugin
|
|
64
|
+
|
|
65
|
+
Download [qgraphflow-0.0.6.zip](https://github.com/supermax92/qgraphflow/releases/download/v0.0.6/qgraphflow-0.0.6.zip) and extract it into a separate directory, keeping hidden files.
|
|
66
|
+
|
|
67
|
+
Run the following terminal commands from **the extracted plugin root containing `skills/`**.
|
|
68
|
+
|
|
69
|
+
### 2. Install in your client
|
|
70
|
+
|
|
71
|
+
#### Codex App / CLI
|
|
72
|
+
|
|
73
|
+
Codex CLI must be installed and available in your terminal:
|
|
74
|
+
|
|
75
|
+
```bash
|
|
76
|
+
codex plugin marketplace add .
|
|
77
|
+
codex plugin add qgraphflow@supermax92
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
Start a new session, type `$`, and select `qgraphflow:q-flow`.
|
|
81
|
+
|
|
82
|
+
#### Claude Code
|
|
83
|
+
|
|
84
|
+
Install directly from GitHub without downloading the ZIP:
|
|
85
|
+
|
|
86
|
+
```bash
|
|
87
|
+
claude plugin marketplace add supermax92/qgraphflow
|
|
88
|
+
claude plugin install qgraphflow@supermax92 --scope user
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
Or, from the extracted plugin root:
|
|
92
|
+
|
|
93
|
+
```bash
|
|
94
|
+
claude plugin marketplace add .
|
|
95
|
+
claude plugin install qgraphflow@supermax92 --scope user
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
Start a new session and enter `/q-flow` (or the fully qualified `/qgraphflow:q-flow`).
|
|
99
|
+
|
|
100
|
+
#### Qoder CLI
|
|
101
|
+
|
|
102
|
+
```bash
|
|
103
|
+
qodercli plugins install .
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
Start a new session and select `q-flow`.
|
|
107
|
+
|
|
108
|
+
#### Qoder Desktop
|
|
109
|
+
|
|
110
|
+
**Recommended:** Open **Settings → Plugins → Marketplace**, search for **代码图谱可视化** or **qgraphflow**, and install the plugin. Start a new session and select `q-flow`. No ZIP download or source build is required.
|
|
111
|
+
|
|
112
|
+
For local installation, complete step 1, then open **Settings → Plugins → Custom → Import** and import the complete extracted plugin root directory. Start a new session and select `q-flow`.
|
|
113
|
+
|
|
114
|
+
#### Cursor
|
|
115
|
+
|
|
116
|
+
Copy everything in the plugin root, including hidden files, into:
|
|
117
|
+
|
|
118
|
+
```text
|
|
119
|
+
~/.cursor/plugins/local/qgraphflow/
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
Confirm that `.cursor-plugin/plugin.json` exists there, reload the window, and find `q-flow` in **Customize**. Back up any previous version first; do not mix old and new files.
|
|
123
|
+
|
|
124
|
+
### 3. Start using it
|
|
125
|
+
|
|
126
|
+
Open your project in the client, start a new session, and select the skill. Describe your task using the [Quick start](#quick-start) examples below. Open the generated HTML in your browser.
|
|
127
|
+
|
|
128
|
+
<details>
|
|
129
|
+
<summary>Alternative installation: npm</summary>
|
|
130
|
+
|
|
131
|
+
You can also get the plugin from npmjs.com instead of the ZIP; no account, login or token is needed. Create a separate directory outside your application project:
|
|
132
|
+
|
|
133
|
+
```bash
|
|
134
|
+
mkdir qgraphflow-install
|
|
135
|
+
cd qgraphflow-install
|
|
136
|
+
npm install qgraphflow --ignore-scripts
|
|
137
|
+
cd node_modules/qgraphflow
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
You are now in the plugin root. Continue with the client installation steps above. **Downloading through npm does not automatically install the plugin in your client.** The package also provides the `qgraphflow` command used in [Keep diagrams in sync with code](#keep-diagrams-in-sync-with-code).
|
|
141
|
+
|
|
142
|
+
</details>
|
|
143
|
+
|
|
144
|
+
Building it yourself? See the [source build instructions](https://github.com/supermax92/qgraphflow/blob/main/docs/distribution.md#prepare-locally).
|
|
145
|
+
|
|
146
|
+
## Quick start
|
|
147
|
+
|
|
148
|
+
These examples use `$qgraphflow:q-flow` in Codex. If your client shows `$q-flow`, select that entry instead. For other clients, use the skill entry described above.
|
|
149
|
+
|
|
150
|
+
**Not sure where to begin?** Invoke the skill and choose the subject and question when prompted.
|
|
151
|
+
|
|
152
|
+
```text
|
|
153
|
+
$qgraphflow:q-flow
|
|
154
|
+
```
|
|
155
|
+
|
|
156
|
+
**Already have a goal?** Say which part to draw and what you want to understand. You do not need to choose a diagram type first.
|
|
157
|
+
|
|
158
|
+
### Example 1: Understand the architecture
|
|
159
|
+
|
|
160
|
+
```text
|
|
161
|
+
$qgraphflow:q-flow Analyze this project and create an architecture diagram in English showing module responsibilities, dependencies and system boundaries.
|
|
162
|
+
```
|
|
163
|
+
|
|
164
|
+
Useful when joining a project and learning its overall structure.
|
|
165
|
+
|
|
166
|
+
### Example 2: Trace a business flow
|
|
167
|
+
|
|
168
|
+
```text
|
|
169
|
+
$qgraphflow:q-flow Analyze order creation and create a sequence diagram in English showing pricing, stock reservation, payment and order persistence, including failure branches.
|
|
170
|
+
```
|
|
171
|
+
|
|
172
|
+
Replace order creation and its steps with your project's actual flow. Continue in the same conversation:
|
|
173
|
+
|
|
174
|
+
```text
|
|
175
|
+
$qgraphflow:q-flow Expand stock reservation from the previous diagram into a separate flowchart in English, showing success and failure handling.
|
|
176
|
+
```
|
|
177
|
+
|
|
178
|
+
Results go under `docs/qgraphflow/` by default. Open `index.html` to explore, edit and export; `graph.json` retains the graph data. Each view is also written as an SVG (`diagram.svg`, or `diagram-<n>-<type>.svg` for several views) that you can embed as an image in a README, pull request or wiki.
|
|
179
|
+
|
|
180
|
+
After editing in the page, **More → Save changes** in Chrome or Edge rewrites the page, `graph.json` and the SVGs in place once you pick the diagram's folder. Other browsers save `graph.json` only: put it in the folder and regenerate the page and SVGs with `npx -y qgraphflow generate docs/qgraphflow/<name>/graph.json docs/qgraphflow/<name> --layout preserve --force`.
|
|
181
|
+
|
|
182
|
+
<details>
|
|
183
|
+
<summary>Run the nine-view e-commerce example manually</summary>
|
|
184
|
+
|
|
185
|
+
These commands run the repository example. An installed plugin does not require cloning this repository. With Node.js 22 or later:
|
|
186
|
+
|
|
187
|
+
```bash
|
|
188
|
+
git clone https://github.com/supermax92/qgraphflow.git
|
|
189
|
+
cd qgraphflow
|
|
190
|
+
node skills/q-flow/scripts/validate-graph.mjs examples/showcase/ecommerce.en.graph.json
|
|
191
|
+
node skills/q-flow/scripts/generate-viewer.mjs examples/showcase/ecommerce.en.graph.json output/ecommerce-en
|
|
192
|
+
```
|
|
193
|
+
|
|
194
|
+
Open `output/ecommerce-en/index.html` in a browser; the nine SVGs sit next to it. Switch views with **Diagram types** in the top toolbar; saved text and positions survive switching. **More → Save changes** saves all views as described above. The same pages are online in the [live demo](https://supermax92.github.io/qgraphflow/).
|
|
195
|
+
|
|
196
|
+
The prebuilt Viewer needs no dependency installation, API key or backend service. AI-assisted evidence gathering and graph authoring use your chosen client's model service.
|
|
197
|
+
|
|
198
|
+
</details>
|
|
199
|
+
|
|
200
|
+
## Keep diagrams in sync with code
|
|
201
|
+
|
|
202
|
+
A diagram generated with a repository root records where each component is defined. Validating it with `--repo-root` fails when a recorded file is gone, a line range no longer fits, or a recorded symbol has left its lines, and the error names the lines where the symbol is now. Add this job to your CI; it needs no build, login or token:
|
|
203
|
+
|
|
204
|
+
```yaml
|
|
205
|
+
name: Diagrams
|
|
206
|
+
on: [push, pull_request]
|
|
207
|
+
jobs:
|
|
208
|
+
diagrams:
|
|
209
|
+
runs-on: ubuntu-latest
|
|
210
|
+
steps:
|
|
211
|
+
- uses: actions/checkout@v7
|
|
212
|
+
- uses: actions/setup-node@v7
|
|
213
|
+
with:
|
|
214
|
+
node-version: '22'
|
|
215
|
+
- run: |
|
|
216
|
+
for graph in docs/qgraphflow/*/graph.json; do
|
|
217
|
+
npx -y qgraphflow validate "$graph" --input-only --repo-root . || { echo "::error file=$graph::$graph failed validation"; failed=1; }
|
|
218
|
+
done
|
|
219
|
+
exit ${failed:-0}
|
|
220
|
+
```
|
|
221
|
+
|
|
222
|
+
When it fails, ask the skill to refresh that diagram:
|
|
223
|
+
|
|
224
|
+
```text
|
|
225
|
+
$qgraphflow:q-flow CI says docs/qgraphflow/order-sequence is out of date. Refresh it.
|
|
226
|
+
```
|
|
227
|
+
|
|
228
|
+
The skill moves anchors whose symbol it finds once, corrects only the anchors still reported, and regenerates the page and SVGs with your edited positions and text kept. It does not redraw the diagram.
|
|
229
|
+
|
|
230
|
+
## What each of the nine views answers
|
|
231
|
+
|
|
232
|
+
| View · PNG | Main question | Example scope |
|
|
233
|
+
| --- | --- | --- |
|
|
234
|
+
| Architecture | Which responsibilities collaborate? | Channels, checkout, pricing, risk, stock, payment, orders, events and fulfillment |
|
|
235
|
+
| Flowchart | Where does the process branch and converge? | Stock shortage, risk rejection, payment compensation and successful commit |
|
|
236
|
+
| Sequence | In what order do calls and returns occur? | Successful checkout and asynchronous OrderPaid |
|
|
237
|
+
| ER | How does core data relate? | Cart, orders, items, payments, reservations and parcels |
|
|
238
|
+
| Deployment | Where do runtime units run and connect? | Edge, Kubernetes, data services, payments and logistics networks |
|
|
239
|
+
| Class | How do domain objects and contracts depend on each other? | Checkout service, Order and four ports |
|
|
240
|
+
| State | Which events and guards advance an order? | Payment, fulfillment, cancellation, refund and closure |
|
|
241
|
+
| Use case | What can each actor do? | Buyer, merchant, warehouse and support |
|
|
242
|
+
| Data flow | How is data transformed and stored? | Cart, transaction decisions, events, warehouse and delivery receipts |
|
|
243
|
+
|
|
244
|
+
This is a concept model demonstrating QGraphFlow, not a particular e-commerce repository. The example `graph.json` invents no source paths and marks relationship evidence as `inference`. Real project diagrams need traceable source, DDL, configuration, tests and accepted requirements.
|
|
245
|
+
|
|
246
|
+
## Develop and contribute
|
|
247
|
+
|
|
248
|
+
```bash
|
|
249
|
+
npm ci --prefix skills/q-flow/assets/viewer
|
|
250
|
+
npm run build --prefix skills/q-flow/assets/viewer
|
|
251
|
+
node --test tests/*.test.mjs skills/q-flow/scripts/*.test.mjs
|
|
252
|
+
```
|
|
253
|
+
|
|
254
|
+
Development needs Node.js 22 or later, npm, tar, zip and unzip. Include a minimal redacted graph, client/browser versions and reproduction steps in issue reports.
|
|
255
|
+
|
|
256
|
+
[Evidence sources](skills/q-flow/references/evidence-sources.md) · [Graph format](skills/q-flow/references/graph-schema.md) · [Guided intake](skills/q-flow/references/guided-intake.md) · [Viewer development](skills/q-flow/references/viewer-development.md) · [Diagram composition](skills/q-flow/references/visual-contract.md)
|
|
257
|
+
|
|
258
|
+
## License and attribution
|
|
259
|
+
|
|
260
|
+
[MIT](LICENSE) · [Third-party notices](THIRD_PARTY_NOTICES.md)
|
|
261
|
+
|
|
262
|
+
QGraphFlow is an independent MIT-licensed project. The scenarios in this document are conceptual and do not represent any company's production architecture; no affiliation, sponsorship or endorsement is implied.
|
|
@@ -0,0 +1,190 @@
|
|
|
1
|
+
# Third-Party Notices
|
|
2
|
+
|
|
3
|
+
QGraphFlow includes or derives from the components listed below. Versions are
|
|
4
|
+
those locked for the QGraphFlow viewer. Copyright notices and license terms are
|
|
5
|
+
reproduced below.
|
|
6
|
+
|
|
7
|
+
## EPL-2.0 layout component
|
|
8
|
+
|
|
9
|
+
The generation worker bundles `elkjs` 0.11.0 (Eclipse Layout Kernel),
|
|
10
|
+
licensed under the Eclipse Public License 2.0. The complete license is
|
|
11
|
+
included at `skills/q-flow/assets/layout-dist/ELK-LICENSE.md`.
|
|
12
|
+
The Viewer HTML does not include this generation-only worker.
|
|
13
|
+
|
|
14
|
+
Corresponding source: https://github.com/kieler/elkjs/tree/0.11.0
|
|
15
|
+
and https://github.com/eclipse-elk/elk. QGraphFlow does not modify ELK;
|
|
16
|
+
`skills/q-flow/assets/viewer/build-layout.mjs` bundles the pinned distribution.
|
|
17
|
+
|
|
18
|
+
## MIT-licensed components
|
|
19
|
+
|
|
20
|
+
- `@xyflow/react` 12.11.5 and `@xyflow/system` 0.0.81
|
|
21
|
+
- `classcat` 5.0.5
|
|
22
|
+
- `react` 19.2.8, `react-dom` 19.2.8, `scheduler` 0.27.0, and
|
|
23
|
+
`use-sync-external-store` 1.6.0
|
|
24
|
+
- `zustand` 4.5.7
|
|
25
|
+
- Selected color scales derived from Radix Colors (Slate, Iris, Cyan, Red,
|
|
26
|
+
Amber, Blue, Orange, Teal, Crimson, Violet, Grass, Plum and Indigo, light
|
|
27
|
+
and dark)
|
|
28
|
+
|
|
29
|
+
MIT License
|
|
30
|
+
|
|
31
|
+
Copyright (c) 2019-2025 webkid GmbH
|
|
32
|
+
|
|
33
|
+
Copyright © Jorge Bucaran <<https://jorgebucaran.com>>
|
|
34
|
+
|
|
35
|
+
Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
36
|
+
|
|
37
|
+
Copyright (c) 2019 Paul Henschel
|
|
38
|
+
|
|
39
|
+
Copyright (c) 2021-2022 Modulz
|
|
40
|
+
|
|
41
|
+
Copyright (c) 2022-Present WorkOS
|
|
42
|
+
|
|
43
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
44
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
45
|
+
in the Software without restriction, including without limitation the rights
|
|
46
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
47
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
48
|
+
furnished to do so, subject to the following conditions:
|
|
49
|
+
|
|
50
|
+
The above copyright notice and this permission notice shall be included in all
|
|
51
|
+
copies or substantial portions of the Software.
|
|
52
|
+
|
|
53
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
54
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
55
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
56
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
57
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
58
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
59
|
+
SOFTWARE.
|
|
60
|
+
|
|
61
|
+
Upstream sources:
|
|
62
|
+
|
|
63
|
+
- https://github.com/xyflow/xyflow
|
|
64
|
+
- https://github.com/jorgebucaran/classcat
|
|
65
|
+
- https://github.com/facebook/react
|
|
66
|
+
- https://github.com/pmndrs/zustand
|
|
67
|
+
- https://github.com/radix-ui/colors
|
|
68
|
+
|
|
69
|
+
## ISC-licensed components
|
|
70
|
+
|
|
71
|
+
### `d3-color` 3.1.0
|
|
72
|
+
|
|
73
|
+
Copyright 2010-2022 Mike Bostock
|
|
74
|
+
|
|
75
|
+
Permission to use, copy, modify, and/or distribute this software for any purpose
|
|
76
|
+
with or without fee is hereby granted, provided that the above copyright notice
|
|
77
|
+
and this permission notice appear in all copies.
|
|
78
|
+
|
|
79
|
+
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
80
|
+
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
|
|
81
|
+
FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
82
|
+
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS
|
|
83
|
+
OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
|
|
84
|
+
TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
|
|
85
|
+
THIS SOFTWARE.
|
|
86
|
+
|
|
87
|
+
### Other D3 modules
|
|
88
|
+
|
|
89
|
+
`d3-dispatch` 3.0.1, `d3-drag` 3.0.0, `d3-force` 3.0.0,
|
|
90
|
+
`d3-interpolate` 3.0.1, `d3-quadtree` 3.0.1, `d3-selection` 3.0.0,
|
|
91
|
+
`d3-timer` 3.0.1, `d3-transition` 3.0.1, and `d3-zoom` 3.0.0.
|
|
92
|
+
|
|
93
|
+
Copyright 2010-2021 Mike Bostock
|
|
94
|
+
|
|
95
|
+
Permission to use, copy, modify, and/or distribute this software for any purpose
|
|
96
|
+
with or without fee is hereby granted, provided that the above copyright notice
|
|
97
|
+
and this permission notice appear in all copies.
|
|
98
|
+
|
|
99
|
+
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
100
|
+
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
|
|
101
|
+
FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
102
|
+
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS
|
|
103
|
+
OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
|
|
104
|
+
TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
|
|
105
|
+
THIS SOFTWARE.
|
|
106
|
+
|
|
107
|
+
### Lucide icon geometry
|
|
108
|
+
|
|
109
|
+
The interface icon geometry in `icons.jsx` (panels, views, search, play / pause, more, download, lock, reset, sun / moon, close, check, chevron, legend, source, arrow, fit and fullscreen glyphs) is from Lucide.
|
|
110
|
+
|
|
111
|
+
ISC License
|
|
112
|
+
|
|
113
|
+
Copyright (c) 2026 Lucide Icons and Contributors
|
|
114
|
+
|
|
115
|
+
Permission to use, copy, modify, and/or distribute this software for any
|
|
116
|
+
purpose with or without fee is hereby granted, provided that the above
|
|
117
|
+
copyright notice and this permission notice appear in all copies.
|
|
118
|
+
|
|
119
|
+
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
|
|
120
|
+
WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
|
|
121
|
+
MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
|
|
122
|
+
ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
|
|
123
|
+
WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
|
|
124
|
+
ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
|
|
125
|
+
OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
|
|
126
|
+
|
|
127
|
+
Lucide's upstream license also includes the following MIT notice for icon
|
|
128
|
+
geometry derived from the Feather project:
|
|
129
|
+
|
|
130
|
+
The MIT License (MIT)
|
|
131
|
+
|
|
132
|
+
Copyright (c) 2013-present Cole Bemis
|
|
133
|
+
|
|
134
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
135
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
136
|
+
in the Software without restriction, including without limitation the rights
|
|
137
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
138
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
139
|
+
furnished to do so, subject to the following conditions:
|
|
140
|
+
|
|
141
|
+
The above copyright notice and this permission notice shall be included in all
|
|
142
|
+
copies or substantial portions of the Software.
|
|
143
|
+
|
|
144
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
145
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
146
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
147
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
148
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
149
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
150
|
+
SOFTWARE.
|
|
151
|
+
|
|
152
|
+
Upstream sources:
|
|
153
|
+
|
|
154
|
+
- https://github.com/d3
|
|
155
|
+
- https://github.com/lucide-icons/lucide
|
|
156
|
+
|
|
157
|
+
## BSD-3-Clause component
|
|
158
|
+
|
|
159
|
+
- `d3-ease` 3.0.1
|
|
160
|
+
|
|
161
|
+
Copyright 2010-2021 Mike Bostock
|
|
162
|
+
Copyright 2001 Robert Penner
|
|
163
|
+
All rights reserved.
|
|
164
|
+
|
|
165
|
+
Redistribution and use in source and binary forms, with or without modification,
|
|
166
|
+
are permitted provided that the following conditions are met:
|
|
167
|
+
|
|
168
|
+
* Redistributions of source code must retain the above copyright notice, this
|
|
169
|
+
list of conditions and the following disclaimer.
|
|
170
|
+
|
|
171
|
+
* Redistributions in binary form must reproduce the above copyright notice,
|
|
172
|
+
this list of conditions and the following disclaimer in the documentation
|
|
173
|
+
and/or other materials provided with the distribution.
|
|
174
|
+
|
|
175
|
+
* Neither the name of the author nor the names of contributors may be used to
|
|
176
|
+
endorse or promote products derived from this software without specific prior
|
|
177
|
+
written permission.
|
|
178
|
+
|
|
179
|
+
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
|
|
180
|
+
ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
|
|
181
|
+
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
|
|
182
|
+
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
|
|
183
|
+
ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
|
|
184
|
+
(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
|
|
185
|
+
LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
|
|
186
|
+
ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
|
|
187
|
+
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
|
|
188
|
+
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
|
189
|
+
|
|
190
|
+
Upstream source: https://github.com/d3/d3-ease
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
#!/usr/bin/env node
|
|
2
|
+
// `qgraphflow validate|generate …` runs the skill's own script with the same arguments, output and exit code. It runs
|
|
3
|
+
// as a child process because each script reads process.argv and exits on its own when imported as the entry point.
|
|
4
|
+
import { spawnSync } from 'node:child_process';
|
|
5
|
+
import path from 'node:path';
|
|
6
|
+
|
|
7
|
+
const scripts = { validate: 'validate-graph.mjs', generate: 'generate-viewer.mjs' };
|
|
8
|
+
const USAGE = `Usage: qgraphflow <command> [arguments]
|
|
9
|
+
validate <graph.json> [options] check a graph (validate-graph.mjs; add --help for its options)
|
|
10
|
+
generate <graph.json> <output-dir> [opts] write index.html, graph.json and one SVG per view (generate-viewer.mjs)
|
|
11
|
+
-h, --help this text`;
|
|
12
|
+
|
|
13
|
+
const [command, ...args] = process.argv.slice(2);
|
|
14
|
+
if (!command || command === '--help' || command === '-h') { console.log(USAGE); process.exit(0); }
|
|
15
|
+
if (!Object.hasOwn(scripts, command)) { console.error(USAGE); process.exit(2); }
|
|
16
|
+
const result = spawnSync(process.execPath, [path.join(import.meta.dirname, '../skills/q-flow/scripts', scripts[command]), ...args], { stdio: 'inherit' });
|
|
17
|
+
process.exit(result.status ?? 1);
|