Next week’s AtlasCamp promises to be full of powerful collaboration throughout the Atlassian developer ecosystem. We can’t wait to see what new products come out of Ship-It Day, to trade takeaways with our fellow developers and to soak in the insights from the rest of the lineup.

We’re so excited, we had to draw straws to see who would stay home!

We’re shipping 4 Gliffy team members to Atlas Camp this year. But we’re shipping something else that will help every AtlasCamp attendee: Gliffy now supports Finnish, Norwegian and Dutch languages, in addition to German, French, Swedish and the default, English.

To see all the Gliffy dialogues and prompts in Swedish, Finnish, Norwegian or Dutch, run Confluence with the appropriate language pack installed and start a Gliffy diagram from there. We think this update will help the international community of Atlassian developers communicate and collaborate with diagrams and visuals, at and after AtlasCamp.

At Gliffy, we help you liberate your ideas and execute your vision by making it simple to turn your software development projects, product roadmaps and UI wireframes into clear, collaborative diagrams.

To get started:

1. Download the new Gliffy Confluence Plugin 5.3.1 now or upgrade using the Universal Plugin Manager.
2. Then start Gliffy from Confluence with your choice of language pack installed.  Instructions: Installing a Language Pack in Confluence.

When computer monitors became available in full color, early design thinker and usability guru Donald Norman noted how much more likely people were to spend time working and being productive on the color models. Norman famously said what we now all know to be true: “attractive things work better.”

We agree: when something is beautiful, people are just more likely to use it.

At Gliffy, we help you liberate all the brilliance in your head by making it simple to turn your ideas into crystal-clear diagrams and pro-quality visuals, whether you’re putting together a flow-chart or a floor plan.

Now, we’re helping you level up the design, look and feel of your diagrams and charts, right from Confluence. No need to manually pick – or combine – colors anymore.

How to Get Started Using Gliffy’s New Themes:

• From the Gliffy start screen, hover over the various themes to preview them – then click to apply the theme of your choice to your Gliffy diagram.
• Each theme includes a combination of pre-set colors, shapes and line styles
• Get maximum mileage by using themes that work with your company’s colors, product or the seasons you reference in your visuals.

One more thing – we’ve been hearing from many of you who are using Gliffy across your organizations, for everything from project management to HR and even marketing and finance! So, we’ve also redesigned many of our existing templates and added over a dozen beautiful new templates to the Gliffy template library to help inspire your teams to communicate their plans, budgets and roadmaps with high-impact visuals.

New Templates Include:

• Timelines
• Sitemaps
• Next-gen flowcharts
• UI wireframes
• Project mangement roadmaps
• Venn diagrams

To get started with the new Gliffy Themes and Templates, download the new Gliffy Confluence Plugin 5.3 now or upgrade using the Universal Plugin Manager.

Sprechen sie Deutsch? Parlez-vous français? Pratar du svenska?

Confluence customers around the world have been vocal about how much they
love Gliffy’s revamped HTML5 editor. Since its October release, we’ve heard tons of
happy talk about improved speeds, smoother Confluence integration, and ease of
use.

Now Gliffy is pleased to respond using its users’ native tongues—our 5.2 release
integrates three new international language packs. Simply set your preference and
all dialogues and prompts within Gliffy will auto-translate into German, French,
Swedish, or the default English.

Our supported language list is set to grow as Gliffy moves towards full
internationalization.

Download Gliffy Confluence Plugin 5.2 now or upgrade through the Universal Plugin
Manager.

SVG File: “Big Idea” – The Noun Project – Creative Commons CC0 – No Rights Reserved

Have you ever looked at an icon like the one above and wanted it in your diagram? With the release of Gliffy Confluence Plugin 5.1 you can do that now with our Stencil beta feature that lets you drag and drop SVG files directly into the Gliffy HTML5 editor. In this post, we’ll walk you through what a stencil is, why using one is better than using an image, and some of the technical challenges we faced along the way.

Stencil vs Shape

In Gliffy terms, a stencil is an object that tells our editor how to draw the shape. A stencil can be resized to just about any dimension (within browser limits) and not lose any detail like an image does. This ability to add custom stencils brings us an exciting step closer to custom shapes. The difference being that a stencil gives the editor the ability to draw a symbol, but it doesn’t provide any behavior like a shape does. You can’t, for example, change the color or the line-width of a shape in a dropped SVG file, because the SVG file only has a static value for those things. The shape will forever be just that thick and that particular color. With a stencil, our editor doesn’t know those properties should be editable.

Even though we don’t have custom shapes yet, being able to drop just about any SVG file into Gliffy is still a big win. It opens the door to a whole slew of content, both public domain and purchasable, from content sites like the noun project or from companies like Amazon that decide to release their network symbols in an easy to use package.

As an added bonus, custom Visio shapes will now be converted using this same approach. Previously any custom Visio shapes were converted into a static image using Batik. So you’ll see a number of visual improvements and closer accuracy to the original Visio file.

See it in Action

Vector vs Raster

So now that you’ve seen how our stencils work, why should you use them? Sure, you can theoretically import all the content you need via our image upload feature, but you’ll quickly find the difference between the two when you attempt to scale them.

If you recall, an image is basically a bitmap. The file format keeps track of how many pixels it has, what color each pixel is, and where each pixel goes. If you try to scale the image, you’ll notice a definite loss of clarity because each pixel also scales up in size too. In a scaled image, a pixel that used to be a indistinguishable point on the page, now appears as a plainly visible square. Vector graphics on the other hand use paths, which are drawing commands that are agnostic to what size the graphic is. The example image below is pretty telling in the difference in quality.

Example: Vector graphic to the left, and image to the right. The image loses clarity as it is scales.

Behind the Curtain: Transforming your SVG into Canvas Commands

Since we’ve chosen to use the canvas API for a number of technical reasons, whenever you drop an SVG file into the Gliffy Editor we must convert the SVG file into canvas drawing commands. After reading the file locally using the file api, we call a Java service to transform the file. The logic behind this is really a beefed up Java port of Canvg, an SVG parser and renderer by Gabe Lerner. In our port, we’ve of course added a bunch of goodies including: non-scaling-stroke support, dashed-line support, better arc command support, and most importantly the ability to use mustache {{placeholders}} in an SVG file to change things such as color, size, and anything else you would normally want to manipulate in a given shape.

<svg xmlns=”http://www.w3.org/2000/svg” version=”1.1″ width=”{{width}}” height=”{{height}}” viewBox=”0 0 100 100″ overflow=”visible” preserveAspectRatio=”none” />

An example of an SVG template using {{width}} and {{height}} placeholders

However, since we would be transforming not only our SVG well-defined shapes, but any SVG shapes, we also had to solve the following issues:

1) Give the user a bounding box that makes visual sense.

2) Ensure that the shape resizes in a sensible way.

Bounding Box Madness

What exactly do I mean by this? To highlight the issue, let’s take a closer look at the following SVG file that draws a penguin.

<svg version=”1.1″ id=”Layer_1″ xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” x=”0px” y=”0px” width=”612px” height=”792px” viewBox=”0 0 612 792″ enable-background=”new 0 0 612 792″ xml:space=”preserve”>

<path d=”M330.178,386.124 … “/>

</svg>

In this example the viewport or viewbox is set, such that the viewable area is visible at 0,0 with a width of 612 pixels and a height of 792 pixels. The penguin, however, is drawn in the middle of the viewport. Internally, we assume that all of our Gliffy made shapes have an editable area based on an SVG’s viewbox, but we can’t make the same assumption in this case. When a user drops this file into the editor, we’d expect the penguin shape to show up with an overlay using the blue rectangle, not the magenta one, as shown above.

To compute the blue box, we would need to keep track of the file’s visible bounding box, a bounding box being the smallest box that contains a given set of points. In a more complicated file, we would also need to track the combined bounding box of any other visible path, and this is exactly what we do for our service. Whenever you drop in an SVG file into the editor, we not only transform the SVG into the proper drawing commands, but as we parse the file, we also keep track and compute the bounding box of all visible paths.

With this bounding box information in hand, we also know how to scale up the stencil, since we know it’s original ratio, and we can scale it without it appearing to have an arbitrary amount of whitespace.

Just the first step

SVG is a very large specification so please keep in mind that while our ultimate goal is to support just about any SVG file, this feature is still very much in beta status, and certain SVG features like CSS style support have not been implemented yet. We’d love to hear feedback from you, especially if you have problems importing certain SVG files.

We also know this isn’t the best workflow to import custom content, which is why this is a beta feature, but stay tuned! We’re also hard at work redesigning our shape library. Soon you’ll have a number of new Gliffy designed shapes to use, and we’re planning on making it just as easy to pull in external content.

Gliffy’s most requested feature, the ability to evenly distribute shapes, is now here!

Here’s the scenario: You have multiple shapes on the canvas that you want to space out evenly. Now you can instantly align and distribute your shapes with just a few simple clicks. Used in conjunction with snap-to-grid and drawing guides, you’ll now have perfectly spaced diagrams in record time!

Try it out for yourself today!  Download the Gliffy Confluence Plugin 5.1 Release or head to your Universal Plugin Manager.

While people have been using Venn diagrams for decades to visually represent the overlap between various contiguous sets of data, there is one reality that these type of charts utterly fail to depict. Unfortunately, that is the reality which we face most often—the understanding that everything is one.

Luckily, Komuso Buddhist Monk Shotaro Kaneda has been working with Gliffy to allow our conscious and subconscious selves to accept, without strife, what already is. The end result of this month-long meditation is the Zenn Diagram.

What do you use a Zenn diagram to represent? Practically everything. We mean practically? You can use it for everything. You can edit our Zenn diagram template to show the set of things you need to accomplish before a Q4 release, the emotions you feel upon hearing that there will be another Kevin James movie in the theaters, or both of these things together. That’s the beauty of the Zenn diagram.

Here’s just one sample Zenn diagram created using our template.

We hope that you find this new diagram type useful in your everyday life. If you want to know more, that’s unfortunate as wanting leads to need and need leads to disappointment.

Last October, we gave you our all-new HTML5 Editor. But c’mon, that’s old news…

What has Gliffy done for you lately?  A TON.  

• Try our first Blueprint (works with Confluence 5.1 only).
• Start drawing faster than ever by copying or inserting a Recent Diagram on the new and improved Gliffy Start Screen.
• Drawing just got way easier with evenly distributed shapes—our most requested feature has arrived!
• Include diagrams in Custom Page Templates.
• Diagrams now display faster and adapt to work in all page layouts.
• Zoom in and click on diagrams in iOS.
• Over a dozen more bug fixes and user experience improvements.

Download Gliffy Confluence Plugin 5.1 now or do it in the Universal Plugin Manager (UPM)

You can get a closer look by signing up for one of our Gliffy Confluence Plugin in OnDemand webinars.

The new editor is sleeker, snappier, and better integrated with Atlassian Confluence. Plus it has some exciting new features — like improved snap-to-grid placement and smarter copy and paste — that make it quicker and easier to keep even complex diagrams neat and professional.

What are you waiting for? Log into Confluence OnDemand and get diagramming!

Not already using Gliffy with Confluence OnDemand? Sign in to your current Confluence OnDemand account to add Gliffy, or give Confluence OnDemand with Gliffy a try.

If you want to know more about what coming in Confluence 5, check out the Atlassian blogs. Here at Gliffy, we’re particularly excited about how much faster Confluence 5 is going to be. And the slick new interface makes our diagrams look even better!

This flower take all the great qualities of my girlfriend, Ariel, and shows how she is so much more than some famous person: she’s the perfect girl for me. My work here at Gliffy is always inspired by her, even when I’m testing our app by building diagrams. Let’s face it, without her, I would just come to work passionless, just going through the motions of life instead of working on building a better product. And now you all can do the same by making your own flower for your special someone.

For the design, I wanted to figure out a way to use our Venn diagram symbols in a way that may not be so obvious. I layered the shapes on top of each other to get a different looking affect and then grouped the final shapes so that I could copy and reuse them. If you take a look at the shadow, you’ll notice that it’s just a few white Venn shapes over a black circle. With this I was able to build the perfect flower for my perfect girl.

Happy Valentine’s Day, Ariel!

Note from the editor:
Todd has generously agreed to share this template with all of our Gliffy users! If you’re already a Gliffy Online user (or interested in giving it a try!), just click the flower above to launch Gliffy in your browser.

If you use the Gliffy Confluence Plugin, download picking_the_perfect_girl.gon (right-click the link and save the file), then follow the instructions below:

1. Go to the wiki page where you would like to add the diagram.
2. Click Add > Gliffy Diagram.
3. Select Import from the menu.
4. Click Browse and upload picking_the_perfect_girl.gon.
5. Select the file you just uploaded and click Create.

Note: If you are a Gliffy Confluence Plugin user but haven’t yet upgraded to our HTML5 editor, you can download picking_the_perfect_girl.gxml in the legacy Gliffy GXML format.