Code To Chart
rongxinzy/RongxinAI
解析代码仓库的 import/依赖关系,自动生成架构图、流程图和组织架构图,输出 Mermaid 文本或 SVG 图片。支持 Python、JavaScript、TypeScript、Go 和 Java 项目。当用户需要可视化代码结构、分析模块依赖、生成架构文档,或提及“代码架构图”、“依赖关系图”、“流程图”、“组织架构图”、“Mermaid 图”等关键词时触发。
Convert Python, JavaScript, and TypeScript functions into Mermaid flowcharts
$ npx skills add wentorai/research-plugins --skill code-flow-visualizer -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install wentorai/research-plugins code-flow-visualizer --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/wentorai/research-plugins.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/tools/diagram/code-flow-visualizer .claude/skills/code-flow-visualizer && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "code-flow-visualizer" agent skill from https://github.com/wentorai/research-plugins/tree/main/skills/tools/diagram/code-flow-visualizer into .claude/skills/code-flow-visualizer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "code-flow-visualizer", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/wentorai/research-plugins/tree/main/skills/tools/diagram/code-flow-visualizerType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add wentorai/research-plugins --skill code-flow-visualizer -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install wentorai/research-plugins code-flow-visualizer --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/wentorai/research-plugins.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/tools/diagram/code-flow-visualizer .agents/skills/code-flow-visualizer && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "code-flow-visualizer" agent skill from https://github.com/wentorai/research-plugins/tree/main/skills/tools/diagram/code-flow-visualizer into .agents/skills/code-flow-visualizer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "code-flow-visualizer", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add wentorai/research-plugins --skill code-flow-visualizer -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install wentorai/research-plugins code-flow-visualizer --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/wentorai/research-plugins.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/tools/diagram/code-flow-visualizer .cursor/skills/code-flow-visualizer && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "code-flow-visualizer" agent skill from https://github.com/wentorai/research-plugins/tree/main/skills/tools/diagram/code-flow-visualizer into .cursor/skills/code-flow-visualizer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "code-flow-visualizer", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/wentorai/research-plugins.git --path skills/tools/diagram/code-flow-visualizer--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add wentorai/research-plugins --skill code-flow-visualizer -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install wentorai/research-plugins code-flow-visualizer --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/wentorai/research-plugins.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/tools/diagram/code-flow-visualizer .gemini/skills/code-flow-visualizer && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "code-flow-visualizer" agent skill from https://github.com/wentorai/research-plugins/tree/main/skills/tools/diagram/code-flow-visualizer into .gemini/skills/code-flow-visualizer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "code-flow-visualizer", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install wentorai/research-plugins code-flow-visualizerInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add wentorai/research-plugins --skill code-flow-visualizer -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/wentorai/research-plugins.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/tools/diagram/code-flow-visualizer .github/skills/code-flow-visualizer && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "code-flow-visualizer" agent skill from https://github.com/wentorai/research-plugins/tree/main/skills/tools/diagram/code-flow-visualizer into .github/skills/code-flow-visualizer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "code-flow-visualizer", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add wentorai/research-plugins --skill code-flow-visualizer -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install wentorai/research-plugins code-flow-visualizer --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/wentorai/research-plugins.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/tools/diagram/code-flow-visualizer .opencode/skills/code-flow-visualizer && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "code-flow-visualizer" agent skill from https://github.com/wentorai/research-plugins/tree/main/skills/tools/diagram/code-flow-visualizer into .opencode/skills/code-flow-visualizer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "code-flow-visualizer", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
code-flow-visualizerConvert Python, JavaScript, and TypeScript functions into Mermaid flowcharts
Code Flow Visualizer is an agent skill from wentorai/research-plugins. Convert Python, JavaScript, and TypeScript functions into Mermaid flowcharts
Its SKILL.md is about 1.9k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Development, covering Diagrams. It works with JavaScript, Python, TypeScript and Mermaid. The repository describes itself as: 350+ academic research skills, MCP configs, and plugins for Research-Claw and AI agents. The licence is MIT.
4 steps, taken from the first numbered list in SKILL.md.
Read from SKILL.md and the folder at commit bf44b3c. It shows what the files ask for, not the result of running them.
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
No scripts in the folder and no shell commands in SKILL.md (its code samples are mermaid, python, typescript, bash and latex).
From the folder's file list and the shell code blocks in SKILL.md.
Links to these hosts (documentation or services it may open):
github.commermaid.js.orgdocs.python.orgFrom URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Code Flow Visualizer loads about 1.9k tokens when it runs. Until then it costs about 24 tokens; SKILL.md has 470 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
The full file from wentorai/research-plugins at commit bf44b3c, republished under its MIT licence (© wentorai). 470 words, ~1,899 tokens.
.claude/skills/code-flow-visualizer/SKILL.md (or your agent's skills folder).Convert Python, JavaScript, and TypeScript functions into Mermaid flowcharts by analyzing control flow structures. This skill helps researchers document and understand complex algorithmic logic, data processing pipelines, and experimental workflows embedded in code.
Research code often contains intricate control flow: nested conditionals for data filtering, loops over experimental conditions, error handling for API calls, and branching logic for different analysis paths. Understanding this flow is critical for reproducibility, code review, and documentation, yet reading nested code can be cognitively demanding.
This skill translates source code into visual Mermaid flowcharts by parsing control flow structures (if/else, for/while loops, try/catch, match/switch, return statements) and mapping them to flowchart nodes and edges. The resulting diagrams serve as documentation supplements in README files, lab notebooks, and paper appendices.
The approach works by performing a lightweight static analysis of the code's abstract syntax tree (AST). Each control structure maps to a specific flowchart pattern: conditionals become diamond decision nodes, loops become cycles with back-edges, function calls become subroutine nodes, and return statements become terminal nodes.
| Code Structure | Flowchart Element | Mermaid Shape |
|---|---|---|
| Function entry | Start node | ([Function Name]) |
| Assignment / expression | Process node | [statement] |
if / else if | Decision diamond | {condition?} |
for / while loop | Decision + back-edge | {loop condition?} with cycle |
try / catch | Process + error path | [try block] with dashed error edge |
return / yield | Terminal / output node | ([return value]) |
| Function call | Subroutine node | [[function_name()]] |
match / switch | Multi-branch decision | {value?} with labeled edges |
Input code:
def process_papers(papers, min_citations=10):
results = []
for paper in papers:
if paper.year < 2015:
continue
if paper.citation_count < min_citations:
continue
try:
abstract = fetch_abstract(paper.doi)
embeddings = compute_embeddings(abstract)
results.append({"paper": paper, "embedding": embeddings})
except APIError:
log_error(paper.doi)
return resultsOutput flowchart:
flowchart TD
Start(["process_papers(papers, min_citations=10)"]) --> Init["results = [ ]"]
Init --> Loop{"For each paper in papers?"}
Loop -->|Done| Return(["Return results"])
Loop -->|Next paper| YearCheck{"paper.year < 2015?"}
YearCheck -->|Yes| Loop
YearCheck -->|No| CitCheck{"citation_count < min_citations?"}
CitCheck -->|Yes| Loop
CitCheck -->|No| TryBlock["abstract = fetch_abstract(paper.doi)"]
TryBlock --> Embed["embeddings = compute_embeddings(abstract)"]
Embed --> Append["results.append(...)"]
Append --> Loop
TryBlock -.->|APIError| LogErr["log_error(paper.doi)"]
LogErr --> LoopInput code:
async function searchPapers(query: string, maxResults: number = 50): Promise<Paper[]> {
const cached = await cache.get(query);
if (cached) return cached;
const results: Paper[] = [];
let offset = 0;
while (results.length < maxResults) {
const batch = await api.search(query, offset, 10);
if (batch.length === 0) break;
for (const paper of batch) {
if (paper.isRetracted) continue;
results.push(paper);
}
offset += 10;
}
await cache.set(query, results);
return results;
}Output flowchart:
flowchart TD
Start(["searchPapers(query, maxResults=50)"]) --> Cache["cached = await cache.get(query)"]
Cache --> CacheHit{"cached exists?"}
CacheHit -->|Yes| ReturnCached(["Return cached"])
CacheHit -->|No| InitResults["results = [ ], offset = 0"]
InitResults --> WhileLoop{"results.length < maxResults?"}
WhileLoop -->|No| SaveCache["await cache.set(query, results)"]
WhileLoop -->|Yes| Fetch["batch = await api.search(query, offset, 10)"]
Fetch --> EmptyCheck{"batch.length === 0?"}
EmptyCheck -->|Yes| SaveCache
EmptyCheck -->|No| ForLoop{"For each paper in batch?"}
ForLoop -->|Done| IncOffset["offset += 10"]
IncOffset --> WhileLoop
ForLoop -->|Next| Retracted{"paper.isRetracted?"}
Retracted -->|Yes| ForLoop
Retracted -->|No| Push["results.push(paper)"]
Push --> ForLoop
SaveCache --> Return(["Return results"])Deeply nested if/else chains are flattened into a decision tree. Each branch is labeled with its condition, and nodes at the same depth are arranged vertically for readability.
Recursive calls are shown as subroutine nodes with a self-referencing edge back to the function start node. A note annotation indicates the recursion base case.
Python generators use yield as intermediate output nodes (shown as parallelogram shapes). The flowchart shows the suspension point and resumption path.
Multiple except clauses create parallel error paths from the try block, each labeled with the exception type. finally blocks are shown as a converging node that all paths pass through.
%%{init: {
'theme': 'base',
'themeVariables': {
'primaryColor': '#f8f9fa',
'primaryBorderColor': '#212529',
'primaryTextColor': '#212529',
'lineColor': '#495057',
'fontFamily': 'Times New Roman, serif',
'fontSize': '14px'
}
}}%%
flowchart TD
A["Step 1"] --> B{"Decision"} --> C["Step 2"]# Render Mermaid to PDF for LaTeX inclusion
mmdc -i flowchart.mmd -o flowchart.pdf -t neutral -b transparent\begin{figure}[h]
\centering
\includegraphics[width=0.8\textwidth]{flowchart.pdf}
\caption{Control flow of the data processing pipeline.}
\label{fig:flowchart}
\end{figure}Promise.all) are noted but not fully modeled.© wentorai, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Just SKILL.md in skills/tools/diagram/code-flow-visualizer of wentorai/research-plugins.
Open the folder on GitHubat commit bf44b3c
We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in wentorai/research-plugins, which our catalogue first saw on October 7, 2026.
Code Flow Visualizer next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Code Flow Visualizer this skillwentorai/research-plugins | 298 | 1 repos | ~1.9k | Automated safety check: Pass | MIT | |
| Code To Chartrongxinzy/RongxinAI | 154 | — | ~596 | Automated safety check: Pass | MIT | |
| CodeScope Codebase Graph AnalysisQwenLM/qwen-code | 28k | 1 repos | ~9.3k | Automated safety check: Pass | Apache-2.0 | |
| Generating Documentationancoleman/ai-design-components | 526 | — | ~3k | Automated safety check: Pass | MIT | |
| Microsim Generatordmccreary/ibook-skills | 105 | — | ~11k | Automated safety check: Pass | None | |
| Code Review ChecklistshareAI-lab/learn-claude-code | 78k | 5 repos | ~1.1k | Automated safety check: Pass | MIT |
rongxinzy/RongxinAI
解析代码仓库的 import/依赖关系,自动生成架构图、流程图和组织架构图,输出 Mermaid 文本或 SVG 图片。支持 Python、JavaScript、TypeScript、Go 和 Java 项目。当用户需要可视化代码结构、分析模块依赖、生成架构文档,或提及“代码架构图”、“依赖关系图”、“流程图”、“组织架构图”、“Mermaid 图”等关键词时触发。
QwenLM/qwen-code
Answers questions about code structure, history, bugs and PR risk using a CodeScope knowledge graph and semantic index built from the repository.
ancoleman/ai-design-components
Generate comprehensive technical documentation including API docs (OpenAPI/Swagger), code documentation (TypeDoc/Sphinx), documentation sites (Docusaurus/MkDocs), Architecture Decision Records…
dmccreary/ibook-skills
Creates interactive educational MicroSims, routing to the best-matched generator - p5.js, Chart.js, Plotly, Mermaid, vis-network, timelines, maps, Venn, causal-loop/feedback-loop diagrams (CLD)…
shareAI-lab/learn-claude-code
Reviews code against a five-part checklist covering security, correctness, performance, maintainability and testing, and reports findings in a fixed format.
kucherenko/jscpd
Measures a code port between languages or frameworks with jscpd's function-level comparison, porting tests before code and tracking what is left unmatched.
wentorai/research-plugins
Craft structured research abstracts that maximize clarity and journal acceptance
wentorai/research-plugins
Manage academic citations across BibTeX, APA, MLA, and Chicago formats
wentorai/research-plugins
Summarize academic papers with structured extraction of key elements
wentorai/research-plugins
Evidence-based study techniques for academic learning and retention
wentorai/research-plugins
Adjust writing tone and register for academic audiences and venues
wentorai/research-plugins
Academic translation, post-editing, and Chinglish correction guide
Works with
Categories
Convert Python, JavaScript, and TypeScript functions into Mermaid flowcharts. Code Flow Visualizer is an agent skill from wentorai/research-plugins.
Code Flow Visualizer fits situations like: tasks that involve Diagrams.
Run `npx skills add wentorai/research-plugins --skill code-flow-visualizer -a claude-code`. Or copy the skill folder (skills/tools/diagram/code-flow-visualizer in wentorai/research-plugins) into .claude/skills/code-flow-visualizer in your project. Claude Code loads it when a task matches its description.
Run `npx skills add wentorai/research-plugins --skill code-flow-visualizer -a codex`. Or copy the skill folder (skills/tools/diagram/code-flow-visualizer in wentorai/research-plugins) into .agents/skills/code-flow-visualizer in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add wentorai/research-plugins --skill code-flow-visualizer -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/code-flow-visualizer, .gemini/skills/code-flow-visualizer, .github/skills/code-flow-visualizer and .opencode/skills/code-flow-visualizer in your project.
SKILL.md names no scripts, command-line tools or credentials: Code Flow Visualizer is instructions for the agent only. Our summary lists: Python 3.
SKILL.md names 3 domains. As links in the text: github.com, mermaid.js.org and docs.python.org. This is read from the text; nothing was executed.
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
Code Flow Visualizer is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
About 1.9k tokens (SKILL.md is roughly 7.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
Skills that share tags, products or a category with Code Flow Visualizer: Code To Chart (rongxinzy/RongxinAI, 154 stars), CodeScope Codebase Graph Analysis (QwenLM/qwen-code, 28k stars), Generating Documentation (ancoleman/ai-design-components, 526 stars) and Microsim Generator (dmccreary/ibook-skills, 105 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
wentorai (a GitHub user) maintains it in wentorai/research-plugins, which has 298 GitHub stars. The repository holds 428 skills in this directory. The repository was last updated on June 19, 2026.
Source: wentorai/research-plugins on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.