Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic Trying to layout a graph as a flowchart. (Read 4652 times)
Jonas G
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 3
Joined: Sep 16th, 2016
Trying to layout a graph as a flowchart.
Sep 16th, 2016 at 6:49am
Print Post  
I'm evaluating Diagramming for my client. We are replacing an old system and part of that is the requirement to be able to display their graphs as flowcharts. They have about 2200 different graphs.

My problem is that I can't get the graphs to render properly. Lines are either crossing boxes or placed strange.

Ive tried to first place all boxes on the diagram and then add all connections.

I've also tried to generate a tree in the memory and then add it to the diagram traversing the tree by starting in the left leaf.

Here is one of the problematic graphs:

Code (Javascript)
Select All
{
	"Nodes": [{
		"id": "9275832"
	},
	{
		"id": "9275873"
	},
	{
		"id": "9275855"
	},
	{
		"id": "9275843"
	},
	{
		"id": "9275859"
	},
	{
		"id": "9275872"
	},
	{
		"id": "9275879"
	},
	{
		"id": "9275869"
	},
	{
		"id": "9275885"
	},
	{
		"id": "9275861"
	},
	{
		"id": "9275882"
	},
	{
		"id": "9275834"
	},
	{
		"id": "9275887"
	},
	{
		"id": "9275880"
	},
	{
		"id": "9275896"
	},
	{
		"id": "9275845"
	},
	{
		"id": "9275878"
	},
	{
		"id": "9275895"
	},
	{
		"id": "9275846"
	},
	{
		"id": "9275840"
	},
	{
		"id": "9275838"
	},
	{
		"id": "9275863"
	},
	{
		"id": "9275884"
	},
	{
		"id": "9275847"
	},
	{
		"id": "9275836"
	},
	{
		"id": "9275870"
	},
	{
		"id": "9275875"
	},
	{
		"id": "9275850"
	},
	{
		"id": "9275857"
	},
	{
		"id": "9275848"
	},
	{
		"id": "9275883"
	},
	{
		"id": "9275837"
	},
	{
		"id": "9275893"
	},
	{
		"id": "9275839"
	},
	{
		"id": "9275849"
	},
	{
		"id": "9275860"
	},
	{
		"id": "9275851"
	},
	{
		"id": "9275852"
	},
	{
		"id": "9275868"
	},
	{
		"id": "9275864"
	},
	{
		"id": "9275889"
	}],
	"Connections": [{
		"FromId": 9275840,
		"ToId": 9275863,
		"IsDefaultPath": true
	},
	{
		"FromId": 9275840,
		"ToId": 9275869,
		"IsDefaultPath": false
	},
	{
		"FromId": 9275843,
		"ToId": 9275868,
		"IsDefaultPath": true
	},
	{
		"FromId": 9275843,
		"ToId": 9275872,
		"IsDefaultPath": true
	},
	{
		"FromId": 9275843,
		"ToId": 9275834,
		"IsDefaultPath": true
	},
	{
		"FromId": 9275843,
		"ToId": 9275878,
		"IsDefaultPath": false
	},
	{
		"FromId": 9275843,
		"ToId": 9275855,
		"IsDefaultPath": true
	},
	{
		"FromId": 9275843,
		"ToId": 9275859,
		"IsDefaultPath": true
	},
	{
		"FromId": 9275847,
		"ToId": 9275875,
		"IsDefaultPath": false
	},
	{
		"FromId": 9275847,
		"ToId": 9275836,
		"IsDefaultPath": true
	},
	{
		"FromId": 0,
		"ToId": 9275832,
		"IsDefaultPath": true
	},
	{
		"FromId": 9275838,
		"ToId": 9275840,
		"IsDefaultPath": true
	},
	{
		"FromId": 9275870,
		"ToId": 9275875,
		"IsDefaultPath": true
	},
	{
		"FromId": 9275872,
		"ToId": 9275879,
		"IsDefaultPath": true
	},
	{
		"FromId": 9275884,
		"ToId": 9275847,
		"IsDefaultPath": true
	},
	{
		"FromId": 9275885,
		"ToId": 9275861,
		"IsDefaultPath": true
	},
	{
		"FromId": 9275878,
		"ToId": 9275895,
		"IsDefaultPath": true
	},
	{
		"FromId": 9275834,
		"ToId": 9275860,
		"IsDefaultPath": true
	},
	{
		"FromId": 9275836,
		"ToId": 9275852,
		"IsDefaultPath": true
	},
	{
		"FromId": 9275863,
		"ToId": 9275851,
		"IsDefaultPath": true
	},
	{
		"FromId": 9275846,
		"ToId": 9275885,
		"IsDefaultPath": true
	},
	{
		"FromId": 9275855,
		"ToId": 9275846,
		"IsDefaultPath": true
	},
	{
		"FromId": 9275873,
		"ToId": 9275843,
		"IsDefaultPath": true
	},
	{
		"FromId": 9275883,
		"ToId": 9275837,
		"IsDefaultPath": true
	},
	{
		"FromId": 9275861,
		"ToId": 9275882,
		"IsDefaultPath": true
	},
	{
		"FromId": 9275896,
		"ToId": 9275873,
		"IsDefaultPath": true
	},
	{
		"FromId": 9275868,
		"ToId": 9275850,
		"IsDefaultPath": true
	},
	{
		"FromId": 9275879,
		"ToId": 9275839,
		"IsDefaultPath": true
	},
	{
		"FromId": 9275857,
		"ToId": 9275880,
		"IsDefaultPath": true
	},
	{
		"FromId": 9275850,
		"ToId": 9275857,
		"IsDefaultPath": true
	},
	{
		"FromId": 9275895,
		"ToId": 1,
		"IsDefaultPath": true
	},
	{
		"FromId": 9275859,
		"ToId": 9275879,
		"IsDefaultPath": true
	},
	{
		"FromId": 9275893,
		"ToId": 1,
		"IsDefaultPath": true
	},
	{
		"FromId": 9275839,
		"ToId": 9275849,
		"IsDefaultPath": true
	},
	{
		"FromId": 9275849,
		"ToId": 9275880,
		"IsDefaultPath": true
	},
	{
		"FromId": 9275882,
		"ToId": 9275887,
		"IsDefaultPath": true
	},
	{
		"FromId": 9275887,
		"ToId": 9275880,
		"IsDefaultPath": true
	},
	{
		"FromId": 9275832,
		"ToId": 9275896,
		"IsDefaultPath": true
	},
	{
		"FromId": 9275869,
		"ToId": 9275875,
		"IsDefaultPath": true
	},
	{
		"FromId": 9275880,
		"ToId": 9275848,
		"IsDefaultPath": true
	},
	{
		"FromId": 9275837,
		"ToId": 9275893,
		"IsDefaultPath": true
	},
	{
		"FromId": 9275851,
		"ToId": 9275884,
		"IsDefaultPath": true
	},
	{
		"FromId": 9275848,
		"ToId": 9275883,
		"IsDefaultPath": true
	},
	{
		"FromId": 9275852,
		"ToId": 9275870,
		"IsDefaultPath": true
	},
	{
		"FromId": 9275860,
		"ToId": 9275838,
		"IsDefaultPath": true
	},
	{
		"FromId": 9275875,
		"ToId": 9275880,
		"IsDefaultPath": true
	}]
}
 



FromId = 0 means that the node should connect to "start"
ToId = 1 means that the node should connect to "end"
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3146
Joined: Oct 19th, 2005
Re: Trying to layout a graph as a flowchart.
Reply #1 - Sep 16th, 2016 at 11:11am
Print Post  
Hi,

Which graph layout class are you using?

Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
Jonas G
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 3
Joined: Sep 16th, 2016
Re: Trying to layout a graph as a flowchart.
Reply #2 - Sep 16th, 2016 at 1:48pm
Print Post  
Flowchart.

I've added a screenshot of the generated flowchart.

See my changes in it.
  

test_001.png ( 120 KB | 115 Downloads )
test_001.png
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3146
Joined: Oct 19th, 2005
Re: Trying to layout a graph as a flowchart.
Reply #3 - Sep 16th, 2016 at 2:52pm
Print Post  
FlowchartLayout needs paired start/end nodes for branches and loops, e.g. check how ones are created in the JavaScript sample project. For arbitrary graphs like yours, try LayeredLayout -

Code
Select All
var graph = LoadJson();
foreach (var node in graph.Nodes)
{
	var diagNode = diag.Factory.CreateShapeNode(10, 10, 20, 12);
	diagNode.Text = node.id;
	diagNode.Id = int.Parse(node.id);
}
foreach (var conn in graph.Connections)
{
	var diagLink = diag.Factory.CreateDiagramLink(
		diag.FindNodeById(conn.FromId),
		diag.FindNodeById(conn.ToId));
}

var layout = new LayeredLayout();
layout.EnforceLinkFlow = true;
layout.StraightenLongLinks = true;
layout.Arrange(diag);

view.ZoomToFit(); 





Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3146
Joined: Oct 19th, 2005
Re: Trying to layout a graph as a flowchart.
Reply #4 - Sep 16th, 2016 at 3:03pm
Print Post  
This one looks flowchartish too, while more compact than the layered layout -

Code
Select All
var graph = LoadJson();

diag.LinkShape = LinkShape.Cascading;
foreach (var node in graph.Nodes)
{
	var diagNode = diag.Factory.CreateShapeNode(10, 10, 20, 12);
	diagNode.Text = node.id;
	diagNode.Id = int.Parse(node.id);
}
foreach (var conn in graph.Connections)
{
	var diagLink = diag.Factory.CreateDiagramLink(
		diag.FindNodeById(conn.FromId),
		diag.FindNodeById(conn.ToId));
}

new DecisionLayout().Arrange(diag);
diag.RouteAllLinks(); 



  
Back to top
 
IP Logged
 
Jonas G
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 3
Joined: Sep 16th, 2016
Re: Trying to layout a graph as a flowchart.
Reply #5 - Sep 23rd, 2016 at 7:25am
Print Post  
Slavcho wrote on Sep 16th, 2016 at 2:52pm:
FlowchartLayout needs paired start/end nodes for branches and loops, e.g. check how ones are created in the JavaScript sample project. For arbitrary graphs like yours, try LayeredLayout -


What you mean with that they must be paired?

Either way, that only explains one of the problems that I displayed. Why are the two middle nodes placed below stop?

  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3146
Joined: Oct 19th, 2005
Re: Trying to layout a graph as a flowchart.
Reply #6 - Sep 23rd, 2016 at 8:54am
Print Post  
FlowchartLayout was intended to represent source code, and it relies on paired start and end nodes delimiting the code blocks to decompose the graph in well-nested subsets (i.e. goto commands are not supported) and works recursively to arrange each nested part. So if some part of the diagram represents a branch statement, it must be surrounded by distinct start-if and end-if nodes, same for start-loop and end-loop, etc.

You could build such graphs from data sources other than source code, as long as they have similar nesting structure. E.g. if the 9275843 node in your graph was a switch statement, FlowchartLayout could work if it finds a corresponding end-switch node where all branches starting from 9275843 meet, while all other branchings and loops inside have distinct start/end nodes too. I think the problem with marked parts in your image is that the layout could not discover a distinct end-* node to make the recursion work.

FlowchartLayout advantage over LayeredLayout would be that it can assign better shapes to links when it knows subgraphs are well-nested and wouldn't have child links crossing them to connect with other parts of the diagram. If you are after flowchart's appearance of links, you could implement it for LayeredLayout too with some post-processing code, e.g. by sorting link end points on the sides of nodes and calling the link router to make them follow horizontal and vertical path segments.

Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint