Thread: How Do I Draw Flow Chart Using VB.NET (programatically)

• 
• VBForums
• Visual Basic
• Visual Basic .NET
• How do i draw flow chart using VB.NET (programatically)

1. If this is your first visit, be sure to check out the FAQ by clicking the link above. You may have to register before you can post: click the register link above to proceed. To start viewing messages, select the forum that you want to visit from the selection below.

• Thread Tools

  • Show Printable Version

• Display

  • Linear Mode
  • Switch to Hybrid Mode
  • Switch to Threaded Mode

1. Apr 14th, 2014, 02:28 AM #1 koolprasad2003
   • View Profile
   • View Forum Posts
   

   Thread Starter Hyperactive Member Join Date May 2007 Location India Posts 443

   How do i draw flow chart using VB.NET (programatically)

   Hello all I have a VB.NET windows application, I need to draw a flowchart using VB.NET windows application (programmatically) ? I have tried with word shapes but find it hard as we need to give position for each shape. Is there any good idea to draw flowchart in VB.NET windows applications ? Thanks In advance

   MCP, MCTS, Microsoft MVP [Asp.Net/IIS] For more .NET development tips visit .NET Tips If the post is useful then please Rate it

   Reply With Quote
2. Apr 14th, 2014, 04:05 AM #2 jmcilhinney
   • View Profile
   • View Forum Posts
   • Visit Homepage
   Super Moderator Join Date May 2005 Location Sydney, Australia Posts 110,799

   Re: How do i draw flow chart using VB.NET (programatically)

   There may be some tools designed specifically for it but the first thing that comes to mind is to simply use GDI+. You can draw on a form or control, ideally a PictureBox, in its OnPaint method or Paint event handler and call methods like Graphics.DrawRectangle and .DrawLine.

   Why is my data not saved to my database? | MSDN Data Walkthroughs VBForums Database Development FAQ My CodeBank Submissions: VB | C# My Blog: Data Among Multiple Forms (3 parts) Beginner Tutorials: VB | C# | SQL

   Reply With Quote
3. Apr 14th, 2014, 09:44 AM #3 boops boops
   • View Profile
   • View Forum Posts
   PowerPoster Join Date Nov 2008 Location Holland/France Posts 3,201

   Re: How do i draw flow chart using VB.NET (programatically)

   Another approach that you might want to consider is to take advantage of the Visual Studio Forms Designer. You could make a series of shape controls (rounded box, oval, diamond, connecting arrows etc.) as custom controls, which you then add to the ToolBox. I suggest you inherit from the Label control for this purpose. Then you can drag the shapes as required onto a Form, Panel etc. and lay them out with the help of the Format menu for lining up the middles/centres, equal spacing etc. Of course, there is the PowerPack with its Shape controls but in my view they are too inflexible for this purpose. By inheriting from Label, on the other hand, it becomes an easy matter to display centred text in the boxes. If you think this approach could fit your needs, I could make some more detailed suggestions and sketch a few code examples. All this assumes you want to use Windows Forms controls. Obviously, something similar and potentially much more sophisticated could be done in WPF -- if you know how. BB

   Code bank stuff: Rapid pixel processing with FastPix (LockBits wrapper) Slide show with cross-fading Three Dimensional Text in GDI+ Pangram Tester ZoomPictureBox: 3 zooming modes and mouse drag. List Components: List all non-UI components hosted on a Form. "Shaped Form" with soft drop shadow, translucent colours -- using WPF! How to paint a polygon over a form's controls

   Reply With Quote
4. Apr 15th, 2014, 07:29 AM #4 koolprasad2003
   • View Profile
   • View Forum Posts
   

   Thread Starter Hyperactive Member Join Date May 2007 Location India Posts 443

   Re: How do i draw flow chart using VB.NET (programatically)

   Thanks for reply jm and boops can you give me some sample code so that I can try with the same

   MCP, MCTS, Microsoft MVP [Asp.Net/IIS] For more .NET development tips visit .NET Tips If the post is useful then please Rate it

   Reply With Quote
5. Apr 15th, 2014, 07:55 AM #5 jmcilhinney
   • View Profile
   • View Forum Posts
   • Visit Homepage
   Super Moderator Join Date May 2005 Location Sydney, Australia Posts 110,799

   Re: How do i draw flow chart using VB.NET (programatically)

   You can follow the CodeBank link in my signature below and check out my thread on Manipulating GDI+ Drawings to get an idea of how to draw the flowchart items yourself. That thread isn't exactly what you're doing but it demonstrates many of the principles that you would have to use, which is exactly what examples are for.

   Why is my data not saved to my database? | MSDN Data Walkthroughs VBForums Database Development FAQ My CodeBank Submissions: VB | C# My Blog: Data Among Multiple Forms (3 parts) Beginner Tutorials: VB | C# | SQL

   Reply With Quote
6. Apr 16th, 2014, 09:36 AM #6 boops boops
   • View Profile
   • View Forum Posts
   PowerPoster Join Date Nov 2008 Location Holland/France Posts 3,201

   Re: How do i draw flow chart using VB.NET (programatically)

   Hi koolprasad, I hope you have digested some of the principles of graphics jmc dished up. I said I'd offer some code, but it turned out to be more complicated than I first thought -- as usual. But I enjoy this kind of thing, so I went to town on it. First of all, there is a base class to provide properties and methods needed by all the flowchart symbols. It inherits from the Label control, and the individual symbols inherit in turn from this base class (so they are also in effect labels). Among other things, the base class has a graphics path property (ShapePath) which each individual shape has to override to define its shape. The base class also does some basic drawing in its OnPaint sub, which is slightly complicated by the fact that arrows have special requirements. Here's the code: vb.net Code:

   1. Public MustInherit Class FlowchartSymbolBase
   2. Inherits Label
   3. Public MustOverride ReadOnly Property ShapePath As Drawing2D.GraphicsPath
   4. Friend Property IsArrow As Boolean
   5. Private _FillColor As Color = Color.FromKnownColor(KnownColor.ControlLightLight)
   6. Public Property FillColor As Color
   7. Get
   8. Return _FillColor
   9. End Get
   10. Set(value As Color)
   11. _FillColor = value
   12. Me.Invalidate()
   13. End Set
   14. End Property
   15. Public Overrides Property AutoSize As Boolean
   16. Get
   17. Return MyBase.AutoSize
   18. End Get
   19. Set(value As Boolean)
   20. MyBase.AutoSize = False
   21. End Set
   22. End Property
   23. Public Sub New()
   24. Me.BackColor = Color.Transparent
   25. Me.TextAlign = ContentAlignment.MiddleCenter
   26. Me.Size = New Size(160, 70)
   27. End Sub
   28. Protected Overrides Sub OnPaint(e As System.Windows.Forms.PaintEventArgs)
   29. e.Graphics.SmoothingMode = Drawing2D.SmoothingMode.HighQuality
   30. If Me.ShapePath IsNot Nothing Then
   31. If Me.IsArrow Then
   32. Using pn As New Pen(Color.Black, 2)
   33. e.Graphics.DrawPath(pn, ShapePath)
   34. End Using
   35. End If
   36. Using sbr As New SolidBrush(Me.FillColor)
   37. e.Graphics.FillPath(sbr, ShapePath)
   38. End Using
   39. If Not Me.IsArrow Then e.Graphics.DrawPath(Pens.Black, ShapePath)
   40. End If
   41. MyBase.OnPaint(e)
   42. End Sub
   43. End Class

   Now it becomes easy to provide different shapes. A rectangle is a cinch: vb.net Code:

   1. Public Class FlowchartRectangle
   2. Inherits FlowchartSymbolBase
   3. Public Sub New()
   4. Me.FillColor = Color.LightCyan
   5. End Sub
   6. Public Overrides ReadOnly Property ShapePath As System.Drawing.Drawing2D.GraphicsPath
   7. Get
   8. Dim _shapePath As New Drawing2D.GraphicsPath
   9. Dim rect As New Rectangle(0, 0, Me.ClientSize.Width - 1, Me.ClientSize.Height - 1)
   10. _shapePath.AddRectangle(rect)
   11. Return _shapePath
   12. End Get
   13. End Property
   14. End Class

   and a diamond shape not much more: vb.net Code:

   1. Public Class FlowchartDiamond
   2. Inherits FlowchartSymbolBase
   3. Public Sub New()
   4. Me.FillColor = Color.Aquamarine
   5. End Sub
   6. Private _shapePath As Drawing2D.GraphicsPath
   7. Public Overrides ReadOnly Property shapepath As Drawing2D.GraphicsPath
   8. Get
   9. _shapePath = New Drawing2D.GraphicsPath
   10. Dim p1 As New Point(Me.Width \ 2, 0)
   11. Dim p2 As New Point(Me.Width, Me.Height \ 2)
   12. Dim p3 As New Point(Me.Width \ 2, Me.Height - 1)
   13. Dim p4 As New Point(0, Me.Height \ 2)
   14. _shapePath.AddPolygon({p1, p2, p3, p4})
   15. Return _shapePath
   16. End Get
   17. End Property
   18. End Class

   The arrow shape on the other hand is more complicated, mainly because it has four different directions which you can select in the Designer (ArrowDirection property): vb.net Code:

   1. Public Class FlowchartArrow
   2. Inherits FlowchartSymbolBase
   3. Public Enum Direction
   4. Up = 270
   5. Right = 0
   6. Down = 90
   7. Left = 180
   8. End Enum
   9. Private _ArrowDirection As Direction = Direction.Down
   10. Public Property ArrowDirection As Direction
   11. Get
   12. Return _ArrowDirection
   13. End Get
   14. Set(value As Direction)
   15. _ArrowDirection = value
   16. Me.Invalidate()
   17. End Set
   18. End Property
   19. Public Overrides ReadOnly Property ShapePath As System.Drawing.Drawing2D.GraphicsPath
   20. Get
   21. Dim _shapePath = New Drawing2D.GraphicsPath
   22. 'find the start and end points for the arrow:
   23. Dim startPoint, endPoint As Point
   24. Select Case Me.ArrowDirection
   25. Case Direction.Right
   26. startPoint = New Point(1, Me.Height \ 2)
   27. endPoint = New Point(Me.Width - 1, Me.Height \ 2)
   28. Case Direction.Left
   29. startPoint = New Point(Me.Width - 1, Me.Height \ 2)
   30. endPoint = New Point(1, Me.Height \ 2)
   31. Case Direction.Up
   32. startPoint = New Point(Me.Width \ 2, Me.Height - 1)
   33. endPoint = New Point(Me.Width \ 2, 1)
   34. Case Direction.Down
   35. startPoint = New Point(Me.Width \ 2, 1)
   36. endPoint = New Point(Me.Width \ 2, Me.Height - 1)
   37. End Select
   38. 'draw the arrow using a widened graphics path:
   39. _shapePath.AddLine(startPoint, endPoint)
   40. Using widenPen As New Pen(Color.Empty, 20) With {.EndCap = Drawing2D.LineCap.ArrowAnchor}
   41. _shapePath.Widen(widenPen)
   42. End Using
   43. Return _shapePath
   44. End Get
   45. End Property
   46. Public Sub New()
   47. Me.FillColor = Color.MediumTurquoise
   48. Me.IsArrow = True
   49. End Sub
   50. End Class

   If you add these classes to a Forms project and build the project, you will be able to drag the shapes onto the Form from the toolbox, and change their text, colour etc. as with any other Label control. An easy way to lay them out is to put them in a TableLayoutPanel; or as I mentioned to use the Format menu. Here's an example I made using a TableLayoutPanel. The gradient background and the drop shadows are just ornamentation provided in the TableLayoutPanel's Paint event handler. It will be easy to provide further shapes, but more development will have to wait for now. I'll post the complete tool to this forum's CodeBank when I think it's ready enough. BB

   Code bank stuff: Rapid pixel processing with FastPix (LockBits wrapper) Slide show with cross-fading Three Dimensional Text in GDI+ Pangram Tester ZoomPictureBox: 3 zooming modes and mouse drag. List Components: List all non-UI components hosted on a Form. "Shaped Form" with soft drop shadow, translucent colours -- using WPF! How to paint a polygon over a form's controls

   Reply With Quote
7. Nov 16th, 2014, 10:41 PM #7 SharkBaitNZ
   • View Profile
   • View Forum Posts
   New Member Join Date Nov 2014 Posts 3

   Re: How do i draw flow chart using VB.NET (programatically)

   Hi BB Have you posted the code to CodeBank yet? Ta.

   Reply With Quote
8. Nov 17th, 2014, 11:35 AM #8 boops boops
   • View Profile
   • View Forum Posts
   PowerPoster Join Date Nov 2008 Location Holland/France Posts 3,201

   Re: How do i draw flow chart using VB.NET (programatically)

   Hi SharkBaitNZ, welcome to VBForums. Originally Posted by SharkBaitNZ Hi BB Have you posted the code to CodeBank yet? Ta. Nobody seemed to take any interest in my previous post so I didn't bother about putting more work into it. However, I did go as far as adding a RoundedRectangle shape, which was simple enough and I suppose could be useful: Code: Public Class FlowchartRoundedRectangle Inherits FlowchartSymbolBase Private _CornerRadius As Integer = 15 Public Property CornerRadius As Integer Get Return _CornerRadius End Get Set(value As Integer) _CornerRadius = value Me.Invalidate() End Set End Property Public Overrides ReadOnly Property ShapePath As System.Drawing.Drawing2D.GraphicsPath Get Dim shape As New Drawing2D.GraphicsPath Dim rect As New Rectangle(0, 0, 2 * CornerRadius, 2 * CornerRadius) shape.AddArc(rect, 180, 90) rect.Offset(Me.Width - 2 * CornerRadius - 1, 0) shape.AddArc(rect, 270, 90) rect.Offset(0, Me.Height - 2 * CornerRadius - 1) shape.AddArc(rect, 0, 90) rect.Offset(2 * CornerRadius - Me.Width + 1, 0) shape.AddArc(rect, 90, 90) shape.CloseFigure() Return shape End Get End Property Public Sub New() Me.FillColor = Color.Aqua End Sub End Class Perhaps it would be a big improvement to allow longer arrows with corners. To provide for all possibilities they should probably consist of separate Start, Extension, Corner and Head shapes. But I'd have to think how to make the pieces join up nicely when hosted in a TableLayoutPanel. Are there any other requirements a flowchart should meet? BB

   Code bank stuff: Rapid pixel processing with FastPix (LockBits wrapper) Slide show with cross-fading Three Dimensional Text in GDI+ Pangram Tester ZoomPictureBox: 3 zooming modes and mouse drag. List Components: List all non-UI components hosted on a Form. "Shaped Form" with soft drop shadow, translucent colours -- using WPF! How to paint a polygon over a form's controls

   Reply With Quote
9. Nov 17th, 2014, 02:50 PM #9 SharkBaitNZ
   • View Profile
   • View Forum Posts
   New Member Join Date Nov 2014 Posts 3

   Re: How do i draw flow chart using VB.NET (programatically)

   I can see the logic in the code, and how one can expand the functionality to include more shapes, etc. But how would one include this in a type of toolbar in order for a user to drag and drop the shapes onto a form?

   Reply With Quote
10. Nov 17th, 2014, 06:27 PM #10 dchanceafs
    • View Profile
    • View Forum Posts
    New Member Join Date Apr 2006 Posts 5

    Re: How do i draw flow chart using VB.NET (programatically)

    Originally Posted by SharkBaitNZ I can see the logic in the code, and how one can expand the functionality to include more shapes, etc. But how would one include this in a type of toolbar in order for a user to drag and drop the shapes onto a form? I would love to see this also!

    Reply With Quote
11. Nov 17th, 2014, 08:16 PM #11 boops boops
    • View Profile
    • View Forum Posts
    PowerPoster Join Date Nov 2008 Location Holland/France Posts 3,201

    Re: How do i draw flow chart using VB.NET (programatically)

    My idea was to use the Visual Studio Form Designer to create your own simple flowcharts. The flowchart symbols all inherit from Label (indirectly, at least) so you can treat them in most respects as normal Labels. After you build the Solution with the various symbol classes, you can drag them from the Toolbox onto a Form. Making your own flowchart designer program would be be a much bigger task. The program would have to reproduce a fair bit of the functionality of the Visual Studio Designer. For example, the user must be able to position and resize the symbols, set their text, change their background color etc. A TableLayoutPanel might be helpful for lining up the symbols, but enabling the user to add/resize/delete the rows and columns the way you can in Visual Studio could prove tricky. I suspect that making the symbols "click" to one another vertically and horizontally would be easier and more flexible than using a TableLayoutPanel. Anyway, this is not something I am planning to do myself. But there is an impressive-looking WPF flowchart designer to be found in the Code Project. It might be worth learning WPF just to take advantage of it! BB

    Last edited by boops boops; Nov 17th, 2014 at 08:31 PM.

    Code bank stuff: Rapid pixel processing with FastPix (LockBits wrapper) Slide show with cross-fading Three Dimensional Text in GDI+ Pangram Tester ZoomPictureBox: 3 zooming modes and mouse drag. List Components: List all non-UI components hosted on a Form. "Shaped Form" with soft drop shadow, translucent colours -- using WPF! How to paint a polygon over a form's controls

    Reply With Quote

• Site Areas
• Settings
• Private Messages
• Subscriptions
• Who's Online
• Search Forums
• Forums Home
• Forums
• Visual Basic
  1. Visual Basic .NET
     1. CodeBank - VB.net
  2. Visual Basic 6 and Earlier
     1. CodeBank - Visual Basic 6 and earlier
  3. TwinBASIC
     1. CodeBank - TwinBASIC
  4. Universal Windows Platform and Modern Windows Experience
  5. Xamarin
  6. Mobile Development
  7. ASP, VB Script
  8. Office Development
  9. Database Development
  10. Reporting
  11. API
  12. Games and Graphics Programming
      1. Game Demos
  13. COM and ActiveX
  14. Network Programming
  15. Visual Basic FAQs
  16. Slow Chat with the Microsoft Visual Basic team
• .NET and More
  1. ASP.NET And ASP.NET Core
  2. Visual Basic .NET
  3. MVC .Net
  4. C#
  5. Microsoft Azure and Cloud Dev
  6. WPF, WCF, WF
  7. .NET Architecture and Design
  8. Silverlight
• General
  1. General Developer Forum
  2. IoT, IoE, and Maker Forum
  3. Testers and Testing
  4. Application Testing
  5. Application Deployment
  6. Linux Development
  7. General PC
  8. VBForums Coding Contests
     1. Contest Entries
  9. Code It Better
  10. Maths Forum
• Other Languages
  1. Other BASIC
  2. C and C++
  3. Java
  4. PHP
  5. XML, HTML, Javascript, Web and CSS
  6. jQuery
  7. Assembly
  8. Other Programming Languages
• VBForums CodeBank
  1. CodeBank - Visual Basic .NET
  2. CodeBank - Visual Basic 6 and earlier
  3. CodeBank - ASP / ASP.NET / Blazor / MVC / Web API
  4. CodeBank - C#
  5. CodeBank - C++
  6. CodeBank - Java / J#
  7. CodeBank - PHP
  8. Codebank - Game Programming
  9. Codebank - Mobile Development
  10. CodeBank - JavaScript
  11. Codebank - Cascading Style Sheets (CSS)
  12. CodeBank - Other
• VBForums UtilityBank
  1. UtilityBank - Utilities
  2. UtilityBank - IDE Add-Ins
  3. UtilityBank - Components
  4. UtilityBank - Tutorials
  5. UtilityBank - Other
• Projects
  1. Project Requests
  2. Project Communication Area
• Jobs
  1. Just VB Jobs
  2. Open Positions (Jobs)
  3. Looking for Work
• Community
  1. Forum Feedback
  2. General Discussion / Chit Chat
     1. World Events
  3. Forum Test Area

• 
• VBForums
• Visual Basic
• Visual Basic .NET
• How do i draw flow chart using VB.NET (programatically)

Posting Permissions

• You may not post new threads
• You may not post replies
• You may not post attachments
• You may not edit your posts

• BB code is On
• Smilies are On
• [IMG] code is On
• [VIDEO] code is On
• HTML code is Off

Forum Rules

• Contact Us
• VB Forums
• Top