Flowify

Goal

Flowify visualizes existing code.

The goal is to do this in a way that it will give a clear overview and insight into a (unfamiliar) codebase.

Current state

The latest version of Flowify is hosted here:

https://flowify.io/

Here is a recent screenshot:

Features to implement

File handling, multiple files, namespaces, context

Feature	Progress
Upload source file or download source from url
Include other files, detect/use autoloader (build context)
Support multiple languages
Diverse and meaningful examples

Parsing of language elements

Feature	Progress
Control statements
Expressions
Declarations
Assignments
Variables, Scalars
Functions
Classes, properties, methods, inheritance, traits
Interfaces, namespaces

Saving / loading manually entered data

Feature	Progress
Using AST-identifier to store/load node-specific data
Recovering based on diff from previous source
Editor for determining collapsing/expanding groups, flex ratios

Control and dataflow analysis

Feature	Progress
Symmetric control elements (if, while, do, for, foreach)
Asymmetric control elements (return, throw, break, continue)
Variable/function scope
Variable assignment
Variable/function-output usage
Dataflow join and splits

Types of visual elements and connections

Feature	Progress
Lanes: straight (with segments)
Lanes: splits (+decider bool), joins, loops, assymetric
Containers (expressions and functions)
Function arguments/parameters + to-return/returned
Variable identifiers on arrows
Icons for identification (shape = type, color = id)
Meaningful symbols for data-structures
Usage dataflow
Re-assignment dataflow
Dataflow join and splits

Layout functions

Feature	Progress
If: splits and join
For: (init), join, split, loop, (update), end
Straight lane: segments, sub-lanes based on data-flow analysis
Recursive expressions/function calls (horizontal, vertical)
Overall function (overview), lagers of code/architecture
Routing/separated contol flow (jump to different lane and back)

Zooming/expanding

Feature	Progress
Collapsing (function) elements together (as group)
Scaling/straight zooming
Sizing (with flex ratio)
Text-overlay on multi-statements (manually written)
Layers of zoom (levels of detail)
Hover-over of identifiers

Corresponding textual representation

Feature	Progress
Expandable functions (corresponding with flow)
Text follows flow (partial function)
Flow follows text (full file-text)
Text scroller, cursor, editor
Syntax highlighting
Good use/division of screen space (and resolution)

Debugging / utils

Feature	Progress
Memory management
Render pipeline
Introspection into visual elements (flow and text)

Future

Feature	Progress
Visual debugger
Record and (re)play/simulation