PixelOkay
◉ Your code stays local
Tools
✦ DEVELOPER DIAGRAM STUDIO FLAGSHIP

Flowchart from Code

Turn JavaScript and TypeScript functions into explorable flowcharts, call relationships and module maps. Source-linked diagrams, no paid API, no code uploads.

↗ AST-derived paths◈ Interactive diagrams↓ SVG · PNG · Mermaid

YOUR VISUAL ANALYSIS WORKSPACE

Flowchart from Code

Import code · Analyze structure · Explore & export

03 / INTERACTIVE DIAGRAM

Ready to map your code

Choose an example or paste code, then analyze.

◇
Your visual map starts here

See real branches and loops, inspect each step, and move nodes to tailor the diagram.

↔ Drag canvas to pan · Scroll to zoom · Drag nodes to adjust · Tab + Enter to select · Arrow keys move nodesNo diagram yet

04 / SOURCE INSPECTOR

Follow a diagram node to its code

SELECTED STEP

Select a diagram node

Source file and line number will appear here.

A static code map helps explain structure; it is not a runtime trace.

// Relevant source code will appear here.

05 / YOUR DIAGRAM, YOUR FILES

Export or revisit your analysis

Export vector artwork, share Mermaid text, or save a portable workspace that includes your source code.

06 / OPTIONAL ON-DEVICE AI

Explain the selected code flow with AI

Generate a grounded explanation of the current static diagram using a free local model. The diagram and exports work without AI.

Static flowcharts are available without AI.

After analyzing, load a local model if you want an AI explanation. No model download starts automatically.
AI text may be inaccurate; inspect source-linked nodes to verify.

MEANINGFUL STATIC ANALYSIS

Visualize what the source actually tells us.

⌁

Control-flow branches

Follow if/else, loops, returns, throws and switch cases. Inspect each node’s original source line without running uploaded code.

◈

Function & module maps

Inspect conservative same-file call links and static imports among selected files. Unresolved and dynamic relationships are clearly acknowledged.

◇

Editable diagrams

Drag steps, zoom and pan, then export crisp SVG or PNG. Mermaid and structured JSON make it easy to continue work elsewhere.

Frequently asked questions

Does this use a large language model?

Static diagrams use only the local TypeScript parser. An optional WebLLM code-capable local model can explain a generated graph after you explicitly download/load it. AI explanations can be inaccurate and never replace the source-linked static analysis.

Which programming languages are supported?

JavaScript, TypeScript, JSX and TSX are parsed with the open-source TypeScript compiler’s syntax parser. Other languages, including Python, are not supported in this version rather than being inaccurately parsed as JavaScript.

Can it know exactly what my application does?

No. It provides approximate static diagrams. Dynamic dispatch, runtime values, callback timing, asynchronous scheduling, exceptions from arbitrary operations and type-resolution across files cannot be reconstructed exactly from syntax alone. Try/catch is labelled approximate.

Is my source code sent to a server?

No. Uploaded/pasted source is parsed within your browser; optional AI explanations are inferred locally. The model runtime and weights may download from external CDN/model hosts, but PixelOkay does not submit source code to an inference API. Downloads are generated locally.

How do I export editable diagrams?

Use Mermaid export for text-based editing in Mermaid-compatible tools, SVG for scalable vector artwork, or JSON to access graph nodes and edges. The workspace format also contains source code, so handle it like any source repository file.

How large can an analysis be?

Up to 18 source files, 420 KB each, and 1.5 MB total. Diagrams are limited to 180 nodes to keep mobile interaction responsive. The tool will stop with an explicit message rather than silently truncate an oversized flowchart.

LOCAL AI SETUP

Set up AI on this device

First, a model needs to be loaded on your device

AI Flowchart runs its optional explanations in your browser. Setup may download hundreds of megabytes of free model files. Subsequent sessions may reuse compatible model caches, but model memory must be loaded again. Static diagrams need no AI model.

  1. 1. Check device
  2. 2. Download / cache
  3. 3. Set up assistant
  4. 4. Explain flow

Device & model resources

Measurements may be approximate
Device RAM / model memoryChecking device information…

Live RAM/GPU memory measurements are generally unavailable.

Browser website storageChecking storage…

Site-wide estimate, shared with other PixelOkay tools. This is not device RAM.

Exact-model cache has not been verified.

ONE ACTION · ALL RECOGNIZED AI MODEL DOWNLOADS

Free AI model storage across PixelOkay

Scan this website origin for WebLLM and Transformers.js model caches, plus recognizable model files in other cache buckets. This includes caches from other PixelOkay tools, not only this tool. No site data or browser databases are cleared automatically.

Run a scan to see how many model caches can be cleared together.

Unknown IndexedDB/OPFS, browser-managed caches and general application data are not deleted. Close other AI tabs first.

Having trouble downloading or loading AI?

Refresh the storage estimate and exact-model cache status first. Retry setup or choose a compatible model. If a cache is corrupted, inspect recognized model caches before any deletion.

Never clear all website data without first exporting your projects. Model-cache removal can require other PixelOkay tools to download weights again.

Checking browser capabilities…
Currently loadedNone· Local model memory is not measured by the browser

No code uploads for inference. WebLLM runtime code can load from esm.sh / esm.run, and model assets from MLC / Hugging Face hosts. Static code analysis is entirely local. Explanations are generated in a dedicated browser worker.

Delete recognized AI model caches?

Using Flowchart from Code

Paste or import supported code files, analyze and choose a flow, call or module view. Inspect source-linked nodes, adjust the diagram layout and export. Save the current source workspace separately from a diagram snapshot.

The diagram uses static parsing and never executes input code. Optional on-device WebLLM generates diagram explanations only after explicit model setup. Syntax does not establish runtime behavior. Dynamic dispatch, ambiguous calls and implicit exceptions can be omitted or approximate. Relative imports require available directory paths; no full bundler/type checking is supplied. File/function/graph budgets apply, and saved workspaces contain source code. Reanalyze after edits.

References: TypeScript parser

Inspect static code structure without executing the source

Paste or import supported JavaScript or TypeScript files, choose a flow, call or module view, and inspect source-linked nodes. Adjust the diagram layout and export SVG, PNG, Mermaid or a current-source workspace.

Example workflow

  1. Load a small source file or directory set with available relative-import paths.
  2. Analyze the syntax-derived diagram and compare branches, calls or imports with the source lines; edit the layout where needed.
  3. Export a diagram for sharing or a JSON/workspace file when you need the source and current analysis together.

Authored example: Analyze a small function with an if/else branch and one helper call. Check each branch against the actual source and label the output as a static map, not a prediction of every runtime path.

Limits and model handling: The local TypeScript parser creates approximate syntax-based views and never executes input code. Dynamic dispatch, ambiguous calls, implicit exceptions and bundler resolution can be omitted or approximate; this is not full type checking. Optional on-device WebLLM creates diagram explanations only after model setup. Saved workspaces can contain private source code; file, function and graph budgets apply.

Flowchart from Code questions

Does the diagram prove how the program behaves at runtime?

No. It reflects static syntax and may omit dynamic calls, exceptions and bundler behavior. Verify important paths in the source and with your own runtime tools.

Does analyzing code execute or upload it?

The diagram analyzer uses static parsing and does not execute the source. Optional WebLLM explanation loads model assets separately; review the current privacy and browser requirements before using it.

Related tools