X
Navigate

Beautiful new Creately Diagram Viewer

By Nishadha

Today we are launching our new Creately Diagram Viewer. It’s a simple embeddable widget that allows you to include a zoom-able, sharable and always updated Creately diagram in any web page. To top it off, we’ve created a Google Gadget to allow the Creately Diagram Viewer to be used easily with iGoogle and for our Google Apps customers within your Google Sites.

Diagram Viewer Widget

The Creately Diagram Viewer is a HTML5 web widget that lets you easily embed an interactive Creately diagram viewer into any webpage. You can add the widget to your webpage by simply pasting the embed code from the properties panel inside Creately into your webpage source. You can add the widget to as many pages as you like and also add multiple widgets to the same webpage. Once added just save your webpage and your Creately diagram is available immediately.

Great Features

The Creately Diagram Viewer comes with some great features that will make creating and sharing diagrams with Creately a breeze. Try the live example below to see what we mean.

Mouseover to see the Viewer in action

You can change the dimensions of your widget so it fits perfectly into any webpage. The widget provides Zoom and Pan features that mean even the largest diagrams are still clear and easy to navigate. There’s now no need to scale your exported diagram image just to fit it to the webpage and in the process lose the detail in your diagrams. Simply set up the size of your widget and embed it into any webpage.

Always Update to Date

The widget always fetches the latest version of your diagram to display making sure that visitors always see the latest version. When working as a team on the same diagram or diagrams in a project all the changes made using Creately will be reflected immediately in your documentation ensuring that the Creately diagram and the published webpage stay in sync. This save time and reduces costs because you no longer need to upload or update the diagram images and reduces errors due to old knowledge being published.

Read our guide on how to work from home as a team.

We are big fans of Twitter and Facebook and we know a lot of our users are too. The Creately Diagram Viewer provides the tools for effortless sharing with built in Facebook and Twitter buttons. We all enjoy receiving praise and love for our work. When you embed your Creately diagrams in your site you can receive the qudos for your work you deserve.

Community Diagram Pages

To get a real world feel for the Creately Diagram Viewer please visit the Public Diagram Pages which are all now powered by the Creately Diagram Viewer. Note – Click on the diagram to go to the individual diagram page and see the Creately Diagram Viewer – try out the zoom, pan and sharing features as you browse the diagrams. On each diagram page don’t miss the right panel for the embed code. Finally remember if like any of the diagrams, show your love by sharing it via Twitter or Facebook with 1-click!

Google Gadget For Apps and iGoogle

Creately is loved by thousands of Google Apps users. With Creately we’ve been working hard to bring better diagram and collaboration to Google Apps. So this week Google Sites finally gets what it was missing – built-in diagrams that work just like the wiki does.

The brand new Creately Diagram Gadget for Google Sites and iGoogle makes it easy to embed the Creately Diagram Viewer into the Google Platform. This way, anyone who edits your Google Apps Site can also easily access and update the Creately diagram from right within the site.

Just like the Creately Diagram Viewer, the Gadget’s diagram is always up to date and brings with it the benefits of collaborative working.

No More Squinting

The Creately Diagram Gadget allows you to embed multiple diagrams from Creately in to a single Sites page along with explanatory text. You can create really big diagrams, and still embed them on Site pages without having to scale them down. Just alter the display dimensions of the Creately Diagram Gadget and click to embed. Your Google Site page now remains neat and intact with all your Creately diagrams appearing within the Creately Diagram Viewer allowing your full control of your Sites appearance.

The Creately Diagram Gadget for iGoogle provides all the same features as the Google Sites gadget plus it allows you to embed your Creately diagram anywhere that accepts a Google Gadget.

You can learn how to embed this gadget on Google Site by visiting our Creately Diagram Gadget instructions page. Or check out the Creately Diagram Gadget on the Google Gadget listing page – and don’t forget to leave us a review. Thanks!

@Creately Team

View Comments

    • Hi Wendy, Thanks for the comment. I tried to have a look but your Google sites page is not publicly accessible (that might be your admin's choice) so we can't see your diagram. Thanks Nick

  • Hi, we have tried embedding a document to Google Sites. This document has some links on it, but they cannot be clicked when it's embedded on a google site. Is there any solution for that?

    • Hi Victor, Thanks for the comment. Unfortunately at this time the Creately Google Gadget does not support hyperlinks. We are hoping that a future version will and we are working on it. Thanks Nick

  • Hi, I tried to embed my Creately diagram in my Google code wiki. Google code wiki supports Gadgets. This is the diagram: https://creately.com/diagram/gek1nsbp1 I tried to embed the diagram using this tag: The gadget shows: "Please provide a valid Diagram Identifier". See: http://code.google.com/p/ngaeef/wiki/Design For testing I tried to embed the Creately gadget on my iGoogle page, but it showed nothing. Creately is ideal for rapidly creating software diagrams and flowcharts. The free public version is ideal for open source software. I hope you can fix this quickly, so creately can be used easily with Google code. Thank you for the great product and support!

    • Hi Niels, Thanks for the comment. I have done some testing and I see the problem. The Google Code and Google Project Hosting wiki uses an intermediary step to render the Google Gadgets and because it isn't possible to directly embed the Javascript or HTML into the wiki the diagram ID was being lost. I found a solution for you if you use the following format for your wiki markup:

      <wiki:gadget url="https://creately.com/player/gadget/createlyplayer.xml" height="500" width="500" border="0" up_did="gcqjqs762" up_dlogo="true" up_dtitle="Embedding in Google Code" up_bgcolor="#EEEEEE" />
      The variables of interest are:
      1. up_did - The diagram ID that you would like to see rendered in the wiki page.
      2. up_dlogo - Display the Creately logo, either "true" or "false" - leaving it true gives us some promotion ;-)
      3. up_dtitle - Sets the title for the diagram - I don't think you need to worry about this for the Google Code wiki as it won't be seen.
      4. up_bgcolor - The background colour behind the diagram being shown in the player. The default is: "#EEEEEE" and looks pretty good.
      The size of the player in the wiki can be changed using the "width" and "height" variables - they set the size in pixels. I'll put together a proper blog post and update the help pages. But this should keep you going. Thanks Nick

  • Thanks for a very helpful product, I've used it to create diagrams and it's so good for sharing with colleagues.

Leave a Comment