# AI use cases for Qgraphflow (supermax92/qgraphflow)

Repo: [supermax92/qgraphflow](https://github.com/supermax92/qgraphflow) | Use cases: 3 | Page: https://dedupedai.com/use-cases/supermax92-qgraphflow/

QGraphFlow is a JavaScript skill that turns source code, schemas, configuration and requirements into interactive software diagrams with source evidence, offline HTML, and SVG or PNG export.

This file holds every use case of this repo. Each one starts with a "## " heading and ends with its URL.

- Map an unfamiliar codebase in one offline diagram: https://dedupedai.com/use-cases/supermax92-qgraphflow/map-unfamiliar-codebase/
- Trace a business flow as a sequence diagram with source lines: https://dedupedai.com/use-cases/supermax92-qgraphflow/trace-business-flow-sequence/
- Fail CI when a committed diagram drifts from the code: https://dedupedai.com/use-cases/supermax92-qgraphflow/keep-diagrams-synced-in-ci/

## How to map an unfamiliar codebase in one offline diagram with Qgraphflow

Repo: [supermax92/qgraphflow](https://github.com/supermax92/qgraphflow) | Difficulty: Intermediate | Time: 30 minutes | Basis: From the README

Get a shareable architecture diagram of a new project to learn its modules and dependencies fast.

**Who it is for:** A developer who has just joined or taken over a project and needs its overall structure quickly.

**The problem:** Reading a large codebase file by file takes days and hides how the main modules depend on each other.

**The outcome:** An interactive architecture view in index.html that you can search, zoom, and open offline, with node and edge source references to check.

### Steps

1. Run `npx skills add supermax92/qgraphflow` to install the q-flow skill.
2. Open your application project in your client and start a new session.
3. In Claude Code, enter `/q-flow Help me draw this project. I want to understand it as quickly as possible.`
4. Open the generated index.html in your browser and use search, zoom and pan to explore responsibilities and upstream or downstream relationships.
5. Inspect a few nodes and edges to confirm their source files, lines and symbols before relying on the diagram.

### Prompt to paste into your agent

```text
Use the QGraphFlow q-flow skill on the project at <project-path>. Generate an architecture diagram showing the main modules, their dependencies and system boundaries, and write it under docs/qgraphflow/. Verify that the output folder contains index.html and graph.json, and report any relationships the diagram marks as uncertain.
```

### Caveat

The skill runs inside a plugin-capable client with model access, so you need one configured before any diagram can be generated.

Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/

URL: https://dedupedai.com/use-cases/supermax92-qgraphflow/map-unfamiliar-codebase/

## How to trace a business flow as a sequence diagram with source lines with Qgraphflow

Repo: [supermax92/qgraphflow](https://github.com/supermax92/qgraphflow) | Difficulty: Intermediate | Time: 45 minutes | Basis: From the README

Turn an order or checkout flow into a sequence diagram that cites the file and line behind each call.

**Who it is for:** A backend engineer who must explain or change a multi-service flow such as order creation, and needs to see the real call order.

**The problem:** Call order, retries and failure branches are spread across files, so they are easy to misremember or miss in a review.

**The outcome:** A sequence diagram saved to a folder, with each component and call tied to source files and line numbers, plus an SVG you can embed in a pull request or wiki.

### Steps

1. Run `npx skills add supermax92/qgraphflow` if the skill is not installed yet.
2. Open the project in your client and start a new session.
3. Enter a request that names the flow, the steps to cover, the output language and the output folder, for example `/q-flow Analyze the order creation flow in the current project and generate a sequence diagram. Mark the source files and line numbers for components and calls.` (inferred, check the README)
4. Open docs/qgraphflow/index.html to explore the diagram, then check a few calls against their recorded source lines.
5. Embed the generated diagram.svg in a README, pull request or wiki page.

### Prompt to paste into your agent

```text
Use the q-flow skill from the QGraphFlow repo on <project-path> to generate a sequence diagram of the <flow-name> flow, covering its synchronous calls, asynchronous messages, retries and failure compensation as they appear in the source. Save the result under docs/qgraphflow/<flow-slug>/ and verify that each call has a source file and line reference.
```

### Caveat

The diagram only retains facts supported by evidence, so flows that exist only in documentation or in runtime behavior will not be fully represented.

Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/

URL: https://dedupedai.com/use-cases/supermax92-qgraphflow/trace-business-flow-sequence/

## How to fail CI when a committed diagram drifts from the code with Qgraphflow

Repo: [supermax92/qgraphflow](https://github.com/supermax92/qgraphflow) | Difficulty: Advanced | Time: 45 minutes | Basis: From the README

Validate committed diagrams against the repo in CI so stale architecture views get flagged.

**Who it is for:** A team lead or DevOps engineer who keeps diagrams in the repo and wants them checked on every push and pull request.

**The problem:** Diagrams in docs go stale silently after refactors, so they describe code that no longer exists.

**The outcome:** A CI job that fails when a recorded file is gone, a line range no longer fits, or a recorded symbol has moved, and names the lines where the symbol now sits.

### Steps

1. Commit your generated diagrams under docs/qgraphflow/ so each has a graph.json.
2. Add a workflow file that runs on push and pull_request, using actions/checkout, actions/setup-node with node-version 22, and the validation loop from the README.
3. Run `npx -y qgraphflow validate "$graph" --input-only --repo-root .` for each graph.json, as the README's CI example does.
4. When the job fails, open a session and enter `/q-flow CI says docs/qgraphflow/<diagram-folder> is out of date. Refresh it.` (inferred, check the README)
5. Commit the refreshed diagram and confirm the job passes.

### Prompt to paste into your agent

```text
In the repo <repo-path>, add a GitHub Actions workflow that validates every docs/qgraphflow/*/graph.json with `npx -y qgraphflow validate` using --input-only and --repo-root, as shown in the QGraphFlow README. Run the validation locally and report any diagram whose recorded files, lines or symbols no longer match the source.
```

### Caveat

Validation checks recorded files, line ranges and symbols against the repo, so it does not detect relationships that were never recorded in the diagram.

Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/

URL: https://dedupedai.com/use-cases/supermax92-qgraphflow/keep-diagrams-synced-in-ci/