Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →brycewang-stanford/code-flow-visualizer
Convert Python, JavaScript, and TypeScript functions into Mermaid flowcharts
Passed 21 of 23 test cases with the skill, and 10 of 23 without it.
and 10 more in the full report
11 fixed10 passed either way2 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 11 test cases the skill fixed. Same model, same prompt, with and without the skill.
I have a Python data transformation pipeline function `process_dataset(df)` that calls `clean_columns(df)`, `impute_missing(df)`, and `validate_schema(df)` sequentially. I need a syntax-compliant text flowchart diagram showing this execution chain. Should each nested function call be drawn as a standard square block like `[clean_columns(df)]` or another specific shape?
| Checked | Without skill | With skill |
|---|---|---|
| Uses double-bracket subroutine notation [[clean_columns(df)]] for function call nodes. | Passed | Passed |
| Renders function entry node using stadium syntax ([process_dataset(df)]). | Missed | Passed |
The instructions your model reads when the skill loads.
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:
test cases passed, vs 10 / 23 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.