How to draw a custom flow graphic? urgently for the answer.

Hi Kawashima ,
Thank you for posting query to us.

If your intension is to draw the labels outside the symbol then this can be achieved by adjusting the OffsetX and OffsetY of the labels and add it into the LabelCollection of the symbol.
Please refer the sample in the link to illustrate this:
http://websamples.syncfusion.com/samples/Diagram.Windows/70765/main.htm

Kindly try this and if I misunderstood your requirement then please provide more information so that we could provide you a solution soon?

Please let me know if you need further assistance.
Thanks,
Jisha

I want to draw a "custom" flow graphic. The flow graphic has the input node, the output node and link line. The input node has two attribute:id and name. The output node has two attribute:id and name. The link line has a attribute:value. The input node, the output node and the link line use a "custom graphic" to draw in flow graphic, not use a rectangle, and their attributes are drawed in outside.
My upper attention is display in my attachment file. In my attachment file a custom flow graphic in left, right is contrast.So I am highly appreaciting if any one give some sample application and help me to draw it.

Please attention my requirement. I want you can help me to draw a flow graphic like in my attachment file a custom flow graphic in left.

Thanks,

Hi Kawashima,

Thank you for your interest in Syncfusion products.

How to draw a custom flow graphic

You can use the Symbol designer itself to draw such custom graph. For ID and Name, you can use Tag and Name property.

You can use the Symbol designer from the below location:
Program Files\Syncfusion\Essential Studio\X.X.X.X\Windows\Diagram.Windows\Symbol Designer

Online Documentation link on using Symbol Designer:
http://www2.syncfusion.com/ug_61/diagram/SymbolDesigner.html

Please refere the below sample browser for Custom Symbols
\\Syncfusion\EssentialStudio\X.X.X.X\Windows\Diagram.Windows\Samples\2.0\Symbol Design\CustomSymbol

Please dwonload the sample from the below location:
http://websamples.syncfusion.com/samples/Diagram.Windows/P70800/main.htm

In this sample we have created a graph using the Symbol designer itself, for TextNode alone we have used the code.

Please let me know if you have any questions.

Best Regards,
Bhuvana

I want to draw a "custom" flow graphic. The flow graphic has the input node, the output node and link line. The input node has two attribute:id and name. The output node has two attribute:id and name. The link line has a attribute:value. The input node, the output node and the link line use a "custom graphic" to draw in flow graphic, not use a rectangle, and their attributes are drawed in outside.
My upper attention is display in my attachment file. In my attachment file has four graphic files. They are input node, link line, output node and flow graphic. They are all custom graphic in my flow graphic. How to draw it? So I am highly appreaciting if any one give some sample application and help me to draw it.

Please attention my requirement. I want you can help me to draw a flow graphic like in my attachment file. The input node link to output node by link line, they are all custom graphic.

Thanks,



FlowGraphic.zip

Hi Kawashima,

Thanks for the update.

Can you please refer the modified sample in the below location that helps you to drag and drop the InputNode and OutPutNode from Palette and link the two using LinkLine node?

http://websamples.syncfusion.com/samples/Diagram.Windows/F70765/main.htm

Please provide me more information on how do you want to create these symbols if this not meets your requirement.

Regards,
Jaya

Thank you for your help. But I have some question. How do design myself symbol by symbol designer? Please tell me step by step. How do I write code in program to draw input node, output node and link them by link line? I want to write code in program realizing a custom a flow graphic. Please tell me step by step.

Thanks,

Hi Kawashima,

Thanks for the update.

Creating custom flow graphics through code

You can create custom flow graphics (like in the attachment ) through code. Please refer the steps below.

Step by step procedure for creating OutputNode through code

1) Create group class Group1.
2) Create and add RoundRect , Ellipse and Line shapes to Group1.
3) Finally add Group1 to a diagram.

The following code snippet is used to create OutputNode.

[C#]

// Create Group1
Group g1 = new Group();

// Add Group1 to diagram
diagram1.Model.AppendChild(g1);

// Create and add RoundRect1 to Group1
Syncfusion.Windows.Forms.Diagram.RoundRect r1 = new Syncfusion.Windows.Forms.Diagram.RoundRect(10, 300, 45, 50, MeasureUnits.Pixel);
r1.FillStyle.Type = Syncfusion.Windows.Forms.Diagram.FillStyleType.Hatch;
r1.FillStyle.HatchBrushStyle = System.Drawing.Drawing2D.HatchStyle.Percent20;
g1.AppendChild(r1);

// Create and add RoundRect2 to Group1
Syncfusion.Windows.Forms.Diagram.RoundRect r2 = new Syncfusion.Windows.Forms.Diagram.RoundRect(15, 305, 35, 39, MeasureUnits.Pixel);
g1.AppendChild(r2);

// Create and add Ellipse1 to Group1
Syncfusion.Windows.Forms.Diagram.Ellipse e1 = new Ellipse(25, 310, 15, 15, MeasureUnits.Pixel);
g1.AppendChild(e1);

// Create and add Ellipse2 to Group1
Syncfusion.Windows.Forms.Diagram.Ellipse e2 = new Ellipse(25, 325, 15, 15, MeasureUnits.Pixel);
g1.AppendChild(e2);

// Create and add Line to Group1
Syncfusion.Windows.Forms.Diagram.Line l1 = new Line(new PointF(12,323),new PointF(50,323));
g1.AppendChild(l1);

Sample link

Please refer the sample below that demonstrates on adding custom flow graphics through code.

http://websamples.syncfusion.com/samples/Diagram.Windows/F70765/Code/main.htm

Video link on using Symbol designer utility

Please refer the video link in the below location on creating custom symbol step by step using Symbol designer utility.

http://www.syncfusion.com/Support/user/uploads/Utility_Video_477de84.zip

Please also refer the Online documentation link on using Symbol Designer in the below location.

http://www2.syncfusion.com/ug_61/diagram/SymbolDesigner.html

Please let me know if you have any further questions.

Regards,
Jaya

Thanks for your help.
But I also have some question. So I send my code to you. I want to draw the "Ari_FlowNodeSymbol" with "the input node" of custom symbol, and the "Ari_ProcessSymbol" with "the output node" of custom symbol, and the "CustomOrthogonalLink" with "the link line" of custom symbol in my flow graphic automatically. How do I draw the flow graphic?
The other question is the video link of you provided isn't valid. I download the file, but I don't open it because it isn't a valid compressed volume file. So please you send a valid video to me.
the design myself symbol by symbol designer? Please tell me step by step. How do I write code in program to draw input node, output node and link them by link line? I want to write code in program realizing a custom a flow graphic. Please tell me step by step.


>Hi Kawashima,

Thanks for the update.

Creating custom flow graphics through code

You can create custom flow graphics (like in the attachment ) through code. Please refer the steps below.

Step by step procedure for creating OutputNode through code

1) Create group class Group1.
2) Create and add RoundRect , Ellipse and Line shapes to Group1.
3) Finally add Group1 to a diagram.

The following code snippet is used to create OutputNode.

[C#]

// Create Group1
Group g1 = new Group();

// Add Group1 to diagram
diagram1.Model.AppendChild(g1);

// Create and add RoundRect1 to Group1
Syncfusion.Windows.Forms.Diagram.RoundRect r1 = new Syncfusion.Windows.Forms.Diagram.RoundRect(10, 300, 45, 50, MeasureUnits.Pixel);
r1.FillStyle.Type = Syncfusion.Windows.Forms.Diagram.FillStyleType.Hatch;
r1.FillStyle.HatchBrushStyle = System.Drawing.Drawing2D.HatchStyle.Percent20;
g1.AppendChild(r1);

// Create and add RoundRect2 to Group1
Syncfusion.Windows.Forms.Diagram.RoundRect r2 = new Syncfusion.Windows.Forms.Diagram.RoundRect(15, 305, 35, 39, MeasureUnits.Pixel);
g1.AppendChild(r2);

// Create and add Ellipse1 to Group1
Syncfusion.Windows.Forms.Diagram.Ellipse e1 = new Ellipse(25, 310, 15, 15, MeasureUnits.Pixel);
g1.AppendChild(e1);

// Create and add Ellipse2 to Group1
Syncfusion.Windows.Forms.Diagram.Ellipse e2 = new Ellipse(25, 325, 15, 15, MeasureUnits.Pixel);
g1.AppendChild(e2);

// Create and add Line to Group1
Syncfusion.Windows.Forms.Diagram.Line l1 = new Line(new PointF(12,323),new PointF(50,323));
g1.AppendChild(l1);

Sample link

Please refer the sample below that demonstrates on adding custom flow graphics through code.

http://websamples.syncfusion.com/samples/Diagram.Windows/F70765/Code/main.htm

Video link on using Symbol designer utility

Please refer the video link in the below location on creating custom symbol step by step using Symbol designer utility.

http://www.syncfusion.com/Support/user/uploads/Utility_Video_477de84.zip

Please also refer the Online documentation link on using Symbol Designer in the below location.

http://www2.syncfusion.com/ug_61/diagram/SymbolDesigner.html

Please let me know if you have any further questions.

Regards,
Jaya







Graphics Noes.zip

Thanks for your help.
But I also have some question. So I send my code to you. I want to draw the "Ari_FlowNodeSymbol" with "the input node" of custom symbol, and the "Ari_ProcessSymbol" with "the output node" of custom symbol, and the "CustomOrthogonalLink" with "the link line" of custom symbol in my flow graphic automatically. How do I draw the flow graphic?
The other question is the video link of you provided isn't valid. I download the file, but I don't open it because it isn't a valid compressed volume file. So please you send a valid video to me.

Thanks,



Graphics Noes.zip

Hi Kawashima,

Thanks for the update. Please check out the response below.

Connecting InputNode and OutPutNode using LinkLine.

You can connect the custom shapes InputNode and OutPutNode using LineConnector as follows.

LineConnector line = new LineConnector(srcNode.PinPoint,tgtNode.PinPoint);
srcNode.CentralPort.Connect(line.TailEndPoint);
tgtNode.CentralPort.Connect(line.HeadEndPoint);
// Where srcNode is the InputNode and tgtNode is the OutPutNode

Sample link

Please refer the sample link that demonstrates the same.

http://websamples.syncfusion.com/samples/Diagram.Windows/F70765/Connector/main.htm

Video link on using Symbol designer utility

Sorry for the broken link in my previous update. Please refer the modified video link in the below location.

http://websamples.syncfusion.com/samples/Diagram.Windows/F70765/Video/main.htm

Please let me know if this meets your requirement and let me know if you have any further queries.

Regards,
Jaya