Information Design Technics >> Tutorials

How to create a flowchart in Visio

The following tutorial is designed for people who are new to Visio. Visio is drawing software that helps transform concepts into a visual representation. Visio provides you with pre-defined shapes, symbols, backgrounds, and borders. Just drag and drop elements into your diagram to create a professional communication tool.

For the purposes of this tutorial, we are going to focus on how to create a flowchart diagram, and then briefly show how a wire frame for web design and an organization chart might look when drawn in Visio. But Visio also provides the tools to create many other types of diagrams, such as charts and graphs, project schedules, and web diagrams. Be sure to browse the Visio template gallery for samples.

Step 1: To open a new Visio drawing, go to the Start Menu and select Programs

Figure 1.

Step 2: Move your cursor over "Business Process" and select "Basic Flowchart"

Top >>

Navigating in Visio

Let's get familiar with the Visio interface (Figure 2).

Figure 2.

Arrow 1: The toolbars across the top of the screen are similar to other Microsoft programs such as Word and PowerPoint. If you have used these programs before, you may notice a few different functionalities, which we will explore later. Selecting Help Diagram Gallery is a good way to become familiar with the types of drawings and diagrams that can be created in Visio.

Arrow 2: The left side of the screen shows the menus specific to the type of diagram you are creating. In this case we see:

Arrow Shapes
Backgrounds
Basic Flowchart Shapes
Borders and Titles

Arrow 3: the center of the screen shows the diagram workspace, which includes the actual diagram page as well as some blank space adjacent to the page.

Top >>

Creating a new diagram

Step 1: Select a shape from the Shapes menu, and drag it to the workspace.

Step 2: On the toolbar, click the connector tool (Figure 3). The connector tool will appear highlighted, and will remain active until it is deselected.

Figure 3.

Step 3: With the first shape still selected, drag a second shape to the workspace. The shapes are connected automatically when the connector tool is turned on.

Step 4: Continue adding shapes until you have enough to include all of the steps in the business process being outlined. The example on the next page illustrates a ten step process (Figure 4).

Step 5: Shapes can be resized or moved, and the connectors will remain intact. At this point, your diagram should look something like the following example (Figure 4).

Figure 4.

Adding text to a diagram and formatting the text

Step 1: Double click on a shape to enter text. There is no need to create a text box (as required with Microsoft Word or PowerPoint shapes); Visio does this automatically for you (Figure 5).

Step 2: The default format for text in Visio is Arial 8-point font. The most efficient way to format is to enter all of the text, then format all of the shapes at once. To do this, click on one of the shapes to select it. Hold down the Shift key, and click on the other shapes you wish to format (Figure 6).

Figure 5. Additing text to a diagram.

Figure 6. Select text to format

Top >>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

How to creat a Site Map in Visio

Wire-Frames: How to create 5 tab-linked navigation

Step 1: Navigation Tab Template

Once you know how your navigation will work, where it will be on the page and if you will use tabs, you can use this template to create navigational part of the page.

Example 1. Creating Navigation Tab Template.

Create a New page
Open the document stencil by clicking on File > Shapes > Show Document Stencil
Drag the Tab shape from the page to the document stencil and name it accordantly

You now have a shape in the template. To get it working as your navigational shape you need to have a few other pages developed. In my example I have a page called Tab 1which is the home page, Tab 2, Tab 3, Tab 4 and Tab 5.

Step 2: Linking the pages to the template

Now that you have the navigation tabs, double click it to edit it
Link the tabs or text in your navigation to their corresponding wireframe pages by clicking on the tab or text you want to link then click on ctrl+k
In the Hyperlinks dialogue box click on the second Browse button which is under Insert > Hyperlinks
From the Page drop down select the page to link to then click OK

Example 2. Linking the pages to the templat.

Click OK again then repeat steps 2-4 until all your links are configured
Save the document stencil shape

You should now be back at the page you left when you went to edit the tabbed navigation.

Top >>

			contact me \| site map



Information Design Technics >> Tutorials How to create a flowchart in Visio The following tutorial is designed for people who are new to Visio. Visio is drawing software that helps transform concepts into a visual representation. Visio provides you with pre-defined shapes, symbols, backgrounds, and borders. Just drag and drop elements into your diagram to create a professional communication tool. For the purposes of this tutorial, we are going to focus on how to create a flowchart diagram, and then briefly show how a wire frame for web design and an organization chart might look when drawn in Visio. But Visio also provides the tools to create many other types of diagrams, such as charts and graphs, project schedules, and web diagrams. Be sure to browse the Visio template gallery for samples. Step 1: To open a new Visio drawing, go to the Start Menu and select Programs Figure 1. Step 2: Move your cursor over "Business Process" and select "Basic Flowchart" Top >> Navigating in Visio Let's get familiar with the Visio interface (Figure 2). Figure 2. Arrow 1: The toolbars across the top of the screen are similar to other Microsoft programs such as Word and PowerPoint. If you have used these programs before, you may notice a few different functionalities, which we will explore later. Selecting Help Diagram Gallery is a good way to become familiar with the types of drawings and diagrams that can be created in Visio. Arrow 2: The left side of the screen shows the menus specific to the type of diagram you are creating. In this case we see: Arrow Shapes Backgrounds Basic Flowchart Shapes Borders and Titles Arrow 3: the center of the screen shows the diagram workspace, which includes the actual diagram page as well as some blank space adjacent to the page. Top >> Creating a new diagram Step 1: Select a shape from the Shapes menu, and drag it to the workspace. Step 2: On the toolbar, click the connector tool (Figure 3). The connector tool will appear highlighted, and will remain active until it is deselected. Figure 3. Step 3: With the first shape still selected, drag a second shape to the workspace. The shapes are connected automatically when the connector tool is turned on. Step 4: Continue adding shapes until you have enough to include all of the steps in the business process being outlined. The example on the next page illustrates a ten step process (Figure 4). Step 5: Shapes can be resized or moved, and the connectors will remain intact. At this point, your diagram should look something like the following example (Figure 4). Figure 4. Adding text to a diagram and formatting the text Step 1: Double click on a shape to enter text. There is no need to create a text box (as required with Microsoft Word or PowerPoint shapes); Visio does this automatically for you (Figure 5). Step 2: The default format for text in Visio is Arial 8-point font. The most efficient way to format is to enter all of the text, then format all of the shapes at once. To do this, click on one of the shapes to select it. Hold down the Shift key, and click on the other shapes you wish to format (Figure 6). Figure 5. Additing text to a diagram. Figure 6. Select text to format Top >> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ How to creat a Site Map in Visio Wire-Frames: How to create 5 tab-linked navigation Step 1: Navigation Tab Template Once you know how your navigation will work, where it will be on the page and if you will use tabs, you can use this template to create navigational part of the page. Example 1. Creating Navigation Tab Template. Create a New page Open the document stencil by clicking on File > Shapes > Show Document Stencil Drag the Tab shape from the page to the document stencil and name it accordantly You now have a shape in the template. To get it working as your navigational shape you need to have a few other pages developed. In my example I have a page called Tab 1which is the home page, Tab 2, Tab 3, Tab 4 and Tab 5. Step 2: Linking the pages to the template Now that you have the navigation tabs, double click it to edit it Link the tabs or text in your navigation to their corresponding wireframe pages by clicking on the tab or text you want to link then click on ctrl+k In the Hyperlinks dialogue box click on the second Browse button which is under Insert > Hyperlinks From the Page drop down select the page to link to then click OK Example 2. Linking the pages to the templat. Click OK again then repeat steps 2-4 until all your links are configured Save the document stencil shape You should now be back at the page you left when you went to edit the tabbed navigation. Top >> home >> contact me >> site map >> references >>