code_flow_graph
This skill generates interactive HTML node-graph diagrams to visualize codebase structure, class relationships, and function call chains. It should be used when the user asks to visualize, diagram, or map out code architecture, module dependencies, class hierarchies, or UI event flows. It also supports UI layout visualization — generating interactive nested widget hierarchy diagrams for Qt, React, or other UI frameworks (triggered by "UI layout", "widget hierarchy", "界面布局", "控件层级" keywords). The output is a standalone HTML+JS viewer with draggable nodes, bezier-curve connections, group boxes, sidebar navigation, global search (Ctrl+K), call-chain detail panel, localStorage position persistence, click-to-copy function name, Ctrl+Z undo layout moves, interactive widget-box tree with resize handles, and Catppuccin Mocha dark theme.
Install via CLI (Recommended)
clawhub install openclaw/skills/skills/biubiubiu533/code-flow-graphWhat This Skill Does
The code_flow_graph skill acts as an intelligent architectural visualizer for your codebase. It parses project files—ranging from small scripts to massive repositories—and generates an interactive, high-fidelity node-graph diagram. By rendering these as standalone HTML files, it provides an immersive experience where you can navigate complex call chains, class hierarchies, and module dependencies without needing proprietary software. It includes advanced features like a Catppuccin Mocha dark theme, global search (Ctrl+K), and layout persistence, ensuring that your exploration of the code structure remains intuitive and efficient. Whether you are dealing with backend service logic or intricate UI widget trees, this tool turns abstract code into a tangible, browsable structure.
Installation
You can add this skill to your OpenClaw environment by running the following command in your terminal:
clawhub install openclaw/skills/skills/biubiubiu533/code-flow-graph
Once installed, the agent will automatically gain the ability to parse file structures and produce visualization files directly in your project workspace.
Use Cases
- Onboarding: Quickly understand a new repository by visualizing the main entry points and high-level class hierarchies.
- Refactoring: Identify bloated modules or deeply nested function chains that may need architectural simplification.
- Debugging: Map out the flow of UI events, such as button triggers in a React or Qt application, to find where state changes are being handled.
- Documentation: Create professional, interactive maps of your system’s architecture for team design reviews.
- Dependency Tracking: See how different packages or modules interact with your core business logic.
Example Prompts
- "Visualize the architecture of this project and show me the primary entry points for the authentication module."
- "I need a diagram of the UI layout for this Qt application, specifically the widget hierarchy starting from the main window."
- "Map out the entire call flow for the data processing pipeline to help me identify potential bottlenecks."
Tips & Limitations
- Start Broad: The tool is designed to provide an immediate overview. If the project is huge, start with a high-level view before zooming into specific modules.
- Scope Control: If you are working on a massive monorepo, explicitly name the directory you want to visualize to avoid overwhelming the graph.
- UI Focus: When requesting UI layouts, explicitly use keywords like 'widget hierarchy' or 'interface layout' to trigger the specialized widget-box generator.
- Dependencies: Ensure your project is in a readable state; the agent performs best when standard entry points are defined.
Metadata
Not sure this is the right skill?
Describe what you want to build — we'll match you to the best skill from 16,000+ options.
Find the right skillPaste this into your clawhub.json to enable this plugin.
{
"plugins": {
"official-biubiubiu533-code-flow-graph": {
"enabled": true,
"auto_update": true
}
}
}Tags(AI)
Flags: file-read, file-write