{"id":3082,"date":"2010-09-28T16:13:29","date_gmt":"2010-09-28T05:13:29","guid":{"rendered":"https:\/\/creately.com\/blog\/?p=3082"},"modified":"2024-04-10T17:01:35","modified_gmt":"2024-04-10T06:01:35","slug":"adding-creately-diagrams-to-google-code-and-google-project-hosting","status":"publish","type":"post","link":"https:\/\/creately.com\/blog\/development\/adding-creately-diagrams-to-google-code-and-google-project-hosting\/","title":{"rendered":"Adding Creately Diagrams to Google Code and Google Project Hosting"},"content":{"rendered":"<div id=\"bsf_rt_marker\"><\/div><p><img loading=\"lazy\" decoding=\"async\" class=\"alignleft\" style=\"border: 0px initial initial;\" src=\"http:\/\/images.logicbuy.com\/Pages\/Image.aspx?url=http:\/\/images.logicbuy.com\/datastore\/userdeals\/634190214459050509google-code.jpg&amp;width=200&amp;height=150\" alt=\"\" width=\"200\" height=\"150\" border=\"0\">After a recent comment on the original Creately Diagram Viewer post I thought it would be a good idea to follow up with a full post to help all the other Creately users who also use Google Code and Google Project Hosting.<\/p>\n<p>Google Code projects allow you to add Google Gadgets to the Wiki for the project. This means that you can add your Creately diagrams of the design, features and UI mockups for your project to the Wiki for all the project members to see and work with.<\/p>\n<h3>Creately Diagram&nbsp;Embed Code&nbsp;Google Code Projects<\/h3>\n<p>Due to the way that gadgets work in the Google Code Wiki there is an intermediary handler which means that the document ID that you want to display gets lost during the rendering if you use the regular variable names. In order to fix this it is possible to use the wiki markup similar to this:<\/p>\n<blockquote><p><code>&lt;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\" \/&gt;<\/code><\/p><\/blockquote>\n<p>The variables of interest are:<\/p>\n<ul>\n<li><strong>up_did<\/strong> \u2013 The Creately diagram ID that you would like to see rendered in the wiki page.<\/li>\n<li><strong>up_dlogo<\/strong> \u2013 Display the Creately logo, either \u201ctrue\u201d or \u201cfalse\u201d \u2013 leaving it true gives us some promotion \ud83d\ude09<\/li>\n<li><strong>up_dtitle<\/strong> \u2013 Sets the title for the diagram \u2013 you don&#8217;t need to worry about this for the Google Code wiki as it won\u2019t be seen.<\/li>\n<li><strong>up_bgcolor<\/strong> \u2013 The background colour behind the diagram being shown in the player. The default is: \u201c#EEEEEE\u201d and looks pretty good.<\/li>\n<\/ul>\n<p>The size of the player in the wiki can be changed using the &#8220;<strong>width<\/strong>&#8221; and &#8220;<strong>height<\/strong>&#8221; variables \u2013 they set the size in pixels.<\/p>\n<p>You can see a working example of the viewer in a project wiki <a href=\"https:\/\/sites.google.com\/site\/downeylec\/\" target=\"_blank\" rel=\"noopener\">here<\/a>.<\/p>\n<p>Thanks to Niels for posting the original comment which led to this post &#8211; you can see his Google Code project <a href=\"http:\/\/code.google.com\/p\/ngaeef\/\" target=\"_blank\" rel=\"noopener\">here<\/a>.<\/p>\n<p><a href=\"http:\/\/twitter.com\/nick_foster\">@nick_foster<\/a><\/p>\n<div><span style=\"font-family: Arial, Helvetica, sans-serif; line-height: normal; font-size: 12px; color: #323232;\">&nbsp;<\/span><\/div>\n","protected":false},"excerpt":{"rendered":"<p>After a recent comment on the original Creately Diagram Viewer post I thought it would be a good idea to follow up with a full post to help all the other Creately users who also use Google Code and Google&#8230;<span class=\"continue-reading\"> <a href=\"https:\/\/creately.com\/blog\/development\/adding-creately-diagrams-to-google-code-and-google-project-hosting\/\">Read More<\/a><\/span><\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[104],"tags":[21,33,682,98,121,45],"class_list":["post-3082","post","type-post","status-publish","format-standard","hentry","category-development","tag-customer-first","tag-google","tag-help","tag-partners","tag-plugin","tag-tips"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Adding Creately Diagrams to Google Code and Google Project Hosting - Creately Blog<\/title>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Adding Creately Diagrams to Google Code and Google Project Hosting - Creately Blog\" \/>\n<meta property=\"og:description\" content=\"After a recent comment on the original Creately Diagram Viewer post I thought it would be a good idea to follow up with a full post to help all the other Creately users who also use Google Code and Google... Read More\" \/>\n<meta property=\"og:url\" content=\"https:\/\/creately.com\/blog\/development\/adding-creately-diagrams-to-google-code-and-google-project-hosting\/\" \/>\n<meta property=\"og:site_name\" content=\"Creately Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/creately\" \/>\n<meta property=\"article:published_time\" content=\"2010-09-28T05:13:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-10T06:01:35+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/images.logicbuy.com\/Pages\/Image.aspx?url=http:\/\/images.logicbuy.com\/datastore\/userdeals\/634190214459050509google-code.jpg&amp;width=200&amp;height=150\" \/>\n<meta name=\"author\" content=\"Nick Foster\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nick Foster\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/creately.com\/blog\/development\/adding-creately-diagrams-to-google-code-and-google-project-hosting\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/creately.com\/blog\/development\/adding-creately-diagrams-to-google-code-and-google-project-hosting\/\"},\"author\":{\"name\":\"Nick Foster\",\"@id\":\"https:\/\/creately.com\/blog\/#\/schema\/person\/7d70e00e39f8cbf05379a4920ddc35eb\"},\"headline\":\"Adding Creately Diagrams to Google Code and Google Project Hosting\",\"datePublished\":\"2010-09-28T05:13:29+00:00\",\"dateModified\":\"2024-04-10T06:01:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/creately.com\/blog\/development\/adding-creately-diagrams-to-google-code-and-google-project-hosting\/\"},\"wordCount\":313,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/creately.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/creately.com\/blog\/development\/adding-creately-diagrams-to-google-code-and-google-project-hosting\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/images.logicbuy.com\/Pages\/Image.aspx?url=http:\/\/images.logicbuy.com\/datastore\/userdeals\/634190214459050509google-code.jpg&amp;width=200&amp;height=150\",\"keywords\":[\"Customer First\",\"google\",\"Help\",\"partners\",\"plugin\",\"tips\"],\"articleSection\":[\"Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/creately.com\/blog\/development\/adding-creately-diagrams-to-google-code-and-google-project-hosting\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/creately.com\/blog\/development\/adding-creately-diagrams-to-google-code-and-google-project-hosting\/\",\"url\":\"https:\/\/creately.com\/blog\/development\/adding-creately-diagrams-to-google-code-and-google-project-hosting\/\",\"name\":\"Adding Creately Diagrams to Google Code and Google Project Hosting - Creately Blog\",\"isPartOf\":{\"@id\":\"https:\/\/creately.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/creately.com\/blog\/development\/adding-creately-diagrams-to-google-code-and-google-project-hosting\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/creately.com\/blog\/development\/adding-creately-diagrams-to-google-code-and-google-project-hosting\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/images.logicbuy.com\/Pages\/Image.aspx?url=http:\/\/images.logicbuy.com\/datastore\/userdeals\/634190214459050509google-code.jpg&amp;width=200&amp;height=150\",\"datePublished\":\"2010-09-28T05:13:29+00:00\",\"dateModified\":\"2024-04-10T06:01:35+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/creately.com\/blog\/development\/adding-creately-diagrams-to-google-code-and-google-project-hosting\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/creately.com\/blog\/development\/adding-creately-diagrams-to-google-code-and-google-project-hosting\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/creately.com\/blog\/development\/adding-creately-diagrams-to-google-code-and-google-project-hosting\/#primaryimage\",\"url\":\"http:\/\/images.logicbuy.com\/Pages\/Image.aspx?url=http:\/\/images.logicbuy.com\/datastore\/userdeals\/634190214459050509google-code.jpg&amp;width=200&amp;height=150\",\"contentUrl\":\"http:\/\/images.logicbuy.com\/Pages\/Image.aspx?url=http:\/\/images.logicbuy.com\/datastore\/userdeals\/634190214459050509google-code.jpg&amp;width=200&amp;height=150\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/creately.com\/blog\/development\/adding-creately-diagrams-to-google-code-and-google-project-hosting\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/creately.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Adding Creately Diagrams to Google Code and Google Project Hosting\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/creately.com\/blog\/#website\",\"url\":\"https:\/\/creately.com\/blog\/\",\"name\":\"Creately Blog\",\"description\":\"Latest Product Updates and Tips on Working Visually\",\"publisher\":{\"@id\":\"https:\/\/creately.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/creately.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/creately.com\/blog\/#organization\",\"name\":\"Creately\",\"url\":\"https:\/\/creately.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/creately.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2023\/01\/creately-logo-symbol.png\",\"contentUrl\":\"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2023\/01\/creately-logo-symbol.png\",\"width\":430,\"height\":237,\"caption\":\"Creately\"},\"image\":{\"@id\":\"https:\/\/creately.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/creately\",\"https:\/\/x.com\/creately\",\"https:\/\/www.instagram.com\/creately_app\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/creately.com\/blog\/#\/schema\/person\/7d70e00e39f8cbf05379a4920ddc35eb\",\"name\":\"Nick Foster\",\"description\":\"I'm co-founder and COO of Creately and Cinergix. I am originally from the UK and now living in Melbourne, Australia. I have always been interested in entrepreneurship and love being involved in shaping and growing Creately. You can follow me @nick_foster and don't forget to follow @creately.\",\"sameAs\":[\"https:\/\/creately.com\"],\"url\":\"https:\/\/creately.com\/blog\/author\/nick\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Adding Creately Diagrams to Google Code and Google Project Hosting - Creately Blog","robots":{"index":"noindex","follow":"follow"},"og_locale":"en_US","og_type":"article","og_title":"Adding Creately Diagrams to Google Code and Google Project Hosting - Creately Blog","og_description":"After a recent comment on the original Creately Diagram Viewer post I thought it would be a good idea to follow up with a full post to help all the other Creately users who also use Google Code and Google... Read More","og_url":"https:\/\/creately.com\/blog\/development\/adding-creately-diagrams-to-google-code-and-google-project-hosting\/","og_site_name":"Creately Blog","article_publisher":"https:\/\/www.facebook.com\/creately","article_published_time":"2010-09-28T05:13:29+00:00","article_modified_time":"2024-04-10T06:01:35+00:00","og_image":[{"url":"http:\/\/images.logicbuy.com\/Pages\/Image.aspx?url=http:\/\/images.logicbuy.com\/datastore\/userdeals\/634190214459050509google-code.jpg&amp;width=200&amp;height=150","type":"","width":"","height":""}],"author":"Nick Foster","twitter_misc":{"Written by":"Nick Foster","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/creately.com\/blog\/development\/adding-creately-diagrams-to-google-code-and-google-project-hosting\/#article","isPartOf":{"@id":"https:\/\/creately.com\/blog\/development\/adding-creately-diagrams-to-google-code-and-google-project-hosting\/"},"author":{"name":"Nick Foster","@id":"https:\/\/creately.com\/blog\/#\/schema\/person\/7d70e00e39f8cbf05379a4920ddc35eb"},"headline":"Adding Creately Diagrams to Google Code and Google Project Hosting","datePublished":"2010-09-28T05:13:29+00:00","dateModified":"2024-04-10T06:01:35+00:00","mainEntityOfPage":{"@id":"https:\/\/creately.com\/blog\/development\/adding-creately-diagrams-to-google-code-and-google-project-hosting\/"},"wordCount":313,"commentCount":0,"publisher":{"@id":"https:\/\/creately.com\/blog\/#organization"},"image":{"@id":"https:\/\/creately.com\/blog\/development\/adding-creately-diagrams-to-google-code-and-google-project-hosting\/#primaryimage"},"thumbnailUrl":"http:\/\/images.logicbuy.com\/Pages\/Image.aspx?url=http:\/\/images.logicbuy.com\/datastore\/userdeals\/634190214459050509google-code.jpg&amp;width=200&amp;height=150","keywords":["Customer First","google","Help","partners","plugin","tips"],"articleSection":["Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/creately.com\/blog\/development\/adding-creately-diagrams-to-google-code-and-google-project-hosting\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/creately.com\/blog\/development\/adding-creately-diagrams-to-google-code-and-google-project-hosting\/","url":"https:\/\/creately.com\/blog\/development\/adding-creately-diagrams-to-google-code-and-google-project-hosting\/","name":"Adding Creately Diagrams to Google Code and Google Project Hosting - Creately Blog","isPartOf":{"@id":"https:\/\/creately.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/creately.com\/blog\/development\/adding-creately-diagrams-to-google-code-and-google-project-hosting\/#primaryimage"},"image":{"@id":"https:\/\/creately.com\/blog\/development\/adding-creately-diagrams-to-google-code-and-google-project-hosting\/#primaryimage"},"thumbnailUrl":"http:\/\/images.logicbuy.com\/Pages\/Image.aspx?url=http:\/\/images.logicbuy.com\/datastore\/userdeals\/634190214459050509google-code.jpg&amp;width=200&amp;height=150","datePublished":"2010-09-28T05:13:29+00:00","dateModified":"2024-04-10T06:01:35+00:00","breadcrumb":{"@id":"https:\/\/creately.com\/blog\/development\/adding-creately-diagrams-to-google-code-and-google-project-hosting\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/creately.com\/blog\/development\/adding-creately-diagrams-to-google-code-and-google-project-hosting\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/creately.com\/blog\/development\/adding-creately-diagrams-to-google-code-and-google-project-hosting\/#primaryimage","url":"http:\/\/images.logicbuy.com\/Pages\/Image.aspx?url=http:\/\/images.logicbuy.com\/datastore\/userdeals\/634190214459050509google-code.jpg&amp;width=200&amp;height=150","contentUrl":"http:\/\/images.logicbuy.com\/Pages\/Image.aspx?url=http:\/\/images.logicbuy.com\/datastore\/userdeals\/634190214459050509google-code.jpg&amp;width=200&amp;height=150"},{"@type":"BreadcrumbList","@id":"https:\/\/creately.com\/blog\/development\/adding-creately-diagrams-to-google-code-and-google-project-hosting\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/creately.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Adding Creately Diagrams to Google Code and Google Project Hosting"}]},{"@type":"WebSite","@id":"https:\/\/creately.com\/blog\/#website","url":"https:\/\/creately.com\/blog\/","name":"Creately Blog","description":"Latest Product Updates and Tips on Working Visually","publisher":{"@id":"https:\/\/creately.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/creately.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/creately.com\/blog\/#organization","name":"Creately","url":"https:\/\/creately.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/creately.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2023\/01\/creately-logo-symbol.png","contentUrl":"https:\/\/d3n817fwly711g.cloudfront.net\/uploads\/2023\/01\/creately-logo-symbol.png","width":430,"height":237,"caption":"Creately"},"image":{"@id":"https:\/\/creately.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/creately","https:\/\/x.com\/creately","https:\/\/www.instagram.com\/creately_app\/"]},{"@type":"Person","@id":"https:\/\/creately.com\/blog\/#\/schema\/person\/7d70e00e39f8cbf05379a4920ddc35eb","name":"Nick Foster","description":"I'm co-founder and COO of Creately and Cinergix. I am originally from the UK and now living in Melbourne, Australia. I have always been interested in entrepreneurship and love being involved in shaping and growing Creately. You can follow me @nick_foster and don't forget to follow @creately.","sameAs":["https:\/\/creately.com"],"url":"https:\/\/creately.com\/blog\/author\/nick\/"}]}},"_links":{"self":[{"href":"https:\/\/creately.com\/blog\/wp-json\/wp\/v2\/posts\/3082","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creately.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/creately.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/creately.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/creately.com\/blog\/wp-json\/wp\/v2\/comments?post=3082"}],"version-history":[{"count":28,"href":"https:\/\/creately.com\/blog\/wp-json\/wp\/v2\/posts\/3082\/revisions"}],"predecessor-version":[{"id":29847,"href":"https:\/\/creately.com\/blog\/wp-json\/wp\/v2\/posts\/3082\/revisions\/29847"}],"wp:attachment":[{"href":"https:\/\/creately.com\/blog\/wp-json\/wp\/v2\/media?parent=3082"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/creately.com\/blog\/wp-json\/wp\/v2\/categories?post=3082"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/creately.com\/blog\/wp-json\/wp\/v2\/tags?post=3082"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}