QGraphFlow skill
A skill that turns code into interactive diagrams: eleven types, source-line evidence and a single offline HTML file.
- 110 ★ on the repository
- Last commit
- MIT
Minimal access
Why this level
- The skill reads project code and writes an HTML diagram file with no network requests.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/qgraphflowDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skill reads project code and writes an HTML diagram file with no network requests.
This is third-party code. Review the repository files before installing.
What it does
QGraphFlow turns source code, schemas, configuration and requirements into interactive software diagrams. Eleven types: platform capability, layer and component architecture, flowchart, sequence, ER, deployment, class, state, use case and data flow. Each relationship carries an evidence kind and the code line it rests on. Layout is automatic, and in the page you can move elements, search, zoom and edit labels. The result is a single HTML file with no network requests that can be sent to a colleague. The repository includes a `qgraphflow` command for keeping diagrams in sync.
Who it is for. Developers and architects who need to understand someone else's codebase quickly or show a system's structure without drawing by hand.
Good fit when
- A new project arrives with no docs and a component relationship map is needed.
- A complex checkout scenario should be shown as a sequence diagram.
- A database schema becomes an ER diagram with sources.
- A diagram goes to a client as a single file that opens without internet.
Not a fit when
- You need decorative presentation graphics rather than a technical diagram.
- The diagram must be edited in Figma or another editor.
- The code is too large to analyze in one request: the diagram must be built in parts.
Example request
Build a component diagram and a sequence diagram for order checkout from this repository.Limitations
The agent draws from the code and documents it has read; relations without clear grounds are marked uncertain, but completeness depends on how much was read. Installing with `npx skills add` asks which clients to install to; the plugin route needs a separate npm download with `--ignore-scripts` and manual wiring. The plugin scripts make no network requests. Edits made in the page must be saved separately or they are lost. Some diagrams are complex and take several iterations.
How to disable. Remove the skill from the client's skills directory or with the plugin manager; saved HTML diagram files remain.
FAQ
Which diagram types exist?
Eleven: architectures (capability, layer, component), flowchart, sequence, ER, deployment, class, state, use case and data flow.
How do I check where a relation comes from?
Each code-backed relation has an evidence kind and a link to a source line. Unclear spots are marked uncertain.
Is internet needed to view it?
No. The output is one offline HTML file, and the plugin scripts and viewer make no network requests.
How do I install as a Codex plugin?
Download the package with `npm install qgraphflow --ignore-scripts`, then `codex plugin marketplace add .` and `codex plugin add qgraphflow@supermax92`.
Is there Russian documentation?
The repository has a Russian README at `docs/readme/README.ru.md`.
Discussion
No questions or reviews yet.
Related
Skillsstack-diagram is an architecture-diagram skill that embeds logos and fonts in HTML, so the finished file opens offline.
Builds interactive architecture diagrams in one HTML file: animated data flows, environment toggles and a step detail panel
A skill that replaces terminal ASCII with self-contained HTML pages: diagrams, diff reviews, plan reviews, tables and slide decks
The /graphify skill builds a knowledge graph of a project's code, docs and PDFs so the agent queries the graph instead of grepping
A skill that renders a system architecture as one HTML page with pan, zoom, node focus and a light or dark theme.
Skill that draws architecture, flowchart and sequence diagrams as hand-placed SVG in one house style
README in short
Shows diagram examples, explains verifiable relations, offline viewing and installation in Claude Code, Codex, Cursor and Qoder.