B4J Library [ABMaterial] MashFlowChart

Yes!!!!

Finally, found the right component for my intentions. This is rather an exciting time. In my project management webapp im doing i wanted to add a decision tree i.e. a flowchart as part of a lessons module. This is going to come handy.

Wrapped from https://github.com/adrai/flowchart.js

1. You can add a st-art and e-end, an operation, a condition, a parallel, a subroutine and inputoutput.
2. You can theme each node with a FlowState (fill, fontcolor, fontweight, fontsize, yes-text and no-text)
3. You can set the color of each connecting line.

NB: Recommended Use

1. Add all your nodes that you will need per type
2. Define the FlowStates (if necessary) and apply these
3. Add Connections
3. Add Colors for lines.

In BuildPage..

page.AddExtraJavaScriptFile("custom/raphael.min.js")
    page.AddExtraJavaScriptFile("custom/flowchart.min.js")
    page.AddExtraJavaScriptFile("custom/flowchart.plugin.js")

In ConnectPage

I have prefixed each node caption with the node key, e.g. st, e, etc. The start and end nodes should always be st and e respectively, other nodes can have their unique names. The flow states are like themes for each node. Methods that end with 'Right' mean the node will be added to the right of its source node. So to start each flow chart, first add a start and an end and then add other nodes per methods provided.

Dim mfc As MashFlowChart
    mfc.Initialize(page,"mfc")
    mfc.AddStart("st: Start","past","http://www.google.com",True)
    mfc.AddEnd("e: End","","http://www.google.com",False)
    mfc.AddOperation("op1","op1: My Operation","past","",False).ConnectStart("op1").ConnectRight("op1","cond").ColorStart("op1","red")
    mfc.AddOperation("op2","op2: Stuff","current","",False).ConnectEnd("op2")
    mfc.AddSubroutine("sub1","sub1: My subroutine","invalid","",False).ConnectLeft("sub1","op1")
    mfc.AddCondition("cond","cond: Yes or No?","approved","http://www.google.com",False).IfYesConnectRight("cond","c2").IfNoConnect("cond","para").Color("cond","c2","red")
    mfc.AddCondition("c2","c2: Good idea","rejected","",False).IfYesConnect("c2","io").IfNoConnectEnd("c2")
    mfc.AddInputOutput("io","io: catch something...","request","",False).ConnectEnd("io").ColorEnd("io","cyan")
    mfc.AddParallel("para","para: parallel tasks","","",False).Path1Bottom("para","sub1").Path2Right("para","op2")
 
    'set flow states, this applies a theme to the flowchart
    mfc.AddFlowStateFill("future","#FFFF99").AddFlowStateFill("invalid","#444444").AddFlowStateFill("request","blue")
    mfc.AddFlowState("past","#CCCCCC","","12","","","")
    mfc.AddFlowState("current","yellow","red","bold","","","")
    mfc.AddFlowState("approved","#58C4A3","","","12","APPROVED","n/a")
    mfc.AddFlowState("rejected","#C45879","","","12","n/a","REJECTED")
     
    page.Cell(2,1).AddComponent(mfc.ABMComp)

Without the flowstates...

Enjoy..

 

[Mashiane]

A simpler example showing key names etc... (added shortcut methods)

Dim fc As MashFlowChart
    fc.Initialize(page,"fc1")
    fc.AddStart1.AddEnd1.AddOperation1("op1","My Operation").AddSubroutine1("sub1","My SubRoutine").AddCondition1("cond","Yes or\nNo")
    fc.AddInputOutput1("io","Catch something")
    fc.Connect("st","op1").Connect("op1","cond")
    fc.IfYesConnect("cond","io").IfNoConnect("cond","sub1").ConnectRight("sub1","op1")
    fc.Connect("io","e")
    page.Cell(2,1).AddComponent(fc.ABMComp)

 

[Mashiane]

You can also highlight a particular element properties as depicted below. This covers everything so far that will meet my needs.

With this one, I just adjusted the example above and just added a FlowState for the node.

Dim fc As MashFlowChart
    fc.Initialize(page,"fc1")
    fc.AddStart1.AddEnd1.AddSubroutine1("sub1","My SubRoutine").AddCondition1("cond","Yes or\nNo")
    fc.AddOperation("op1","My Operation","current","",False).AddFlowState("current","red","yellow","red","bold","","","")
    fc.AddInputOutput1("io","Catch something")
    fc.Connect("st","op1").Connect("op1","cond")
    fc.IfYesConnect("cond","io").IfNoConnect("cond","sub1").ConnectRight("sub1","op1")
    fc.Connect("io","e")
    page.Cell(2,1).AddComponent(fc.ABMComp)

Enjoy!

 

[joulongleu]

Hi:Mashiane in https://github.com/adrai/flowchart.js i can't find flowchart.plugin.js
Thank you

 

[Mashiane]

Hi:Mashiane in https://github.com/adrai/flowchart.js i can't find flowchart.plugin.js
Thank you

You can actually remove that line. This thing didn't want to work and i had to tweak it. From searches it seemed a lot of other people had the same challenge I was having. After finding the solution the plugin was not necessary. Will also update Dropbox soon.

 

[joulongleu]

Hi:Mashiane:Recently, there is a task related to flowchart. I Want to use MashFlowChart but can't make the following function. Can MashFlowChart do this?Thank You.

 

[Mashiane]

Hi @joulongleu , I think this only supports 1 'to-fro' joins only. Check the documentation perhaps there could be something, or perhaps try and use the 'parallel' node.

 

[joulongleu]

Hi:Mashiane: use the 'parallel' node,but EnumPosition only right, left ,bottom , top,2 bottom only 1 can show,how to use 'mermaid' it can 2 'to-one' ,https://mermaidjs.github.io/,Thank you.

 

[Mashiane]

Hi:Mashiane: use the 'parallel' node,but EnumPosition only right, left ,bottom , top,2 bottom only 1 can show,how to use 'mermaid' it can 2 'to-one' ,https://mermaidjs.github.io/,Thank you.

The source code for all my components is available for learning, you can write your own component to work with mermaid. Sadly Im bushed at the moment. All the best..