It’s being over a year since we launched our Confluence diagram plugin and the JIRA diagramming plugin. Thousands of Confluence and JIRA users have benefited by using our collaborative diagramming plugins. If you’re not one of those users now you have a great opportunity to try our plugins and get your questions answered in person, because we are attending of Atlassian Summit 2012 which is happening on 30 May to 1 June. We are sponsoring the event and we’ll be there for the full 3 days of training and presentations which will help current and future Atlassian users get more from the entire ecosystem.

Creately is sponsoring Atlassian summit 2012

Why You Should Attend Atlassian Summit 2012

Atlassian have kindly put together these points if you need some help convincing your boss. As mentioned in the page, 92.3% users said that the 2011 conference met their objective and Atlassian are doing their level best to make it 100% this year. Also you get to meet up and learn how to add beautiful diagrams in Confluence and JIRA. During the event we’ll be revealing new enhancements to Creately for Confluence and Creately for JIRA – making the diagramming experience altogether better on the Atlassian platforms. We’ll be posting more announcements here as we make them.

Promotional Code to Get 10% Discount

If you’re interested in coming we can sweeten the deal with this coupon: atlsum12spn10 which will give you a 10% discount off the ticket price. But be quick as there are only 88 tickets left as I write this

This summit will be the biggest ever so far with 6 marquee speakers and lots of training sessions. You can learn how to make the best use of Atlassian products and you’ll get to meet plugin vendors like us that enhance these products. We’d love to see you at the event and if you do attend please stop by the booth for a chat.

This posts was originally published at Creately blog. Click Creately Sponsoring Atlassian Summit 2012 & A Promotional Code to Get 10% Discount to visit the blog post. Visit the Creately website to learn more about Online Diagramming Tools.

Three weeks ago we had the beta release of real-time collaboration in Creately and the feedback was amazing. We are really privileged to have committed users like you who are eager to help out by giving feedback. So after a very tiring few weeks, we are ready to roll it out to everyone by default.

After this release every Creately user will have real-time collaboration enabled for them. So share a diagram with your friends and experience real-time for yourself. With teams in Australia and Sri Lanka we regularly have online meetings and we are already seeing how beneficial real-time is. It’s amazing how easy it is to make decisions or give your opinion when you can visualize what others want in real-time. Give it a try and see for yourself.

Real-time collaboration enables you to see the changes made by others instantly

Power Up Meetings Using Real-Time Collaboration

When you are trying to get a point across nothing helps like having a diagram to explain what you mean. A picture does speak a thousand words. So try coupling Creately with your online meetings on Skype, Webex or IM. With Creately’s real-time collaboration everyone will be on the same page literally. Having Creately by your side when you are discussing a point over the phone is the next best thing to everyone on the call being in the same room.

Imagine how this transforms the process of trying to agree on a project schedule over a skype call. Having the instantly updatable version of a Gantt Chart on Creately available to all parties, you’d get the point across much faster, and stakeholders can modify these tasks set timelines, add dependencies etc. As everyone sees the changes, the meeting gets closed off faster.

Other obvious use-cases include defining process flows using flowcharts, brainstorming with mind-maps, designing websites using wire-frames. The possibilities are endless.

Taking Diagramming to the Next Level

Our core aim is help users to communicate their ideas visually and enable great collaboration within teams. Real time collaboration is a core piece of this aim. And so is helping people get started quickly with the Creately diagram community. It provides users with thousands of diagram templates and features like projects as libraries enable easy sharing among users. Now with real-time we made collaboration easy and simple, so you can get things done faster.

How will you use the new Realtime Collaboration features?

Let us know. We love using it side by side with Skype or Webex for brainstorming, meeting notes and to hammer out finer points in a software spec. Let us know at support@creately.com or tweet us at @creately.

Now go and have fun with real-time collaboration!

 

 

This posts was originally published at Creately blog. Click Real-Time Collaboration is Live ! to visit the blog post. Visit the Creately website to learn more about Online Diagramming Tools.

If you thought online collaboration is awesome wait until you try real-time collaboration. This was our most requested feature with hundreds of requests, so I’m sure this will make lot of you happy. This takes diagramming to a whole new level and will definitely improve the productivity of teams. Multiple people can work together in a diagram and everyone can see the changes others make in real-time. This makes it possible to give instant feedback and makes it that much easier to make decisions. The marketing team used it for one of our meetings and I just loved it and I’m sure you will love real-time collaboration too.

Get things done faster with real-time collaboration

It’s Still in Beta, But Don’t Let That Stop You

We’re fine tuning the process so it isn’t available by default. But we understand that some of you just can’t wait to try new features. If you are one of those eager ones you can manually enable real-time collaboration in Creately. Go to the “My Profile” tab in your Creately account. There you will see a check box like below. Check the box, log off and log-in to use real-time collaboration.

Enable real-time manually using the check box

Benefits of Real Time Collaboration

It’s fun, but there are many benefits to using real-time collaboration.

• Saves time – No need for back and forth email communications and unnecessary meetings. Work on the diagram together and see the changes made by others. Instantly make decisions in agreeable to everyone.
• Reduce costs – People on different locations can work together in real-time. Ideal tool if you have employees working from home or sub contractors working elsewhere in the world. Work with customers right inside your office and save time and travelling costs.
• No multiple versions - Now when you are collaborating with another colleague or friend at the same time, you both wont end up with two different versions of the diagram since you both are seeing each others changes while you are making it. Saves you from much trouble.
• No conflicts in changes - Since there wont be multiple versions there wont be changes to the documents that conflict with each other. When you are real-time collaborating you can make decisions as you are changing the diagram talking to your collaborator. This will avoid conflicts in changes. later.
• Works on Desktop too – It doesn’t matter if you are using Creately Desktop. The greatness of real-time will come to you soon as well. All you need to do is make sure you have internet when opening the diagram and you will be collaborating real-time!

Your Thoughts about Real Time Collaboration

So like I said, we are in Beta and we really want to know what you guys think about this new feature. We get really excited when we see a mail from you If you have any ideas or suggestions please drop us a mail at support@creately.com . If you come across any problems, do let us know and we will quickly look into it. In the meantime enjoy real-time collaboration !.

This posts was originally published at Creately blog. Click Creately Real-Time Collaboration for Diagramming to visit the blog post. Visit the Creately website to learn more about Online Diagramming Tools.

Critical path method is one of the frequently used techniques in project planning. A typical project has many tasks involving lots of different people so project managers have a hard time keeping track of things. It is far too easy for certain activities to fall behind and get lost in the sea of endless jobs. These forgotten tasks and errors in planning can severely affect the time scale of the whole project. A late project will cost money and lead to unhappy customers and bosses. Critical path method helps managers figure out two very important things. How long it will take to complete the project and what are the critical tasks that must be completed before starting other dependent tasks.

The best way for project managers to avoid poor planning is to incorporate the critical path method in their diagrams. Having this as a diagram makes it easy to visualize the important tasks of a project. This is really helpful for managers and makes it easier for the project team to visualize and plan their work accordingly. The main aim is to produce a visual of the entire project broken down into smaller activities which are vital to the completion of the entire project.

All of the activities which are added onto the network diagram are ones which have to be completed on time. By adding them on to a diagram it is possible to see how long each section will take. This is essential when it comes to predicting the timescale of the project. The benefits of applying each of the set time critical and essential activities to a diagram include:

• Predicating the time each activity will take and offering a timescale to the client
• Seeing how each section is important to the progress of the rest of the plan
• Assigning the right team and department to their corresponding tasks

It is important to note that at the beginning of the project time taken for each task is the estimated time. During the project the estimated time might vary based on different factors. In such cases it is important to revisit your diagram and again do a critical path analysis. Experienced developers are usually accurate with their estimations so this isn’t something that will happen frequently. How to find the Critical Path

It is essential when planning any project to calculate how long each section will take. This helps to establish the start date of any activities which cannot start until the one which precedes it has been completed.  The calculations also determine the latest date that the activity needs to be completed by in order for the next part to begin. Everything is closely tied together and without a diagram it can be very easy for everyone to lose sight of their goals. Perhaps more importantly the diagram helps individuals to see the effects down the line if they do not stick to the plan at hand.

The network diagrams can be very helpful in this type of time management. Once you have all of the necessary activities worked out and added to the diagram you can use the critical path method to find the optimal way to finish those tasks.

Perhaps the simplest way of using the critical path method, once you have the earliest and latest start days, is to work backwards. Obviously the last activity is on the critical path as without this section the project will not be completed. You then work backwards throughout each of the activities to locate the line of activities which do not have any float days available to them. However it is much easier to create a table indicating the activity, preceding task and time duration and draw the network diagram based on that.

A table to do critical path analysis

Below is a network diagram drawn using the above table.

The network diagram with the critical path highlighted

Critical Path Method Helps to Identify Your Days of Float

The float is worked out by how long the activity takes to complete and how many days are available between the start date of the activity and the one which follows directly afterwards. So if a task will take three days to complete and only has three days available from the start to the following activity this means that there is no float available, therefore it is a critical task. On the other hand float days would be available if you have a task which only took one day to complete but there are four days until the start of the following task.  Therefore this task is not time critical and it can be slightly delayed if necessary.

The critical path is the activities which have to be completed on time, and if they are not the whole of the project is put in jeopardy.  When you are designing your diagram it is a good idea to highlight the vital sections of the entire plan to show that they are of utmost importance to the successful completion of the project.

Using Software to do Critical Path Analysis

Drawing nodes, tables and arrows can be a tricky task. Especially when it comes to connecting nodes with arrows and giving direction to the arrows. In such situations you can use a diagram software like Creately to draw diagrams. It provides an intuitive interface and has some network diagram templates to get you started quickly.

The Critical path helps to identify days where it is possible to spend extra time on non-critical parts of the entire project too. So if there are delays in these areas it is still possible to finish on time without anyone else being affected.

Work Together to Finish On Time Based on Your Plan

A complex project has many tasks and estimation has to be done by different people. In such cases it is helpful to use the critical path method in collaboration with your team members. Creately is a web based application that supports collaboration. You can share your diagram with your team members and let them modify there estimates and dependencies. Once you have that input you can use that data and to the critical path analysis.

References

Critical Path Method Scheduling ( YouTube Video )

 

This posts was originally published at Creately blog. Click Importance of critical path method in project planing to visit the blog post. Visit the Creately website to learn more about Online Diagramming Tools.

When it comes to classroom education graphic organizers play a very important role. KWL charts are one of the most frequently used graphic organizer types. There are hundreds of teachers using Creately so we decided to give a helping hand by adding some KWL chart examples. We added some color to them to make it more interesting for kids. Click on the images to use them as templates.

KWL chart template with some colors

Below is a colorful KWL chart template with an image on top to make it look more attractive. Just click on the image to use it as a template. You can modify it online or download for later use.

Colorful KWL chart template ( click to use as a template )

 

KWL Diagram Template with Stars

Another attractive KWL diagram template. One color background but with stars to make it more attractive.

KWL diagram template with stars ( click to use as a template )

 

Colorful KWL Chart Template

Below is another colorful KWL table template.

KWL example template with beautiful colors

 

 

KWL Chart Template in A4 Format

Below is a very basic KWL chart template which is optimized to fit into a A4 sheet. Click on the image to open it in a new tab window. In that new window click “Use as Template” to modify it online or hover the mouse over the image to get the toolbar with download button.

KWL diagram template optimized for A4 papers ( click to use as template )

 

Using KWL Tables in the Classroom

KWL charts or tables are one of the best graphic organizers designed to help in learning. They are designed to encourage reading and also to refresh your knowledge about a certain topic. The idea was introduced by Donna Ogle in 1986 and has been very popular ever since.

You can download any of the KWL examples below and use in in the classroom. Creately also allows to modify and collaborate on your KWL diagrams online. This is great for group assignments as multiple people can work on a single KWL diagram. Even the teacher can monitor or contribute to the diagram as a collaborator. Creately do provide 50% discount for educational institutes so make sure take advantage of the deal and the powerful diagram software.

This posts was originally published at Creately blog. Click Draw Kwl Charts with Creately to visit the blog post. Visit the Creately website to learn more about Online Diagramming Tools.

When planning a project it is important to learn about the internal and external factors that can affect the project. There are some excellent strategic planning methods that you can use analyse all these factors. SWOT analysis and PEST analysis are two of the most frequently used planning methods. Below is a brief introduction to both methods and a comparison of SWOT analysis vs PEST analysis.

What is SWOT Analysis ?

SWOT when broken down simply means analysing the:

• Strengths – The advantages you have over the competition concerning this project.
• Weaknesses – The disadvantages you have internally compared with your competitors.
• Opportunities – Current external trends which are waiting to be taken advantage of.
• Threats – External movements which may cause a problem and have a negative impact on your business.

Sometimes SWOT is referred to as SLOT, where weaknesses are names as liabilities. By working through each of these points it is possible to identify any internal disadvantages or advantages which could benefit or hinder the outcome of a planned project. In addition to evaluating the state internally this method is also able to identify the external factors which could also make a difference to the success or failure of a project. Creately has an excellent collection of SWOT analysis templates which you can download for free or modify online.

One of many SWOT analysis templates available at Creately ( click to use at template )

Using the Information

By knowing this information it can be possible to plan a successful project that is ready to work around certain problems effectively and to avoid failure. It is a good idea and excellent practice to work through the SWOT Analysis with your team in the early stages of project planning. Brainstorming is a great way of introducing all the relevant internal and external factors for each section of the analysis.

What is PEST Analysis ?

PEST stands for the analysis of the external factors which is beneficial when conducting research before beginning a new project or to help conduct market research. These factors are:

• Political – Laws, global issues, legislation and regulations which may have an effect on your business either immediately or in the future.
• Economic – Taxes, interest rates, inflation, the stock markets and consumer confidence all need to be taken into account.
• Social – The changes in lifestyle and buying trends, media, major events, ethics, advertising and publicity factors.
• Technological – Innovations, access to technology, licencing and patents, manufacturing, research funding, global communications.

Pest can also be known as PESTLE which includes other factors such as:

• Legal – Legislation which have been proposed and may come into effect and any passed legislation’s.
• Environmental – Environmental issues either locally or globally and their social and political factors.

Unlike SWOT this strategy is more directly aimed at the external macro environmental factors that might be affecting the position of your business, the reasons behind growth or decline in the market and also identify new directions for the business as a whole. Creately has some excellent PEST analysis templates for you to get started instantly.

PEST analysis template available at Creately ( click to use as template )

Advantages and Disadvantages of SWOT Analysis Vs PEST Analysis

The advantage and disadvantages of SWOT analysis is that it is simple to come up with a list but far too easy to miss important external factors. Coming up with the results of each factor is not enough, for the SWOT to be successful it is essential to carry out further analysis of all the possible threats and disadvantages to make sure that they have been planned for in advance.
The advantages and disadvantages of PEST analysis is that while the external factors are looked at closely there are no internal evaluations carried out. Due to the advantages and the disadvantages of using either one or the other methods it is a good idea to combine the two to help provide you with the best analysis. It is good practice to perform the PEST and then use the results in the opportunities and threat section of the SWOT.

It is best practice to do the PEST analysis and include the results in opportunities and threats section in SWOT analysis

Working as a Team for the Benefit of a Project

When teams are not in the same building it can be difficult to get together and brainstorm effectively about a project. This could lead to vital information getting neglected, thus damaging the project. You can easily avoid this issue by using the collaboration facilities provided by Creately. The project manager can start drawing the SWOT and PEST analysis and invited other team member to contribute to the diagram. This allows for a larger contribution made from all relevant departments and team members which reduces the possibility of important information being missed.

The results which have been recorded on your Creately SWOT template can then be used to plan a project carefully and overcoming problems which could cause significant issues to the positive outcome of the project. Being prepared for all eventualities is vital in business, which is why SWOT and PEST analysis is so important.

Remember it is never enough to simply have the information to hand, what is vital is the way that the analysis is used in order to boost profits, make sure a project is successful and to identify areas of opportunity which could transform the business for the better.

References

Pestle and Swot Analysis [Accessed 23/02/12]

This posts was originally published at Creately blog. Click SWOT Analysis Vs PEST Analysis and When to Use Them to visit the blog post. Visit the Creately website to learn more about Online Diagramming Tools.

SWOT analysis templates are one of the easiest ways to do a SWOT analysis of your project, business or the company. The templates are already done so you only have to fill in the details. Different color patterns, headings etc available in these template makes it very easy to come up with very professional SWOT diagrams in minutes. Mentioned below are some SWOT analysis examples available to you at Creately. This is an ongoing effort to educate our users about the thousands of diagram templates available in the Creately diagramming community.

All the SWOT diagram templates shown below can be easily reused as template. Click on the image to open the diagram in a new window and then click the “Use as Template” button.

Simple SWOT Analysis Template

Simple SWOT analysis template ( click to use as template )

A very simple template arranged as a 2 x 2 matrix. This is one of the most popular forms for presenting SWOT analysis.

Colorful SWOT Analysis Templates

A SWOT Analysis Example with a bit of color ( click to use as template )

Another 2 x 2 SWOT analysis example but with a bit of color. Colors can be used to highlight different sections and also to emphasize on some sections. There are many more colorful SWOT analysis templates available at Creately.

SWOT Analysis Example using Circles

Colorful SWOT analysis example made with circles ( click to use as template )

Another colorful template but this time with circles for each attributed. If the number of items are low then this might be a better fit for your SWOT diagram.

SWOT Analysis Template with Actual Data

A SWOT analysis template of a NGO ( click to use as template )

Above is a SWOT analysis template with actual data. It discusses the strengths, weaknesses, opportunities and threats faced by a NGO. You can easily modify the data so feel free to use this as a template.

There are many more SWOT analysis templates. Below are some of the most popular ones in the community.

• SWOT analysis diagram of Apple
• Aviation industry SWOT template
• SWOT Example of tourism industry
• SWOT Analysis of Nokia
• SWOT analysis template of Creately

Click here to check out all Creately SWOT analysis templates >>

SWOT analysis vs SLOT analysis

Some of our users had some confusions about SWOT vs SLOT analysis template. They are both the same. The only difference is that weaknesses are named as liabilities.

SWOT – Strengths, Weaknesses, Opportunities, Threats

SLOT – Strengths, Liabilities, Opportunities, Threats

This posts was originally published at Creately blog. Click SWOT Analysis Templates and Examples by Creately to visit the blog post. Visit the Creately website to learn more about Online Diagramming Tools.

It’s been only eight months since we launched our Confluence Diagrams plugin, and already thousands of users are using its powerful features to draw flowcharts, organizational charts, wire-frames, mock-ups and many more diagram types. That was just the beginning!

Now we are excited to introduce two powerful features that will take your Confluence diagrams usage to the next level.

Clickable and Zoom-able Confluence Diagrams Using Creately Viewer

The new Creately diagram viewer addresses two problems faced by our users when adding diagrams in Confluence. Adding clickable diagrams and adding large diagrams to Confluence pages. Adding large images will grow the page horizontally and the page will loose its styling and you will be left with an unwieldy page. There was support for clickable diagrams, but only inside the diagram editor.

The new Creately diagram viewer solves this problem by adding a HTML widget to the Confluence page. It will look like a normal image in your Confluence page but once you hover over the image you will see the Creately toolbar which shows the links in the diagram, zooming bar, download button and social sharing buttons. You also has the ability to set the size of the player so it will fit perfectly to your Confluence page. Below video show the power of the Creately diagram viewer and a clickable diagram examples.

The video shows an example of a UI mock-up, but there are plenty more Confluence diagrams where this feature will be very useful. Some of them include

• Multi level UML and Database design diagrams
• Any large diagram ( zoom and panning features )
• Linked flowcharts
• Gantt charts where task blocks can be linked to Confluence pages
• Site maps with pages linked to mock-ups of those pages
• Clickable UI mock-ups

One Click Access to 1000′s of Templates

We also integrated the Confluence diagram plugin with our online diagram template library. This means you can access thousands of high quality diagram templates and over a million diagram examples. This fully searchable large online community is constantly updated and will definitely cut down the time you spend on drawing Confluence diagrams.

Creately Community browser gives you access the thousands of templates to draw Confluence diagrams faster

You can get the latest version of the Confluence diagram plugin from the plugin exchange. Hope you enjoy using the features as much as we enjoyed building them! .

This posts was originally published at Creately blog. Click Draw Confluence charts with Creately to visit the blog post. Visit the Creately website to learn more about Online Diagramming Tools.

Wire-frames function as a bridge between raw creative thoughts and the final product. Think of wire-frames as architectural blueprints for a building and you’ll understand why it is a critical tool in just about any development project. The fact is, constructing a decent, structurally sound building without using blueprints is inconceivable, and no sane real estate developer will partner with a construction outfit that does not use blueprints. Considering the vast number of wire-frame benefits, you should ignore them at your peril.

Similarly, projects such as software and web development rely on wire-frames to visually represent an envisioned product or product component. This is because wire-frames are much better than anything else at communicating the components, processes, and various relationships within a given system such as a website or a software application. Without wire-framing, any of these unfavorable scenarios could arise:

• The stage at which stakeholders plan and strategize about a project will unnecessarily be handicapped or delayed.
• Developers will not be able to account for all expected outcomes when a system component is being used.
• Poorly laid out interfaces result to substantial revision costs.

These are some of the reasons why competent project managers and professional developers insist on integrating wire-frames into the development process.

Wire-frames Explained

In its basic form, a wire-frame can be as simple as a manually drawn diagram that provides a visual representation of a system or a process. The visual detail need not be extensive as long as all the key elements are represented. Hence, a wire-frame is often referred to as a skeleton or an outline. At the other extreme, there are wire-framing software that are capable of producing highly detailed approximations of the product or application being envisioned.

A wire-frame example ( click to view larger image )

Wire-frames form the basis of creating websites and final software. They give you an idea about the space of the web page, positioning of elements and the navigation of the website. UI mock-ups are the next stage of the process, they give you and idea of the colors, fonts and images to be used in the final product. With Creately you can draw wire-frames and create the corresponding UI mock-up as well. This all in one solution makes it a very handy tool to have.

A UI mock-up done using Creately with color, fonts and supporting images

Wire-frame Benefits

Whether manually drawn or created using advanced collaborative services, wire-frames help create a product model that can be used by all stakeholders–managers, designers, developers, customers, and users–to tweak, re-layout or re-design different system elements more efficiently.

And there lies the advantages of using wire-frames. To be more specific, there are three main benefits:

1. First, wire-frames make it easy for a complete system mock-up to be produced. Based on customer specifications, a top level UI mockup can easily be created, which can then be used by both customers and developers as the basis for integrating details, features, and other enhancements. Early in the development process, wire-frames can be used as the platform for testing and feedback, allowing for the product to be refined easily. For example, how copywriters should craft and display website copy can be discerned much easier if there is a wire-frame that shows the positions and nature of the other display elements such as images, frames, buttons, and text links. Meanwhile, customers can use UI mockups to make refinements according to their branding or corporate image.
2. Second, wire-frames make it easier for developers to organize and establish the relationships among system or product components. In a mobile application for example, screen transitions resulting from user interaction with buttons or other interactive elements can easily be plotted and perfected. When this or that element is tapped, for example, this animation is played. This sounds simple but interactivity and navigation often spell the success or failure of a new product. Great products are those that are highly intuitive and closely predict user behavior. In the absence of wire-frames, the relationships among different components of a system are difficult to visualize, which increases the risk of launching a product with poorly designed interactivity.

   A simple wire-frame of a mobile application

3. Finally, wire-frames provide a more cost-efficient way of making changes. By creating wire-frames first, developers ultimately conserve time, money and effort compared with immediately creating actual products such as a web page. This is the value offered by diagramming applications such as Creately’s online service. By encouraging close coordination among all the stakeholders of a planned product, all the necessary features can be integrated more easily and quickly through a collaboratively built wireframe. This effectively avoids costly revisions that would likely have arisen had the development team bypassed the wire-framing phase.

Conclusion

Obviously, wire-framing has become a critical stage in the development process. That is, an initial product or system design will almost always require various changes after being reviewed by stakeholders. For example, customers who employ a website development outfit will surely demand tweaks once a mockup of the website is submitted for review. Just imagine the wasted development hours if actual web pages were developed and a major revamp were to be required by the customer. When wire-frames are used, implementing changes will not hurt at all since the real product is yet to be developed anyway. It will also help save time, especially if the development team is on a tight schedule. Contrary to the initial perception of some developers, immediately working on the actual product will not make things easier or faster for the simple reason that change requests are inevitable. By creating a wire-frame, problems, issues or challenges can be detected and addressed earlier in the development stage.

Given these wire-frame benefits, wire-framing should be conducted at the onset of development and should involve the collaborative effort of customers and product developers. This way, how the product is envisioned by the customer can easily be translated into reality by the technical and creative inputs of developers. To be sure, wire-frames are not perfect simply because they are not meant to be so. Instead, they are possibly the most cost-effective way of refining a product into perfection.

References

• What is Wireframing? as published on the experience solutions website
• The 7 Wonders of Wireframes as published on the Boagworld website
• The Importance of Wireframing as published on the 45royale inc. website
• The Benefits of Wireframing Design by Brad Shorr as published on the Six Revisions website

This posts was originally published at Creately blog. Click Benefits of Using Wire-Frames to visit the blog post. Visit the Creately website to learn more about Online Diagramming Tools.

Last week we announced that Creately is now available to Fogbugz Ondemand users. This how-to post covers the following topics:

• Adding the Creately for Fogbugz On Demand plugin to your Fogbugz site
• Adding a Diagram to Your Cases
• How to configure Creately for Fogbugz On Demand plugin
• Updating your Creately for Fogbugz license after the trial

We’ll jump right in to it.

Adding the Creately for Fogbugz On Demand plugin to your Fogbugz site

The process to install Creately for Fogbugz can be a little daunting unless you’re a seasoned Fogbugz plugin installer and so I thought I’d put together this little how to make things easier. There are 2 options for the installation.

The first option is to use our semi-automated installer. Just visit: http://creately.com/diagram-products#fogbugz and click the “Install OnDemand” button which will ask you for the site name/URL of your Fogbugz On Demand server. Enter the details and click “Install Creately”, you’ll be redirected to your Fogbugz server and asked to confirm the installation. All done, you can start adding diagrams to your cases right away.

The second option is to add the plugin manually, to do that follow the steps below.

1. To start with you need to login to your Fogbugz Ondemand site.
2. Once that’s done you need to open the “Admin” menu and select the “Plugins” option.

   Select the Plugin option from the Admin menu

3. On the new page select the link at the bottom of the list titled: “View All Available Plugins”.

   Click to view all the available plugins

4. In the list that appears of all the plugins find the entry for “Creately for Fogbugz”. On new Fogbugz Ondemand servers the listing is about 14 items down from the top.

   The listing for Creately for Fogbugz

5. At the start of the listing you’ll see the  current installation status of the plugin. If it isn’t installed it will say “No”. Click the word “No” and a popup will appear asking you to confirm that you want to install the Creately for Fogbugz plugin, check the checkbox and click “OK”.

   Installing Creately in Fogbugz on demand

6. After you click “OK” the plugin installation status will change to “Yes”. The plugin is now ready to be used and you can start a new diagram in a case straight away. If this is the first time you have installed the plugin you’ll receive a 14 day free trial for you to explore the plugin.

   Creately diagramming plugin installed in Fogbugz

Adding a Diagram to Your Cases

Once installed the easiest way to try the plugin is to click the “List Cases” button at the top of the page and then pick a case and edit it. On the edit screen below the title and the case meta data you’ll see the “Insert/Edit Creately Diagram” button:

Click to insert or edit a Creately Diagram

Clicking the button will start the editor, if this is the first diagram for the case the editor will just load but if there is already a diagram on a case you’ll be offered the option to edit a current diagram or start a new one.

Once you’ve finished editing your diagram you can insert it into the case and return to the case by clicking the “Exit” button in the top left hand corner

Once finished with your diagram click the Exit button to return to Fogbugz

How to Configure Creately for Fogbugz On Demand plugin

Follow these steps if you need to view or edit the configuration of the plugin or add a license that you’ve purchase after your trial.

1. Once again open the Fogbugz plugin listing

   Select the Plugin option from the Admin menu

2. You’ll see the Creately for Fogbugz plugin in the activated plugin listing

   Creately diagramming plugin installed in Fogbugz

3. Click the configure “Edit” button to load the config edit page

   Click to edit the plugin config

4. On the configure page you can change the settings for the following:
1. Which shape libraries open by default when editing a diagram
2. Enabling which of your users can edit diagrams
3. Download the error log file to send to support upon errors
4. Update your subscription license

Updating your Creately for Fogbugz License after the trial

Once your 14 day trial of Creately for Fogbugz has expired you may like to purchase a license for your Creately for Fogbugz Ondemand installation. Licenses include maintenance with upgrades and email technical support. Licenses only need to be purchased for the number of diagram editors that you require and don’t have to be purchased for all your Fogbugz users. The licenses can be paid on a monthly or annual basis – if paying annually you will save 16% compared to paying monthly over a year.

Follow the steps above to view the plugin configuration page. Once on the config page look on the right hand side and select your preferred license period and the number of users then click the “Activate” button. You’ll be taken to the creately.com website and you will need to create a new account and select a payment method, complete the purchase and return to your Fogbugz Ondemand server. Your license will be automatically installed when you return to your Fogbugz Ondemand server.

If you have any questions please email support@creately.com and include the email address used to register your Creately for Fogbugz Ondemand license.

This posts was originally published at Creately blog. Click How-to: Creately for Fogbugz On Demand – Installing, Drawing Diagrams & Adding a License to visit the blog post. Visit the Creately website to learn more about Online Diagramming Tools.

Work breakdown structures (WBS) are frequently used by project teams to break the project into smaller, easily identifiable components. The WBS structures used in projects follow strict rules like 100% rule and the mutually exclusive rule, but in general they can be used to breakdown almost any complex task. However coming up with a WBS template from scratch can be a tedious task, which is why we have introduced work breakdown structure templates to speed up the process. All of the templates mentioned below can be reused by clicking the “Use as Template” button.

Work Breakdown Structure Templates ( Creately Examples )

Creately has some predefined WBS templates in the Creately examples section. You can access them easily from the drawing area using the Creately community browser.

WBS Template with Different Colors for Levels

The first WBS example has different colors for levels. You can easily change the colors of the objects and lines using one click styling button available in Creately. Click on the image to open it in a new window and use as a template.

Work breakdown structure templates with various colors for levels ( click on image to use it as a template )

Work Breakdown Structure Templates with Different Colors for Paths

The next template has different colors for paths. This template makes it easy to understand the various sub components of the projects and the elements belonging to a particular process.

WBS Example with different colors for paths ( click on image to use it as a template )

WBS Template with Curved Arrows

A WBS template doesn’t necessarily have to have a top to bottom approach. If one process takes a big portion of your diagram you can move the processes around so the diagram fits much better in the screen. The final diagram should give the correct picture of your task or project.

Work breakdown structure example that doesn't follow the top down approach ( click to use as template )

Click here to browse all Creately work breakdown structure templates >>

Visit the Creately Diagram Community

Want more ideas for your work breakdown structure ?. If the templates shown above are not to your liking you can visit the Creately diagramming community to browse for more diagrams. Feel free to vote up and share your favorite diagrams.

This posts was originally published at Creately blog. Click Work Breakdown Structure Templates by Creately to visit the blog post. Visit the Creately website to learn more about Online Diagramming Tools.

Increase productivity, that’s our goal at Creately and it applies to everything. We added some cool features like community browser and shared projects to make diagramming easier and now we are exited to announce user profiles, an easier way to manage your Creately profile. Now you have access to purchase history, plan history, billing history , payment information etc. all in one place. We even let you add cute profile image . Some of the features include..

Powerful Tools for Team Admins

“My Team” tab in the user profile lets you easily add team members and control their access levels. Your plan details are available at the bottom so you can get a quick idea of your options.

Easy management of the team plan

 

Plan Overview in User Profile

“My Account” tab gives you an overview of your full Creately plan. You can see your registration date, subscription period, plan change history, All the products you have purchased and their licences plus the purchase history. You can quickly view the invoices or upgrade your product plans.

Quickly access license details and purchase history

 

Quickly Change Account Email

“My Profile” tab gives you an easy way to change your account email. Before that your only option was to contact support and ask it to be changed. Now all you have to do is add your new email address and save it. You can add your details and upload a profile image. We have made it easy to deactivate your Creately account as well. Simple click the deactivate button and all your subscriptions will be cancelled and account closed. Your diagrams and details will remain and you can reactivate by contacting support.

Easily Change Payment Details

“My Billing” tab lets you change payment details without going through the support process. This is only available for users who pay with credit cards. PayPal users still has to contact support.

 

User Profile = Everything in One Place

User profile lets you access everything related to your Creately account in one place, which will definitely make your life a lot easier. Got Feedback? Feel free to drop us a mail. If you are active in social media you can get in touch using Twitter or Facebook as well.

This posts was originally published at Creately blog. Click Improved User Profile to Easily Manage Your Creately Account to visit the blog post. Visit the Creately website to learn more about Online Diagramming Tools.

An Entity Relationship Diagram (ERD) is a visual representation of different data using conventions that describe how these data are related to each other. For example, the elements writer, novel, and consumer may be described using ER diagrams this way:

ER diagram with basic objects

In the diagram, the elements inside rectangles are called entities while the items inside diamonds denote the relationships between entities. This ER diagram tutorial covers most things related to ER diagram, for quick navigation use the links below.

• ER Diagram Usage
• History of ER diagrams
• ER Diagrams Symbols and Notations
• How to Draw ER Diagrams
• ER Diagram Templates
• Benefits of ER Diagrams

ER Diagrams Usage

While able to describe just about any system, ER diagrams are most often associated with complex databases that are used in software engineering and IT networks. In particular, ER diagrams are frequently used during the design stage of a development process in order to identify different system elements and their relationships with each other. For example, an inventory software used in a retail shop will have a database that monitors elements such as purchases, item, item type, item source and item price. Rendering this information through an ER diagram would be something like this:

ER diagram example with entity having attributes

In the diagram, the information inside the oval shapes are attributes of a particular entity.

History of ER Diagrams

ER diagrams are visual tools that are used in the Entity-Relationship model initially proposed by Peter Chen in 1976 to create a uniform convention that considers both relational database and network views. Chen envisioned the ER model as a conceptual modeling approach that views real world data as systems of entities and relationships. Entities are data objects that maintain different relationships with each other. Additionally, entities are also described further using attributes.
Since 1976, the ER model has been expanded and is sometimes used in business management, product development, and strategy formulations. However, database design remains its primary application.

ER Diagram Symbols and Notations

Elements in ER diagrams

There are three basic elements in an ER Diagram: entity, attribute, relationship. There are more elements which are based on the main elements. They are weak entity, multivalued attribute, derived attribute, weak relationship and recursive relationship. Cardinality and ordinality are two other notations used in ER diagrams to further define relationships.

Entity

An entity can be a person, place, event, or object that is relevant to a given system. For example, a school system may include students, teachers, major courses, subjects, fees, and other items. Entities are represented in ER diagrams by a rectangle and named using singular nouns.

Weak Entity

A weak entity is an entity that depends on the existence of another entity. In more technical terms it can defined as an entity that cannot be identified by its own attributes. It uses a foreign key combined with its attributed to form the primary key. An entity like order item is  a good example for this. The order item will be meaningless without an order so it depends on the existence of order.

Weak Entity Example in ER diagrams

Attribute

An attribute is a property, trait, or characteristic of an entity, relationship, or another attribute. For example, the attribute Inventory Item Name is an attribute of the entity Inventory Item. An entity can have as many attributes as necessary. Meanwhile, attributes can also have their own specific attributes. For example, the attribute “customer address” can have the attributes number, street, city, and state. These are called composite attributes. Note that some top level ER diagrams do not show attributes for the sake of simplicity. In those that do, however, attributes are represented by oval shapes.

Attributes in ER diagrams, note that an attribute can have its own attributes ( composite attribute )

Multivalued Attribute

If an attribute can have more than one value it is called an multivalued attribute. It is important to note that this is different to an attribute having its own attributes. For example a teacher entity can have multiple subject values.

Example of a multivalued attribute

Derived Attribute

An attribute based on another attribute. This is found rarely in ER diagrams. For example for a circle the area can be derived from the radius.

Derived Attribute in ER diagrams

Relationship

A relationship describes how entities interact. For example, the entity “carpenter” may be related to the entity “table” by the relationship “builds” or “makes”. Relationships are represented by diamond shapes and are labeled using verbs.

Using Relationships in Entity Relationship Diagrams

Recursive Relationship

If the same entity participates more than once in a relationship it is known as a recursive relationship. In the below example an employee can be a supervisor and be supervised, so there is a recursive relationship.

Example of a recursive relationship in ER diagrams

Cardinality and Ordinality

These two further defines relationships between entities by placing the relationship in the context of numbers. In an email system, for example, one account can have multiple contacts. The relationship in this case follows a “one to many” model. There are number of notations used to present cardinality in ER diagrams. Chen, UML, Crow’s foot, Bachman are some of the popular notations. Creately supports Chen, UML and Crow’s foot notations.The following example uses UML to show cardinality.

Cardinality in ER diagrams using UML notation

Tips on How to Draw ER Diagrams

Because ER diagrams are simple enough to understand, just about anyone can create them. However, two different ER diagrams describing the same system may still be radically different in terms of their simplicity, completeness, and efficiency at communicating the system. In other words, there are good ER diagrams and there are poor ones.

Here are some tips that will help you build effective ER diagrams:

1. Identify all the relevant entities in a given system and determine the relationships among these entities.
2. An entity should appear only once in a particular diagram.
3. Provide a precise and appropriate name for each entity, attribute, and relationship in the diagram. Terms that are simple and familiar always beats vague, technical-sounding words. In naming entities, remember to use singular nouns. However, adjectives may be used to distinguish entities belonging to the same class (part-time employee and full time employee, for example). Meanwhile attribute names must be meaningful, unique, system-independent, and easily understandable.
4. Remove vague, redundant or unnecessary relationships between entities.
5. Never connect a relationship to another relationship.
6. Make effective use of colors. You can use colors to classify similar entities or to highlight key areas in your diagrams.

You can draw entity relationship diagrams manually, especially when you are just informally showing simple systems to your peers. However, for more complex systems and for external audiences, you need diagramming software such as Creately’s to craft visually engaging and precise ER diagrams. The diagramming application offered by Creately as an online service is pretty easy to use and is a lot more affordable than purchasing licensed software. It is also perfectly suited for development teams because of its strong support for collaboration.

ER Diagram Templates

Below are some ER diagram templates so you can get started quickly. Clicking on the image and in the new page that opens click the “Use as Template” button.

ER Diagram Template of exam database ( Click on the image to use as template )

A basic ER diagram template for a quick start

Basic ER Diagram template ( Click to use as template )

Benefits of ER diagrams

ER diagrams constitute a very useful framework for creating and manipulating databases. First, ER diagrams are easy to understand and do not require a person to undergo extensive training to be able to work with it efficiently and accurately. This means that designers can use ER diagrams to easily communicate with developers, customers, and end users, regardless of their IT proficiency. Second, ER diagrams are readily translatable into relational tables which can be used to quickly build databases. In addition, ER diagrams can directly be used by database developers as the blueprint for implementing data in specific software applications. Lastly, ER diagrams may be applied in other contexts such as describing the different relationships and operations within an organization.

References

1. Entity-relationship model as published on Wikipedia.
2. Entity Relationship Diagram by Mike Chapple as published on the About.com website
3. Entity-Relationship Modelling by Craig Borysowich as published on the Toolbox.com website

This posts was originally published at Creately blog. Click Ultimate Guide to ER Diagrams to visit the blog post. Visit the Creately website to learn more about Online Diagramming Tools.

Creately now supports Fogbugz on demand, so you can draw professional looking diagrams quickly and easily in Fogbugz. Thousands of users have used Creately to add charts to their cases and wikis, now you can do the same with a click of a button.

Tools to draw diagrams faster

Fogbugz on demand can users can use Creately to add various diagram types to their cases and wikis. Some of the features include

• Support for many diagram types including flowcharts, UML diagrams, Network diagrams, UI mock-ups, Gantt charts and much more
• Extensive set of objects for drag and drop diagramming
• Only 8$ per month for a diagram editor
• Smart objects and one click creation of connecting objects for fast diagramming
• Integrated Google image search to quickly look up related images

Below is a Creately diagram added to a Fogbugz case

Creately diagram in Fogbugz case

You can add them easily to Fogbugz wiki pages as well.

Creately diagrams on Fogbugz wiki pages

For the full list of features available in the latest release check out the Fogbugz release page.

How to add Creately in Fogbugz on demand

There are two ways to add add Creately for Fogbugz in the on demand version.

• Click the admin drop down and select plugins. Click  view all available plugins at the left bottom. Find “Creately for Fogbugz” in the list and it will be marked as “No” in the installed column. Click on that and you will be prompted with the below screen. Agree to the terms and click “OK”, the plugin will be enabled for you.

Installing Creately in Fogbugz on demand

• Or you  can visit the Creately Fogbugz page and click “Install on demand”. Enter your Fogbugz URL and click “Install Creately”. You will see the above screen again. Agree to the terms and click “OK”, the plugin will be enabled for you.

Have fun drawing diagrams in Fogbugz and if you have any feedback you can contact support or get in touch with us using Twitter or Facebook.

This posts was originally published at Creately blog. Click Creately Diagramming Plugin Now Supports FogBugz on Demand to visit the blog post. Visit the Creately website to learn more about Online Diagramming Tools.

Many people consider class diagrams a bit more complicated to build compared with ER diagrams. While this might be true, this article helps clip some of the complexities of class diagrams in such a way that even non-programmers and less tech-savvy individuals will come to appreciate the usefulness of this modeling approach. In particular, this article explains how to correctly determine and implement the different class diagram relationships that are applicable in object-oriented modeling.

Relationships in UML Class Diagrams

Class Diagrams Explained

Class diagrams are visual representations of the static structure and composition of a particular system using the conventions set by the Unified Modeling Language (UML). Out of all the UML diagram types it is one of the most used ones. System designers use class diagrams as a way of simplifying how objects in a system interact with each other. Using class diagrams, it is easier to describe all the classes, packages, and interfaces that constitute a system and how these components are interrelated. For example, a simple class diagram may be used to show how an organization such as a convenient store chain is set up. On the other hand, precisely detailed class diagrams can readily be used as the primary reference for translating the designed system into a programming code.

The following figure is an example of a simple class diagram:

Simple class diagram with attributes and operations

In the example, a class called “loan account” is depicted. Classes in class diagrams are represented by boxes that are partitioned into three:

1. The top partition contains the name of the class.
2. The middle part contains the class’s attributes.
3. The bottom partition shows the possible operations that are associated with the class.

Those should be pretty easy to see in the example: the class being described is a loan account, some of whose attributes include the type of loan, the name of the borrower/loaner, the specific date the loan was released and the loan amount. As in the real world, various transactions or operations may be implemented on existing loans such as renew and extend.  The example shows how class diagrams can encapsulate all the relevant data in a particular scenario in a very systematic and clear way.

In object-oriented modeling, class diagrams are considered the key building blocks that enable information architects, designers, and developers to show a given system’s classes, their attributes, the functions or operations that are associated with them, and the relationships among the different classes that make up a system.

Relationships in Class Diagrams

Classes are interrelated to each other in specific ways. In particular, relationships in class diagrams include different types of logical connections. The following are such types of logical connections that are possible in UML:

• Association
• Directed Association
• Reflexive Association
• Multiplicity
• Aggregation
• Composition
• Inheritance/Generalization
• Realization

Association

Association

is a broad term that encompasses just about any logical connection or relationship between classes. For example, passenger and airline may be linked as above:

Directed Association

Directed Association

refers to a directional relationship represented by a line with an arrowhead. The arrowhead depicts a container-contained directional flow.

Reflexive Association

Reflexive Association

occurs when a class may have multiple functions or responsibilities. For example, a staff working in an airport may be a pilot, aviation engineer, a ticket dispatcher, a guard, or a maintenance crew.

Multiplicity

Multiplicity

is the active logical association when the cardinality of a class in relation to another is being depicted. For example, one fleet may include multiple airplanes, while one commercial airplane may contain zero to many passengers. The notation 0..* in the diagram means “zero to many”.

Aggregation

Aggregation

refers to the formation of a particular class as a result of one class being aggregated or built as a collection. For example, the class “library” is made up of one or more books, among other materials. In aggregation, the contained classes are not strongly dependent on the life cycle of the container. In the same example, books will remain so even when the library is dissolved. To render aggregation in a diagram, draw a line from the parent class to the child class with a diamond shape near the parent class.

Composition

Composition Relationship

is very similar to the aggregation relationship, with the only difference being its key purpose of emphasizing the dependence of the contained class to the life cycle of the container class. That is, the contained class will be obliterated when the container class is destroyed. For example, a shoulder bag’s side pocket will also cease to exist once the shoulder bag is destroyed. To depict a composition relationship in a UML diagram, use a directional line connecting the two classes, with a filled diamond shape adjacent to the container class and the directional arrow to the contained class.

Inheritance / Generalization

Inheritance

refers to a type of relationship wherein one associated class is a child of another by virtue of assuming the same functionalities of the parent class. In other words, the child class is a specific type of the parent class. To depict inheritance in a UML diagram, a solid line from the child class to the parent class is drawn using an unfilled arrowhead.

Realization

Realization

denotes the implementation of the functionality defined in one class by another class. To show the relationship in UML, a broken line with an unfilled solid arrowhead is drawn from the class that defines the functionality to the class that implements the function. In the example, the printing preferences that are set using the printer setup interface are being implemented by the printer.

Conclusion – Class diagram relationships are easy to understand

If you are a programmer or systems designer, you’ll be building or analyzing class diagrams quite often since they are, after all, the building blocks of object-oriented modeling. As demonstrated by this article, class diagram relationships are fairly easy to understand. As a rule of thumb, keeping class diagrams as simple as possible allows them to be more easily understood and appreciated by different types of audiences. For this purpose, remember to label your classes and relationships as descriptive as possible. Lastly, class diagrams also evolve as the real world systems they represent change. This implies that you don’t need to put in much detail in your first draft. All the classes, interfaces and relationships that are integral to the system or application you are designing will eventually emerge as the development process moves forward.

To make your job a lot easier, you can check out the online diagramming application offered on the Creately site. Besides being easy to use, the platform provides a comprehensive range of UML templates among other diagramming services. In addition, the platform supports collaboration and may be integrated into an existing company wiki or Intranet to keep diagrams well documented and updated. Having such a tool on your side will greatly improve your company’s development initiatives and will help your team meet its targets.

Now that you understand class diagram relationships it’s time to draw some, get started with this easy to use class diagram templates.

References:

1. UML basics: The class diagram An introduction to structure diagrams in UML 2 by Donald Bell

2. Class diagram as published on the Wikipedia website

3. The UML Class Diagram Part 1 as published in the website developer.com

4. The Class Diagram from Visual Case Tool – UML Tutorial as published on Visual Case website

5.  Associations as published on the Sybase website

This posts was originally published at Creately blog. Click Class Diagram Relationships in UML with Examples to visit the blog post. Visit the Creately website to learn more about Online Diagramming Tools.

How can we make it better ? How can we improve the sharing mechanism? We had a thought about this and we are excited to introduce the projects as libraries feature. This means you can draw a bunch of diagrams, group them as a project and reuse those diagrams as objects.This is a powerful feature that makes it very easy to reuse existing diagram drawn by you and other users. How do you convert shared projects to libraries ? All you need is a single click. Bit similar to Community browser but more powerful and opens up endless opportunities.

Adding Shared Projects as Libraries

All you need is one click. Simple open the shared project and click “Open as Library” button.

Convert Shared Projects into Libraries in One Click ( click to view larger image )

Example on How to Use Shared Projects

Below example shows how users can take advantage of this powerful feature.

Ann creates websites footers and shares them

 

David creates website headers and shares them

 

Diagrams available to me as objects so I can reuse them

Above is just one example but there are plenty more scenarios possible. But with so many diagram types available the possibilities are endless. This is taking team work and project sharing to the next level. So head over to Creately and give them a try and as always don’t forget to leave feedback via Facebook , Twitter and support mails.

This posts was originally published at Creately blog. Click Use Shared Projects as Libraries for Faster Diagramming to visit the blog post. Visit the Creately website to learn more about Online Diagramming Tools.

Hot on the heels of our iPhone mock-up toolkit we are excited to release the iPad mockup toolkit, a comprehensive set of tools for super fast and realistic iPad designs. This is perfect for iPad application developers because they can do a quick sketch and share their idea with peers using Creately’s collaboration abilities. There are more than 30 iPad specific objects available in the library, so it’s just a matter of dragging and dropping objects. Below are some of the iPad objects available in the library.

More than 30 iPad objects available with the iPad mockup tool

All the objects are sized to fit perfectly to the iPad frame. You do have the ability to re-size as you see fit.

Unique Features in the iPad Mockup Tool

You can do some cool things with the toolkit, mentioned below are some unique features available to users.

Individual Customization for Many Objects

Many object have individual setting so you can come with a very realistic iPad design. Click on the object and check properties in the right sidebar to modify individual settings. Below are some examples

Change the keyboard type to letter, number or symbols simple by selecting from the drop down

 

Drag the bar to change the position of slider

 

Decide the number of pages to show, number of selected pages and whether to show search icon using simple property changes

 

Quick and Easy Editing of Objects

Some objects can be modified simply by double clicking on the object. You can modify the text, layout and interface simply by editing text. Below is an example of that using the alert object.

Modify the look and feel of the Alert box by changing text

 

Object Grouping with Individual Customization

Some objects are made by grouping many object together, so you can create iPad mock-ups even faster. A prime example of this is the iPad split view. You can drag and drop the object to quickly create split view like below, but you can select individual object within the split view and modify them according to your need.

Quickly Create iPad split view using the split view object

 

iPad Mockup Templates

Don’t have time to drag and drop object ? Want to start designing iPad applications quickly ? We have added some iPad mockup templates so you can start designing applications quickly. And we have made it easier to access them from the drawing area using the Creately community browser. Below is an mock-up template for adding a mail account.

iPad mockup of adding a mail account ( click to use it as a template )

 

Feedback on the iPad Design Toolkit

Have a suggestion ? We love to hear from you. Feel free to mention your ideas in the comments section or simply drop us a mail at support@creately.com. In the meantime play around with the toolkit and have fun designing iPad application.

P.S – If you are on Twitter or Facebook be sure to follow us on Twitter or like our Facebook page. We post some interesting content via those channels.

 

This posts was originally published at Creately blog. Click iPad Mock-Up toolkit with iPad mock-up templates to visit the blog post. Visit the Creately website to learn more about Online Diagramming Tools.

One click access to thousands of diagram templates & examples, That’s Creately community browser in one summarized sentence. This is another step in our continuing effort to make Creately a complete diagram solution that goes far beyond a simple diagramming tool. The quick access to templates will save you time and help out in tricky situation where you are stuck with diagram ideas. The community browser integrates the drawing tool with the Creately diagramming community, where users can easily browse various diagram types, rate them, share them and even use them as templates.

Accessing the Creately Community Browser

The community browser can be accessed by clicking the “Import Template” button available in the drawing area tool bar.

Hundreds of Templates just one click away

Creately Community Browser Features

The browser if packed with features so you can search and use templates very easily

• Search by Type ( Left side bar ) – Select from over 20 diagram types available in the browser
• Four category filters ( Top right )
• Template – Predefined Creately templates
• Popular – Popular diagrams rated by the community
• All – Every diagram in the community
• My – Diagram drawn by you
• Search for Diagrams withing the context – After you select a diagram type you can search for diagrams of that type by using the search box at the top
• View Template – You can view the diagram in a new tab on a large scale before using it
• Use the Template – Click “Use” to start drawing the diagram

Below image shows all the features of the Creately community browser. Click to see a larger image in a new tab.

Features in Creately Community Browser ( Click for larger image )

The Community browser is available in Creately online version, Desktop and also in Jira, Confluence and Fogbugz plugins, so no user is losing out on this awesome feature.

Improved way to Create New Documents

We took a look at the previous “New Diagram Window” and thought of how it can be changed improve your diagramming experience. As a result we came up with a brand new process that will not only guide you but add some details automatically to enhance your diagram.

The new 3 step process lets you select diagram type and templates easily while also encouraging you to name the document. There are quite a few advantage in the new process

• Because you are selecting diagram type we can prepare the application by loading the necessary contextual tool bars.
• We will automatically tag your diagram so you can find them easily later
• You get access to templates while starting the diagram
• You are more likely to give a proper name instead of something like “Document 1″
• Quickly mark the diagram as a community diagram

The below images explains the process.

In the First Step Select the Diagram Type You Want to Draw

 

In the Second Step Choose a Blank Diagram or Select from Many Templates

 

In the Final Step Name and Tag Diagrams to Complete the Process

Enjoy the new features and if you have any suggestions or feedback feel free to mention them in the comments section.

Happy Diagramming!

This posts was originally published at Creately blog. Click Creately Community Browser – One Click Access to Thousands of Templates to visit the blog post. Visit the Creately website to learn more about Online Diagramming Tools.

UML stands for Unified Modeling Language which is used in object oriented software engineering. Although typically used in software engineering it is a rich language that can be used to model an application structures, behavior and even business processes. There are 14 UML diagram types to help you model these behavior. They can be divided into two main categories structure diagrams and behavioral diagrams. All 14 UML diagram types are listed below with examples, brief introduction to them and also how they are used when modeling applications.

List of UML Diagram Types

Types of UML diagrams with structure diagrams coming first and behavioral diagrams starting from position 8. Click on any diagram type to visit that specific diagram types description.

1. Class Diagram
2. Component Diagram
3. Deployment Diagram
4. Object Diagram
5. Package Diagram
6. Profile Diagram
7. Composite Structure Diagram
8. Use Case Diagram
9. Activity Diagram
10. State Machine Diagram
11. Sequence Diagram
12. Communication Diagram
13. Interaction Overview Diagram
14. Timing Diagram

UML Diagram Types

 

Structure diagrams show the things in a system being modeled. In a more technical term they show different objects in a system. Behavioral diagrams shows what should happen in a system. They describe how the objects interact with each other to create a functioning system.

Class Diagram Class diagrams are arguably the most used UML diagram type. It is the main building block of any object oriented solution. It shows the classes in a system, attributes and operations of each class and the relationship between each class. In most modeling tools a class has three parts, name at the top, attributes in the middle and operations or methods at the bottom. In large systems with many classes related classes are grouped together to to create class diagrams. Different relationships between diagrams are show by different types of Arrows. Below is a image of a class diagram. Follow the link for more class diagram examples.

UML Class Diagram with Relationships

Component Diagram

A component diagram displays the structural relationship of components of a software system. These are mostly used when working with complex systems that has many components. Components communicate with each other using interfaces. The interfaces are linked using connectors. Below images shows a component diagram.

Simple Component Diagram with Interfaces

Deployment Diagram

A deployment diagrams shows the hardware of your system and the software in those hardware. Deployment diagrams are useful when your software solution is deployed across multiple machines with each having a unique configuration. Below is an example deployment diagram.

UML Deployment Diagram ( Click on the image to use it as a template )

Object Diagram

Object Diagrams, sometimes referred as Instance diagrams are very similar to class diagrams. As class diagrams they also show the relationship between objects but they use real world examples. They are used to show how a system will look like at a given time. Because there is data available in the objects they are often used to explain complex relationships between objects.

UML Object Diagram Example

Package Diagram

As the name suggests a package diagrams shows the dependencies between different packages in a system. Check out this wiki article to learn more about the dependencies and elements found in package diagrams.

Package Diagram in UML

Profile Diagram

Profile diagram is a new diagram type introduced in UML 2. This is a diagram type that is very rarely used in any specification. For more detailed technical information about this diagram type check this link.

Basic UML Profile Diagram structure

Composite Structure Diagram

Composite structure diagrams are used to show the internal structure of a class. For a detailed explanation of composite structure diagrams click here.

A simple Composite Structure Diagram

Use Case Diagram

Most known diagram type of the behavioral UML diagrams, Use case diagrams gives a graphic overview of the actors involved in a system, different functions needed by those actors and how these different functions are interacted. It’s a great starting point for any project discussion because you can easily identify the main actors involved and the main processes of the system. Click through to read more about use case diagram elements and templates.

Use Case diagram showing Actors and main processes

Activity Diagram

Activity diagrams represent workflows in an graphical way. They can be used to describe business workflow or the operational workflow of any component in a system. Sometimes activity diagrams are used as an alternative to State machine diagrams. Check out this wiki article to learn about symbols and usage of activity diagrams.

Activity Diagrams with start, end, processes and decision points

State Machine Diagram

State machine diagrams are similar to activity diagrams although notations and usage changes a bit. They are sometime known as state diagrams or start chart diagrams as well. These are very useful to describe the behavior of objects that act different according to the state they are at the moment. Below State machine diagram show the basic states and actions.

State Machine diagram in UML, sometime referred to as State or State chart diagram

Sequence Diagram

Sequence diagrams in UML shows how object interact with each other and the order those interactions occur. It’s important to note that they show the interactions for a particular scenario. The processes are represented vertically and interactions are show as arrows. This article explains the purpose and the basics of Sequence diagrams.

Sequence Diagrams in UML shows the interaction between two processes

Communication Diagram

Communication diagram was called collaboration diagram in UML 1. It is similar to sequence diagrams but the focus is on messages passed between objects. The same information can be represented using a sequence diagram and different objects. Click here to understand the differences using an example.

Communication Diagram in UML

Interaction Overview Diagram

Interaction overview diagrams are very similar to activity diagrams. While activity diagrams shows a sequence of processes Interaction overview diagrams shows a sequence of interaction diagrams. In simple term they can be called a collection of interaction diagrams and the order they happen. As mentioned before there are seven types of interaction diagrams, so any one of them can be a node in an interaction overview diagram. ( img – http://www.sa-depot.com/?page_id=645 )

Interaction overview diagram in UML

Timing Diagram

Timing diagrams are very similar to sequence diagrams. They represent the behavior of objects in a given time frame. If its only one object the diagram is straight forward but if more then one objects are involved they can be used to show interactions of objects during that time frame as well. ( img – http://blog.tangcs.com/2008/01/10/uml-2-diagrams/ )

Timing Diagram in UML

Mentioned above are all the UML diagram types. The links given in each section explains the diagrams in more detail and covers the usage, symbols etc. UML offers many diagram types and sometimes two diagram can explain the same thing using different notations.Check this blog post to learn which UML diagram best suits you.If you have any questions or suggestions feel free to leave a comment.

This posts was originally published at Creately blog. Click The Complete Guide to UML Diagram Types with Examples to visit the blog post. Visit the Creately website to learn more about Online Diagramming Tools.