PHP: visualize your app workflow and function to function relation

Question

i'm searching for a software that would help me visualize my application workflow, and function to function relation.

i'm using codeigniter, and my app is growing bigger and bigger ever day, and as i'm working alone. i'm starting to get schizophrenic !

today i'm a building db models, tomorrow may be view js, and html, day after controllers, etc..

so will all this going around i started to forget how i did this or that.. and i have to go back and forth reading my old code.. along with too many replicated functions that i find every day and have to fix.

Need to :

1. Chart application workflow
2. Help me visualize my class's methods, and there relations with other class's

I'm currently keeping my docs and charts in an .docx file, which is painful, and doesnt help alot !.

i'm not a prof. developer, its my hobby since childhood. so i have never saw how application design and architecture should be build. instead i just dive in and brain storm !, so i need to grow up ! would appreciate if you can point me on right direction of how i can stop brain storming and move into more prof. way .

Answer 1

Consider using a Sankey Diagram to help visualize workflow.

I've seen hierarchy charts used to depict workflow (as you have illustrated in your question), but always thought they were missing something--nodes that can have two parents, for example. A Sankey diagram solves that problem, and provides a trivial way to introduce the concept of how much volume moves between "nodes". Also, by definition, a flowchart is "a type of diagram that represents a workflow or process". The Sankey diagram looks like it's flowing much more than a hierarchy chart.

For more information, check out David Pallmann's convincing case for using Sankey diagrams to visualize workflow.

I was able to create this workflow visualization in 10 minutes by forking the Highcharts's Sankey demo and customizing the series data to the following:

    data: [
        ['Event Submission', 'Event Submission Close', 250],
        ['Event Submission', 'Create Incident', 750],
        ['Event Submission Close', 'Approve', 240],
        ['Event Submission Close', 'Reject', 10],
        ['Approve', 'After Action Review', 640],
        ['Create Incident', 'Contained', 400],
        ['Create Incident', 'Provide Analysis', 150],
        ['Create Incident', 'Incident Close', 125],
        ['Contained', 'Containment Approval', 370],
        ['Contained', 'Containment Rejection', 30],
        ['Incident Close', 'Approve', 110],
        ['Incident Close', 'Reject', 15],
        ['Containment Approval', 'Eradicated', 320],
        ['Containment Approval', 'Provide Analysis', 50],
        ['Eradicated', 'Eradication Approval', 315],
        ['Eradicated', 'Eradication Rejection', 5],
        ['Eradication Approval', 'Recovered', 315],
        ['Eradication Approval', 'Provide Analysis', 5],
        ['Recovered', 'Approve', 310],
        ['Recovered', 'Reject', 5]
    ]

So, in your case, if you can find something that will automagically map how your elements are associated with each other, you need only format those mappings into the above syntax and Highcharts will be able to do the rest!