QGraphFlow

Turn complex code into diagrams you can explore.

Follow the path. Inspect the evidence. Share one offline file.

💡 Inspired by Cocoon-AI/architecture-diagram-generator — thanks to the original author for the idea.

English · 中文 · Русский · Português · 日本語 · Deutsch · Español

Client installation · Report an issue · MIT

Nine diagram types: architecture, flowchart, sequence, ER, deployment, class, state, use case and data flow.

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.

• Explore: search, zoom and pan; inspect responsibilities and upstream/downstream relationships.

  

• Verify: inspect nodes and edges for source files, lines, symbols and explicitly marked uncertainty.

  

• Edit: unlock the layout, change text and move elements; reset when needed.

  

• Share: open offline HTML or export the complete diagram as SVG / PNG.

  

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 — fictional business, real code — with English graph and interface text. They are hosted as showcase-v2 Release assets and kept out of Git history and the plugin package, so viewing them needs network access; the generated diagram HTML itself works offline.

Installation guide

You need Node.js 22 and a plugin-capable client with model access configured.

Qoder Desktop users can install from the marketplace and skip step 1.

1. Download the plugin

Download qgraphflow-0.0.5.zip and extract it into a separate directory, keeping hidden files.

Run the following terminal commands from the extracted plugin root containing skills/.

2. Install in your client

Codex App / CLI

Codex CLI must be installed and available in your terminal:

codex plugin marketplace add .
codex plugin add qgraphflow@supermax92

Start a new session, type $, and select qgraphflow:q-flow.

Claude Code

Install directly from GitHub without downloading the ZIP:

claude plugin marketplace add supermax92/qgraphflow
claude plugin install qgraphflow@supermax92 --scope user

Or, from the extracted plugin root:

claude plugin marketplace add .
claude plugin install qgraphflow@supermax92 --scope user

Start a new session and enter /q-flow (or the fully qualified /qgraphflow:q-flow).

Qoder CLI

qodercli plugins install .

Start a new session and select q-flow.

Qoder Desktop

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.

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.

Cursor

Copy everything in the plugin root, including hidden files, into:

~/.cursor/plugins/local/qgraphflow/

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.

3. Start using it

Open your project in the client, start a new session, and select the skill. Describe your task using the Quick start examples below. Open the generated HTML in your browser.

You can also get the plugin through npm instead of the ZIP.

GitHub npm requires your own GitHub Personal access token (classic) with read:packages permission. Log in with your GitHub username and use the token as the password.

Do not share the token or commit it to a repository. See GitHub authentication.

npm config set @supermax92:registry=https://npm.pkg.github.com --location=user
npm login --scope=@supermax92 --auth-type=legacy --registry=https://npm.pkg.github.com

Create a separate directory outside your application project:

mkdir qgraphflow-install
cd qgraphflow-install
npm install @supermax92/qgraphflow@0.0.5 --ignore-scripts
cd node_modules/@supermax92/qgraphflow

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.

Building it yourself? See the source build instructions.

Quick start

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.

Not sure where to begin? Invoke the skill and choose the subject and question when prompted.

$qgraphflow:q-flow

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.

Example 1: Understand the architecture

$qgraphflow:q-flow Analyze this project and create an architecture diagram in English showing module responsibilities, dependencies and system boundaries.

Useful when joining a project and learning its overall structure.

Example 2: Trace a business flow

$qgraphflow:q-flow Analyze order creation and create a sequence diagram in English showing pricing, stock reservation, payment and order persistence, including failure branches.

Replace order creation and its steps with your project's actual flow. Continue in the same conversation:

$qgraphflow:q-flow Expand stock reservation from the previous diagram into a separate flowchart in English, showing success and failure handling.

Results go under docs/qgraphflow/ by default. Open index.html to explore, edit and export; graph.json retains the graph data.

These commands run the repository example. An installed plugin does not require cloning this repository. With Node.js 22:

git clone https://github.com/supermax92/qgraphflow.git
cd qgraphflow
node skills/q-flow/scripts/validate-graph.mjs examples/showcase/ecommerce.en.graph.json
node skills/q-flow/scripts/generate-viewer.mjs examples/showcase/ecommerce.en.graph.json output/ecommerce-en

Open output/ecommerce-en/index.html in a browser. Switch views with Diagram types in the top toolbar; saved text and positions survive switching. Use More → Save Graph JSON to save all views to a chosen JSON file, or download a copy in browsers without file saving. Refreshing the original HTML restores embedded data; regenerate from the saved JSON into a new directory to reopen edits.

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.

What each of the nine views answers