Creating a Visio diagram for Resource/Room Booking

The first step requires you to create your diagram in Microsoft Visio. Depending on what you are trying to set up, you can create a layout using the different shapes and objects that Visio provides. This is the method we use for both our Room and Resource booking components which can be used for desks, hire cars, parking spaces or anything which needs to be "booked".

1. When in Visio, select "Blank Drawing" and select the metrics you want to use.
   
   

2. You will now need to enable the "developer" tab with Visio. To do this, click on 'File', 'Options'.

    

   

    

3. Within the options, select 'Customize Ribbon'. On the right hand side, you will then see a check box for 'Developer'. This needs to be ticked.
   
   
4. Once ticked, select Ok at the bottom of the page. You will need this tab available for later.
   
   
5. To suit the layout of the room I am creating, I'm going to change the orientation of my canvas to landscape by clicking on the "design" tab and choosing the orientation button.
   
   

6. On the left hand side, you will see a section for 'Shapes' with an option to choose 'More shapes'.

    

   

    

7. By clicking on 'more shapes' all of my options will appear for objects that I want to use for my diagram. As I will be creating a diagram of a floor plan, I am going to select the 'wall, doors and windows' tab from the 'Maps and Floor Plans' option.
   
   
8. Now I have access these shapes appears on the left hand side
   
   
9. To build my room, I drag the shapes from the left hand side onto my canvas. I can then drag/re-size them to fit within my diagram.
   
   
10. I can then continue to add additional shapes such as desks, doors and windows to make the diagram more accurate. Visio allows you to go into great detail so you can even add furniture, plants, computers etc
    
    
11. I'm then going to add my room titles so they can be identified by everyone in the business. To add a title, select the shape you want to add a title to and then start typing.
    
    
12. By clicking on the text box that has appeared, you can then change the size of the text by opening the 'Home' tab (similar to other Office products - use the font size icons to change the size of the text).
    
    
13. If you want your text to appear in a different location, you will need to use the Text Box button which can be found by going to the Insert tab.
    
    

14. Now that my diagram has been created, I need to add an additional shape to create the clickable areas within the objects I want to make clickable. This method can be used to make a room clickable or something smaller like a desk. From the Developer tab, select 'Rectangle'.

     

    

15. Using the mouse, draw a rectangle over the area you want to make clickable. If the shape of your room is not a rectangle, you can select the drop down and use a different option to highlight the area such as 'pencil'.

     

    

16. With the rectangle still selected, on the developer tab select 'Shape Name'.
    
    
17. You then need to name your shape in the following format. The pipe command ( | ) is being used to split these up. Please see the details for both Rooms & Resources below:
    
     
    1. if its a Room: Roombox|ID|Title|Resource Email Address
       1. Roombox: This needs to be Inputted for all shapes.
       2. ID: Assign a number to the shape. As this is my first shape, I will give it the ID "1", my second shape will have an idea numbered "2"
       3. Title: This is the title of the room.
       4. Resource Email address: This is the mail address for the room you are creating
    2. if its a Resource: Resource|Title
       1. Resource: This needs to be inputted for all shapes. 
       2. Title: This title needs to match the entry of the desk name for example "Desk 1" 

18. I will then repeat this step for my two other rooms. Once I've created a clickable shape on all rooms, I am now going to export the file as an SVG. Firstly, I recommend saving the file as it is now so you can go back to it if any mistakes have been made.

19. Now that the file has been saved, click on the 'File' tab and select the 'Export' option.

20. Choose "Change File Type" and save it as an SVG file