Code Flow VisualizerSAFE

🔬 A curated collection of 23,000+ agent skills for empirical research across 8 social science disciplines. | 精选 23,000+ AI Agent 技能库,覆盖8大社会科学学科的实证研究。CoPaper.AI 20分钟完成一篇可复现的规范实证论文,并支持用户上传 Skills。-- Maintained by CoPaper.AI from Stanford REAP.

The instruction file, verbatim from the audited commit — this is the text the model reads, and the surface the audit's instruction layer examines. Quoted here so you can judge it without cloning anything.

---
name: code-flow-visualizer
description: "Convert Python, JavaScript, and TypeScript functions into Mermaid flowcharts"
metadata:
  openclaw:
    emoji: "🔄"
    category: "tools"
    subcategory: "diagram"
    keywords: ["code visualization", "flowchart", "Mermaid", "Python", "control flow", "AST"]
    source: "https://github.com/mermaid-js/mermaid"
---

# Code Flow Visualizer

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.

## Overview

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.

## Conversion Rules

### Control Flow Mapping

| 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 |

### Python Example

**Input code:**

```python
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 results
```

**Output flowchart:**

```mermaid
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 --> Loop
```

### JavaScript / TypeScript Example

**Input code:**

```typescript
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:**

```mermaid
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"])
```

## Handling Complex Patterns

### Nested Conditionals

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 Functions

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.

### Generator Functions (yield)

Python generators use `yield` as intermediate output nodes (shown as parallelogram shapes). The flowchart shows the suspension point and resumption path.

### Error Handling Chains

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.

## Styling f

SAFEgrade B · trust 89/100 Nothing in the source contradicts what it says it does. Grade A is reserved for packages that have also passed the behavioural sandbox.

What the source does

Filesystem

none-observed

Network

none-observed

Shell

none-observed

Dependencies

pinned

Secrets in source

none-found

Findings (0)

No findings outside the package's declared scope.

Gates applied: no_behavioural_pass.