B4J Library [ABMaterial] Deciding on a Christmas gifts using Mermaid

Ola

A long time ago I was requested to come up with a mermaid custom component for ABM. So Im taking a break today from everything and looking at it for @joulongleu

I should be having this working soon, and the code seems to be simple enough..

shop.Initialize(Page,"shop").FlowChart.TopBottom
    shop.AddRectangle("a","Christmas")
    shop.AddRoundEdges("b","Go shopping")
    shop.AddRhombus("c","Let me think")
    shop.AddRectangle("d","Laptop")
    shop.AddRectangle("e","iPhone")
    shop.AddRectangle("f","fa:fa-car Car")
    shop.ArrowText("a","b","Get money")
    shop.Arrow("b","c")
    shop.Arrow("c","d")
    shop.Arrow("c","e")
    shop.Arrow("c","f")

1. We are doing a flowchart. There are a variety of components
2. It should be a top to bottom flowchart, there are a variety, LR, RL, BT etc.
3. We need to decide on what to get for Christmas gift.
4. We need to go shopping but also get money.
5. We also need to think about the present to buy.

Component to be uploaded soon! Watch this space!

 

[Mashiane]

The swimlanes kinda stuff seems to be working too..

sg.Initialize(Page,"sg").FlowChart.TopBottom
    sg.AddRectangle("c1","c1").AddRectangle("c2","c2")
    sg.AddRectangle("a2","a2").AddRectangle("a1","a1")
    sg.AddRectangle("b1","b1").AddRectangle("b2","b2")
    sg.Arrow("c1","a2")
    sg.AddSubGraph("one").Arrow("a1","a2").EndSubGraph
    'another subgraph
    sg.AddSubGraph("two").Arrow("b1","b2").EndSubGraph
    'another subgraph
    sg.AddSubGraph("three").Arrow("c1","c2").EndSubGraph

 

[Mashiane]

One can use a variety of different arrows between connections..

1. Create rectangles A to I
2. Between each rectangle, use the various types of links

links.Initialize(Page,"links").FlowChart.LeftRight
    links.AddRectangle("a","A").AddRectangle("b","B").AddRectangle("c","C").AddRectangle("d","D").AddRectangle("e","E").AddRectangle("f","F")
    links.AddRectangle("g","G").AddRectangle("h","H").AddRectangle("i","I")
    links.Arrow("a","b")
    links.OpenLink("b","c")
    links.OpenLinkText("c","d","Open Link Text")
    links.ArrowText("d","e","Arrow Text")
    links.ArrowDotted("e","f")
    links.ArrowDottedText("f","g","Dotted Text")
    links.ArrowThickLine("g","h")
    links.ArrowThickLineText("h","i","Think Line Text")

 

[Mashiane]

Wanting a flowchart starting from the right to the left is also easy peasy... I have added here a clickable node that opens a website on a new tab. Hovering on "Click Me" node changes the mouse pointer to a hand automatically.

mer2.Initialize(Page,"merx1").FlowChart.RightLeft
    mer2.AddRectangle("start","Start")
    mer2.AddRectangle("stop","Click Me")
    mer2.OpenLinkText("start","stop","OpenLinkText")
    mer2.AddURL("stop","http://www.mbangas.com","Anele's Website")

 

[Mashiane]

This fortunately has different shapes that one can add too..

mer1.Initialize(Page,"mer1").FlowChart.LeftRight
    mer1.AddRectangle("start","Rectangle")
    mer1.AddRoundEdges("step1","Rounded Edges")
    mer1.AddCircle("step2","Circle")
    mer1.AddRhombus("step3","Rhombus")
    mer1.AddSymetricShape("stop","Stop")
    mer1.Arrow("start","step1")
    mer1.ArrowDotted("step1","step2")
    mer1.ArrowDottedText("step2","step3","My link") 
    mer1.ArrowThickLine("step3","stop")

 

[Mashiane]

I think its kinda nice that one can style the nodes using pure css. This off course needs some knowledge of css. Check it out!

styles.Initialize(Page,"styles1").FlowChart.LeftRight
    styles.AddRectangle("a","A")
    styles.AddRectangle("b","B")
    styles.AddRectangle("c","C")
    styles.AddRectangle("d","D")
    styles.ApplyClass("a","aclass")
    styles.ApplyClass("b","bclass")
    styles.ApplyClass("c","cclass")
    styles.Arrow("a","b").Arrow("b","c").Arrow("c","d")

One can use InjectCSS to add the CSS class definition..

.aclass > rect {
fill:#FF0000 !important;
stroke:#FFFF00 !important;
stroke-width:4px !important;
}
.bclass > rect {
fill:#f9f !important;
stroke:#333 !important;
stroke-width:4px !important;
}
.cclass > rect {
fill:#ccf !important;
stroke:#f66 !important;
stroke-dasharray:5, 5 !important;
stroke-width:2px !important;
}

 

[Mashiane]

As noted earlier, one can use font awesome icons on their flowchart.. This explodes on that example.

oe.Initialize(Page,"oe").FlowChart.TopBottom
    oe.AddRectangle("b","fa:fa-twitter For peace").AddRectangle("c","fa:fa-ban forbidden")
    oe.AddRectangle("d", "fa:fa-spinner").AddRectangle("e", "A fa:fa-camera-retro perhaps?")
    oe.Arrow("b","c").Arrow("b","d").Arrow("b","e")

 

[Mashiane]

A left to right flowchart is also easily done...

fc.Initialize(Page,"fc").FlowChart.LeftRight
    fc.AddRectangle("a","Hard edge")
    fc.AddRoundEdges("b","Round edge")
    fc.AddRhombus("c","Decision")
    fc.AddRectangle("d","Decision one")
    fc.AddRectangle("e", "Decision two")
    'add connections
    fc.Arrow("a","b")
    fc.Arrow("b","c")
    fc.ArrowText("c","d","One")
    fc.ArrowText("c","e","Two")

 

[liulifeng77]

nice，hoping for full demo。

 

[Mashiane]

Then there was sequence diagrams..

1.

sd.Initialize(Page,"sd").SequenceDiagram
    sd.AddParticipant("a","Alice")
    sd.AddParticipant("j","John")
    sd.AddSequence("a","j","Hello John, how are you?")
    sd.AddSequenceDotted("j","a","Great!")

2.

sd1.Initialize(Page,"sd1").SequenceDiagram
    sd1.AddParticipant("a","Alice")
    sd1.AddParticipant("j","John")
    sd1.AddSequence("a","j","Hello John, how are you?").ActivateParticipant("j")
    sd1.AddSequenceDotted("j","a","Great!").DeActivateParticipant("j")

3.

sd2.Initialize(Page,"sd2").SequenceDiagram
    sd2.AddParticipant("a","Alice")
    sd2.AddParticipant("j","John")
    sd2.AddSequence("a","j","Hello John, how are you?").ActivateParticipant("j")
    sd2.AddSequence("a","j","John, can you hear me?").ActivateParticipant("j")
    sd2.AddSequenceDotted("j","a","Hi Alice, I can hear you!").DeActivateParticipant("j")
    sd2.AddSequenceDotted("j","a","I feel great!").DeActivateParticipant("j")

 

[Mashiane]

Sequence Diagrams with notes..

1.

sd3.Initialize(Page,"sd3").SequenceDiagram
    sd3.AddParticipant("j","John")
    sd3.AddNoteOnRightOfParticipant("j","Text in note")

2.

sd4.Initialize(Page,"sd4").SequenceDiagram
    sd4.AddParticipant("a","Alice")
    sd4.AddParticipant("j","John")
    sd4.AddSequence("a","j","Hello John, how are you?")
    sd4.AddNoteOverParticipants("a","j","A typical interaction")

 

[Mashiane]

SDs with loops, else, alt statements

1.

sd5.Initialize(Page,"sd5").SequenceDiagram
    sd5.AddParticipant("a","Alice")
    sd5.AddParticipant("j","John")
    sd5.AddSequenceNoArrow("a","j","Hello John, how are you?")
    sd5.AddLoop("Every Minute").AddSequenceDottedNoArrow("j","a","Great!").AddEnd

2.

sd6.Initialize(Page,"sd6").SequenceDiagram
    sd6.AddParticipant("a","Alice")
    sd6.AddParticipant("b","Bob")
    sd6.AddSequence("a","b","Hello Bob, how are you?")
    sd6.AddAlt("is sick").AddSequence("b","a","Not so good :(")
    sd6.AddElse("is well").AddSequence("b","a","Feeling as fresh as a daisy")
    sd6.AddEnd
    sd6.AddOpt("Extra Response").AddSequence("b","a","Thanks for asking")
    sd6.AddEnd

 

[Mashiane]

It has some kind of gantt chart too..

gt.Initialize(Page,"gt").GanttChart.DateFormat("YYYY-MM-DD")
    gt.AddSection("Phase 1")
    gt.AddTask("t1","Task 1","2018-10-08","2018-10-31",0,False)
    gt.AddTask("t5","Task 5","2018-11-01","2018-11-15",10,False)
    gt.AddSection("Phase 2")
    gt.AddTask("t2","Task 2","2018-10-20","2018-10-25",100,True)
    gt.AddTask("t6","Task 6","2018-10-22","2018-10-25",20,False)
    gt.AddSection("Phase 3")
    gt.AddTask("t3","Task 3","2018-11-01","2018-11-10",10,True)
    gt.AddSection("Phase 4")
    gt.AddTask("t4","Task 4","2018-11-11","2018-11-30",100,False)
    gt.AddTask("t7","Task 7","2018-12-01","2018-12-25",20,False)

 

[Mashiane]

Another flowchart example...

aa.Initialize(Page,"aa").FlowChart.TopDown
    aa.AddRectangle("a","A").AddRectangle("b","B").AddRectangle("c","C").AddRectangle("d","D")
    aa.Arrow("a","b").Arrow("a","c").Arrow("b","d").Arrow("c","d")

 

[joulongleu]

I see it,in UOE,Thank You.